diff --git a/app/views/admin/communication/websites/pages/preview.html.erb b/app/views/admin/communication/websites/pages/preview.html.erb
index 2350e791275bc56bcada79583ec516a052c8721c..1e119534c08d0ccd9854f1b70e43e731b63de2e2 100644
--- a/app/views/admin/communication/websites/pages/preview.html.erb
+++ b/app/views/admin/communication/websites/pages/preview.html.erb
@@ -1,4 +1,19 @@
-<div class="container">
-    <%= @page.text.to_s %>
-</div>
+<header class="hero">
+  <%= kamifusen_tag @page.best_featured_image if @page.best_featured_image.attached? %>
+  <div class="container">
+    <div>
+      <h1><%= @page.title %></h1>
+    </div>
+    <ol class="breadcrumb" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+      <li class="breadcrumb-item" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
+        <a itemprop="item"><span itemprop="name">Accueil</span></a>
+        <meta itemprop="position" content="1">
+      </li>
+      <li class="breadcrumb-item active" aria-current="page" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
+        <span itemprop="name"><%= @page.title %></span>
+        <meta itemprop="position" content="2">
+      </li>
+    </ol>
+  </div>
+</header>
 <%= render 'admin/communication/blocks/preview', about: @page %>
diff --git a/app/views/admin/communication/websites/posts/preview.html.erb b/app/views/admin/communication/websites/posts/preview.html.erb
index a390bba28a6ca0d54c2425f97de77897b3aeb958..5b376edcd05469c620c35882b2d074491be90348 100644
--- a/app/views/admin/communication/websites/posts/preview.html.erb
+++ b/app/views/admin/communication/websites/posts/preview.html.erb
@@ -1,4 +1,19 @@
-<div class="container">
-    <%= @post.text.to_s %>
-</div>
+<header class="hero">
+  <%= kamifusen_tag @post.featured_image if @post.featured_image.attached? %>
+  <div class="container">
+    <div>
+      <h1><%= @post.title %></h1>
+    </div>
+    <ol class="breadcrumb" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+      <li class="breadcrumb-item" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
+        <a itemprop="item"><span itemprop="name">Accueil</span></a>
+        <meta itemprop="position" content="1">
+      </li>
+      <li class="breadcrumb-item active" aria-current="page" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
+        <span itemprop="name"><%= @post.title %></span>
+        <meta itemprop="position" content="2">
+      </li>
+    </ol>
+  </div>
+</header>
 <%= render 'admin/communication/blocks/preview', about: @post %>