diff --git a/site/content/docs/creating-new-datasets.md b/site/content/docs/creating-new-datasets.md
index e17f3913..3e1ba79e 100644
--- a/site/content/docs/creating-new-datasets.md
+++ b/site/content/docs/creating-new-datasets.md
@@ -1,6 +1,6 @@
 ---
 title: 'Creating new datasets'
-description: 'PortalJS Tutorial II - Learn how to create new datasets on a data portal'
+description: 'Learn how to create new datasets on a data portal'
 ---
 
 So far, the PortalJS app we created only has a single page displaying a dataset. Data catalogs and data portals generally showcase many different datasets.
diff --git a/site/content/docs/deploying-your-portaljs-app.md b/site/content/docs/deploying-your-portaljs-app.md
index 1c776d83..c9e18dd9 100644
--- a/site/content/docs/deploying-your-portaljs-app.md
+++ b/site/content/docs/deploying-your-portaljs-app.md
@@ -1,6 +1,7 @@
-<NextSeo title="Deploying your PortalJS app - PortalJS" />
-
-# Deploying your PortalJS app
+---
+title: Deploying your PortalJS app
+description: 'Learn to deploy PortalJS apps'
+---
 
 Finally, let's learn how to deploy PortalJS apps to Vercel or Cloudflare Pages.
 
@@ -35,7 +36,7 @@ When you deploy, your PortalJS app will start building. It should finish in unde
 
 When it’s done, you’ll get deployment URLs. Click on one of the URLs and you should see your PortalJS app live.
 
->[!tip]
+> [!tip]
 > You can find a more in-depth explanation about this process at https://nextjs.org/learn/basics/deploying-nextjs-app/deploy
 
 ### One-Click Deploy
diff --git a/site/content/docs/searching-datasets.md b/site/content/docs/searching-datasets.md
index a672c558..3d0c878e 100644
--- a/site/content/docs/searching-datasets.md
+++ b/site/content/docs/searching-datasets.md
@@ -1,6 +1,7 @@
-<NextSeo title="Searching datasets - PortalJS" />
-
-# Searching datasets
+---
+title: Searching datasets
+description: "Learn how to create a searchable datasets index"
+---
 
 Typing out every link in the index page will get cumbersome eventually, and as the portal grows, finding the datasets you are looking for on the index page will become harder and harder, for that we will need search functionality.
 
diff --git a/site/content/docs/showing-metadata.md b/site/content/docs/showing-metadata.md
index b27825e5..e8cc2b8d 100644
--- a/site/content/docs/showing-metadata.md
+++ b/site/content/docs/showing-metadata.md
@@ -1,6 +1,7 @@
-<NextSeo title="Showing metadata - PortalJS" />
-
-# Showing metadata
+---
+title: Showing metadata 
+description: "Learn how to display metadata on the dataset page of a data portal"
+---
 
 If you go now to `http://localhost:3000/my-awesome-dataset`, you will see that we now have two titles on the page. That's because `title` is one of the default metadata fields supported by PortalJS.
 
diff --git a/site/pages/[...slug].tsx b/site/pages/[...slug].tsx
index 3a61a008..c9dbc528 100644
--- a/site/pages/[...slug].tsx
+++ b/site/pages/[...slug].tsx
@@ -13,6 +13,7 @@ import { CustomAppProps } from './_app.jsx';
 import computeFields from '@/lib/computeFields';
 import { getAuthorsDetails } from '@/lib/getAuthorsDetails';
 import JSONLD from '@/components/JSONLD';
+import { BreadcrumbJsonLd } from 'next-seo';
 
 export default function Page({ source, meta, sidebarTree }) {
   source = JSON.parse(source);
@@ -29,9 +30,19 @@ export default function Page({ source, meta, sidebarTree }) {
     setTableOfContents(toc ?? []);
   }, [router.asPath]); // update table of contents on route change with next/link
 
+  const urlSegments = meta.urlPath.split('/');
+  const breadcrumbs = urlSegments.map((segment, i) => {
+    return {
+      position: i + 1,
+      name: i == urlSegments.length - 1 ? meta.title || segment : segment,
+      item: '/' + urlSegments.slice(0, i + 1).join('/'),
+    };
+  });
+
   return (
     <>
       <JSONLD meta={meta} source={source.compiledSource} />
+      <BreadcrumbJsonLd itemListElements={breadcrumbs} />
       <Layout
         tableOfContents={tableOfContents}
         title={meta.title}