diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 5aa6934..6bcfea2 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -5,7 +5,7 @@
     {{ partial "head" . }}
 </head>
 
-<body>
+<body itemscope itemtype="https://schema.org/WebPage">
     {{ partial "svg-icon-symbols" . }}
 
     <div class="wrapper">
diff --git a/layouts/partials/page-header.html b/layouts/partials/page-header.html
index 03502f5..7c3353a 100644
--- a/layouts/partials/page-header.html
+++ b/layouts/partials/page-header.html
@@ -10,8 +10,9 @@
     {{ $parent := .page.Parent }}
     {{ if $parent }}
         {{ $name := (partial "title" $parent) }}
-        {{ $value := (printf "<a href='%s'>%s</a> / %s" $parent.RelPermalink $name .value) }}
-        {{ template "breadcrumb" dict "page" $parent "value" $value }}
+        {{ $position := (sub .position 1) }}
+        {{ $value := (printf "<li itemprop='itemListElement' itemscope itemtype='https://schema.org/ListItem'><a itemscope itemtype='https://schema.org/WebPage' itemprop='item' itemid='%s' href='%s'><span itemprop='name'>%s</span></a><meta itemprop='position' content='%d' /></li><li> / </li>%s" $parent.RelPermalink $parent.RelPermalink $name $position .value) }}
+        {{ template "breadcrumb" dict "page" $parent "value" $value "position" $position }}
     {{ else }}
         {{ .value | safeHTML }}
     {{ end }}
@@ -19,24 +20,29 @@
 
 {{ $showBreadcrumb := (and (default true .Page.Params.GeekdocBreadcrumb) (default true .Site.Params.GeekdocBreadcrumb)) }}
 {{ $showEdit := (and ($.Scratch.Get "geekdocFilePath") $geekdocRepo $geekdocEditPath) }}
-<div class="gdoc-page__header flex flex-wrap justify-between{{ if not $showEdit }} hidden-mobile{{ end }}{{ if (and (not $showBreadcrumb) (not $showEdit)) }} hidden {{ end }}" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
-    <span>
-        {{if $showBreadcrumb }}
-        <span class="breadcrumb">
-            <svg class="icon path"><use xlink:href="#path"></use></svg>
+<div class="gdoc-page__header flex flex-wrap
+    {{ if $showBreadcrumb }} justify-between {{ else }} justify-end {{ end }}
+    {{ if not $showEdit }} hidden-mobile {{ end }}
+    {{ if (and (not $showBreadcrumb) (not $showEdit)) }} hidden {{ end }}" itemprop="breadcrumb">
+    {{if $showBreadcrumb }}
+    <div>
+        <svg class="icon path hidden-mobile"><use xlink:href="#path"></use></svg>
+        <ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
+            {{ $position := sub (len (split .RelPermalink "/")) 1 }}
             {{ $name := (partial "title" .) }}
-            {{ template "breadcrumb" dict "page" . "value" $name }}
-        </span>
-        {{ end }}
-    </span>
-    <span>
-        {{ if $showEdit }}
+            {{ $value := (printf "<li itemprop='itemListElement' itemscope itemtype='https://schema.org/ListItem'><span itemprop='name'>%s</span><meta itemprop='position' content='%d' /></li>" $name $position ) }}
+            {{ template "breadcrumb" dict "page" . "value" $value "position" $position }}
+        </ol>
+    </div>
+    {{ end }}
+    {{ if $showEdit }}
+    <div>
         <span class="editpage">
             <svg class="icon code"><use xlink:href="#code"></use></svg>
             <a href="{{ $geekdocRepo }}/{{ $geekdocEditPath }}/{{ $.Scratch.Get "geekdocFilePath" }}">
                 Edit this page
             </a>
         </span>
-        {{ end }}
-    </span>
+    </div>
+    {{ end }}
 </div>
diff --git a/src/sass/_base.scss b/src/sass/_base.scss
index e1fe7ab..c42f36b 100644
--- a/src/sass/_base.scss
+++ b/src/sass/_base.scss
@@ -538,3 +538,14 @@ img {
   transition-property: transform, margin-left, opacity;
   will-change: transform, margin-left;
 }
+
+// Breadcrumbs styles
+.breadcrumb {
+  display: inline;
+  padding: 0;
+  margin: 0;
+
+  li {
+    display: inline;
+  }
+}
