refactor(hooks): rewrite useBreadcrumbs hook

* use next/router to get the slug instead of using props
* handle cases where the current page title is not provided
* update JSON-LD schema to match the example in documentation
* add tests

13 files changed, 106 insertions, 156 deletions

diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 6ef0c55..450859c 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -36,7 +36,11 @@ import { CONFIG } from '../utils/config';
 import { ROUTES } from '../utils/constants';
 import { getLinksItemData } from '../utils/helpers';
 import { loadTranslation, type Messages } from '../utils/helpers/server';
-import { useBreadcrumb, useThematicsList, useTopicsList } from '../utils/hooks';
+import {
+  useBreadcrumbs,
+  useThematicsList,
+  useTopicsList,
+} from '../utils/hooks';
 
 const link = (chunks: ReactNode) => <Link href={ROUTES.CONTACT}>{chunks}</Link>;
 
@@ -110,10 +114,9 @@ const Error404Page: NextPageWithLayout<Error404PageProps> = ({ data }) => {
       }),
     },
   };
-  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
-    title: messages.page.title,
-    url: ROUTES.NOT_FOUND,
-  });
+  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumbs(
+    messages.page.title
+  );
 
   const searchSubmitHandler: SearchFormSubmit = useCallback(
     async ({ query }) => {
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index bd102a9..6333056 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -46,7 +46,7 @@ import {
 import { loadTranslation, type Messages } from '../../utils/helpers/server';
 import {
   useArticle,
-  useBreadcrumb,
+  useBreadcrumbs,
   useComments,
   useHeadingsTree,
   usePrism,
@@ -74,10 +74,9 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({ data }) => {
       contentId: article.id,
     },
   });
-  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
-    title: data.post.title,
-    url: data.post.slug,
-  });
+  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumbs(
+    article.title
+  );
   const { ref, tree } = useHeadingsTree<HTMLDivElement>({ fromLevel: 2 });
   const { attributes, className: prismClassName } = usePrism({
     attributes: {
@@ -172,6 +171,7 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({ data }) => {
     webpageSchema,
     blogSchema,
     blogPostSchema,
+    breadcrumbSchema,
     ...getCommentsSchema(comments),
   ]);
 
@@ -208,12 +208,6 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({ data }) => {
         // eslint-disable-next-line react/no-danger -- Necessary for schema
         dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
       />
-      <Script
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
-        // eslint-disable-next-line react/jsx-no-literals -- Id allowed
-        id="schema-breadcrumb"
-        type="application/ld+json"
-      />
       <PageHeader
         heading={title}
         intro={intro}
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index df25cd2..49c16b1 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -37,7 +37,7 @@ import type {
   WPTopicPreview,
 } from '../../types';
 import { CONFIG } from '../../utils/config';
-import { ROUTES } from '../../utils/constants';
+import { PAGINATED_ROUTE_PREFIX, ROUTES } from '../../utils/constants';
 import {
   getBlogSchema,
   getLinksItemData,
@@ -48,13 +48,13 @@ import {
 import { loadTranslation, type Messages } from '../../utils/helpers/server';
 import {
   useArticlesList,
-  useBreadcrumb,
+  useBreadcrumbs,
   useThematicsList,
   useTopicsList,
 } from '../../utils/hooks';
 
 const renderPaginationLink: RenderPaginationLink = (pageNum) =>
-  `${ROUTES.BLOG}/page/${pageNum}`;
+  `${ROUTES.BLOG}${PAGINATED_ROUTE_PREFIX}/${pageNum}`;
 
 type BlogPageProps = {
   data: {
@@ -156,10 +156,9 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({ data }) => {
     },
   };
 
-  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
-    title: messages.pageTitle,
-    url: ROUTES.BLOG,
-  });
+  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumbs(
+    messages.pageTitle
+  );
 
   const webpageSchema = getWebPageSchema({
     description: messages.seo.metaDesc,
@@ -172,7 +171,11 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({ data }) => {
     locale: CONFIG.locales.defaultLocale,
     slug: ROUTES.BLOG,
   });
-  const schemaJsonLd = getSchemaJson([webpageSchema, blogSchema]);
+  const schemaJsonLd = getSchemaJson([
+    webpageSchema,
+    blogSchema,
+    breadcrumbSchema,
+  ]);
 
   const renderPaginationLabel: RenderPaginationItemAriaLabel = useCallback(
     ({ kind, pageNumber: number, isCurrentPage }) => {
@@ -240,12 +243,6 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({ data }) => {
         // eslint-disable-next-line react/no-danger -- Necessary for schema
         dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
       />
-      <Script
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
-        // eslint-disable-next-line react/jsx-no-literals -- Id allowed
-        id="schema-breadcrumb"
-        type="application/ld+json"
-      />
       <PageHeader
         heading={messages.pageTitle}
         meta={{ total: data.posts.pageInfo.total }}
diff --git a/src/pages/blog/page/[number].tsx b/src/pages/blog/page/[number].tsx
index ec465c2..906a08e 100644
--- a/src/pages/blog/page/[number].tsx
+++ b/src/pages/blog/page/[number].tsx
@@ -44,7 +44,7 @@ import type {
   WPTopicPreview,
 } from '../../../types';
 import { CONFIG } from '../../../utils/config';
-import { ROUTES } from '../../../utils/constants';
+import { PAGINATED_ROUTE_PREFIX, ROUTES } from '../../../utils/constants';
 import {
   getBlogSchema,
   getLinksItemData,
@@ -55,14 +55,14 @@ import {
 import { loadTranslation, type Messages } from '../../../utils/helpers/server';
 import {
   useArticlesList,
-  useBreadcrumb,
+  useBreadcrumbs,
   useRedirection,
   useThematicsList,
   useTopicsList,
 } from '../../../utils/hooks';
 
 const renderPaginationLink: RenderPaginationLink = (pageNum) =>
-  `${ROUTES.BLOG}/page/${pageNum}`;
+  `${ROUTES.BLOG}${PAGINATED_ROUTE_PREFIX}/${pageNum}`;
 
 type BlogPageProps = {
   data: {
@@ -86,7 +86,8 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
   useRedirection({
     isReplacing: true,
     to: ROUTES.BLOG,
-    whenPathMatches: (path) => path === `${ROUTES.BLOG}/page/1`,
+    whenPathMatches: (path) =>
+      path === `${ROUTES.BLOG}${PAGINATED_ROUTE_PREFIX}/1`,
   });
 
   const intl = useIntl();
@@ -184,10 +185,9 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
     },
   };
 
-  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
-    title: messages.pageTitle,
-    url: `${ROUTES.BLOG}/page/${pageNumber}`,
-  });
+  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumbs(
+    messages.pageTitle
+  );
 
   const webpageSchema = getWebPageSchema({
     description: messages.seo.metaDesc,
@@ -200,7 +200,11 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
     locale: CONFIG.locales.defaultLocale,
     slug: ROUTES.BLOG,
   });
-  const schemaJsonLd = getSchemaJson([webpageSchema, blogSchema]);
+  const schemaJsonLd = getSchemaJson([
+    webpageSchema,
+    blogSchema,
+    breadcrumbSchema,
+  ]);
 
   const renderPaginationLabel: RenderPaginationItemAriaLabel = useCallback(
     ({ kind, pageNumber: number, isCurrentPage }) => {
@@ -270,12 +274,6 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
         // eslint-disable-next-line react/no-danger -- Necessary for schema
         dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
       />
-      <Script
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
-        // eslint-disable-next-line react/jsx-no-literals -- Id allowed
-        id="schema-breadcrumb"
-        type="application/ld+json"
-      />
       <PageHeader
         heading={messages.pageTitle}
         meta={{ total: data.posts.pageInfo.total }}
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
index 9394ee8..264ca56 100644
--- a/src/pages/contact.tsx
+++ b/src/pages/contact.tsx
@@ -25,15 +25,13 @@ import {
   getWebPageSchema,
 } from '../utils/helpers';
 import { loadTranslation } from '../utils/helpers/server';
-import { useBreadcrumb } from '../utils/hooks';
+import { useBreadcrumbs } from '../utils/hooks';
 
 const ContactPage: NextPageWithLayout = () => {
   const { dates, intro, seo, title } = meta;
   const intl = useIntl();
-  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
-    title,
-    url: ROUTES.CONTACT,
-  });
+  const { items: breadcrumbItems, schema: breadcrumbSchema } =
+    useBreadcrumbs(title);
 
   const messages = {
     form: intl.formatMessage({
@@ -83,7 +81,11 @@ const ContactPage: NextPageWithLayout = () => {
     slug: ROUTES.CONTACT,
     title,
   });
-  const schemaJsonLd = getSchemaJson([webpageSchema, contactSchema]);
+  const schemaJsonLd = getSchemaJson([
+    webpageSchema,
+    contactSchema,
+    breadcrumbSchema,
+  ]);
 
   const submitMail: ContactFormSubmit = useCallback(
     async ({ email, message, name, object }) => {
@@ -148,12 +150,6 @@ const ContactPage: NextPageWithLayout = () => {
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
       />
-      <Script
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
-        // eslint-disable-next-line react/jsx-no-literals -- Id allowed
-        id="schema-breadcrumb"
-        type="application/ld+json"
-      />
       <PageHeader heading={title} intro={intro} />
       <PageBody>
         <ContactForm aria-label={messages.form} onSubmit={submitMail} />
diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx
index b77aa8c..d08c121 100644
--- a/src/pages/cv.tsx
+++ b/src/pages/cv.tsx
@@ -22,14 +22,14 @@ import { mdxComponents } from '../components/mdx';
 import CVContent, { data, meta } from '../content/pages/cv.mdx';
 import type { NextPageWithLayout } from '../types';
 import { CONFIG } from '../utils/config';
-import { PERSONAL_LINKS, ROUTES } from '../utils/constants';
+import { PERSONAL_LINKS } from '../utils/constants';
 import {
   getSchemaJson,
   getSinglePageSchema,
   getWebPageSchema,
 } from '../utils/helpers';
 import { loadTranslation } from '../utils/helpers/server';
-import { useBreadcrumb, useHeadingsTree } from '../utils/hooks';
+import { useBreadcrumbs, useHeadingsTree } from '../utils/hooks';
 
 const DownloadLink = (chunks: ReactNode) => (
   <Link href={data.file} isDownload>
@@ -44,10 +44,8 @@ const CVPage: NextPageWithLayout = () => {
   const intl = useIntl();
   const { ref, tree } = useHeadingsTree<HTMLDivElement>({ fromLevel: 2 });
   const { dates, intro, seo, title } = meta;
-  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
-    title,
-    url: ROUTES.CV,
-  });
+  const { items: breadcrumbItems, schema: breadcrumbSchema } =
+    useBreadcrumbs(title);
   const messages = {
     image: {
       caption: intl.formatMessage(
@@ -115,7 +113,11 @@ const CVPage: NextPageWithLayout = () => {
     slug: asPath,
     title,
   });
-  const schemaJsonLd = getSchemaJson([webpageSchema, cvSchema]);
+  const schemaJsonLd = getSchemaJson([
+    webpageSchema,
+    cvSchema,
+    breadcrumbSchema,
+  ]);
   const page = {
     title: `${seo.title} - ${CONFIG.name}`,
     url: `${CONFIG.url}${asPath}`,
@@ -141,12 +143,6 @@ const CVPage: NextPageWithLayout = () => {
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
       />
-      <Script
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
-        // eslint-disable-next-line react/jsx-no-literals -- Id allowed
-        id="schema-breadcrumb"
-        type="application/ld+json"
-      />
       <PageHeader
         heading={title}
         intro={intro}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index f4d36c1..ade628a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -29,7 +29,7 @@ import { CONFIG } from '../utils/config';
 import { ROUTES } from '../utils/constants';
 import { getSchemaJson, getWebPageSchema } from '../utils/helpers';
 import { loadTranslation, type Messages } from '../utils/helpers/server';
-import { useBreadcrumb } from '../utils/hooks';
+import { useBreadcrumbs } from '../utils/hooks';
 
 type RecentPostsProps = {
   posts: RecentArticle[];
@@ -129,10 +129,7 @@ type HomeProps = {
  * Home page.
  */
 const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
-  const { schema: breadcrumbSchema } = useBreadcrumb({
-    title: '',
-    url: ROUTES.HOME,
-  });
+  const { schema: breadcrumbSchema } = useBreadcrumbs();
 
   const webpageSchema = getWebPageSchema({
     description: meta.seo.description,
@@ -140,7 +137,7 @@ const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
     slug: ROUTES.HOME,
     title: meta.seo.title,
   });
-  const schemaJsonLd = getSchemaJson([webpageSchema]);
+  const schemaJsonLd = getSchemaJson([webpageSchema, breadcrumbSchema]);
 
   return (
     <Page hasSections>
@@ -158,12 +155,6 @@ const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
       />
-      <Script
-        // eslint-disable-next-line react/jsx-no-literals -- Id allowed
-        id="schema-breadcrumb"
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
-      />
       <HomePageContent components={getComponents(recentPosts)} />
     </Page>
   );
diff --git a/src/pages/mentions-legales.tsx b/src/pages/mentions-legales.tsx
index 176c8fe..8613898 100644
--- a/src/pages/mentions-legales.tsx
+++ b/src/pages/mentions-legales.tsx
@@ -22,7 +22,7 @@ import {
   getWebPageSchema,
 } from '../utils/helpers';
 import { loadTranslation } from '../utils/helpers/server';
-import { useBreadcrumb, useHeadingsTree } from '../utils/hooks';
+import { useBreadcrumbs, useHeadingsTree } from '../utils/hooks';
 
 /**
  * Legal Notice page.
@@ -30,10 +30,8 @@ import { useBreadcrumb, useHeadingsTree } from '../utils/hooks';
 const LegalNoticePage: NextPageWithLayout = () => {
   const intl = useIntl();
   const { dates, intro, seo, title } = meta;
-  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
-    title,
-    url: ROUTES.LEGAL_NOTICE,
-  });
+  const { items: breadcrumbItems, schema: breadcrumbSchema } =
+    useBreadcrumbs(title);
   const { ref, tree } = useHeadingsTree<HTMLDivElement>({ fromLevel: 2 });
 
   const webpageSchema = getWebPageSchema({
@@ -52,7 +50,11 @@ const LegalNoticePage: NextPageWithLayout = () => {
     slug: ROUTES.LEGAL_NOTICE,
     title,
   });
-  const schemaJsonLd = getSchemaJson([webpageSchema, articleSchema]);
+  const schemaJsonLd = getSchemaJson([
+    webpageSchema,
+    articleSchema,
+    breadcrumbSchema,
+  ]);
 
   const page = {
     title: `${seo.title} - ${CONFIG.name}`,
@@ -82,12 +84,6 @@ const LegalNoticePage: NextPageWithLayout = () => {
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
       />
-      <Script
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
-        // eslint-disable-next-line react/jsx-no-literals -- Id allowed
-        id="schema-breadcrumb"
-        type="application/ld+json"
-      />
       <PageHeader
         heading={title}
         intro={intro}
diff --git a/src/pages/projets/[slug].tsx b/src/pages/projets/[slug].tsx
index 0c750f9..8985f47 100644
--- a/src/pages/projets/[slug].tsx
+++ b/src/pages/projets/[slug].tsx
@@ -49,7 +49,7 @@ import {
   loadTranslation,
 } from '../../utils/helpers/server';
 import {
-  useBreadcrumb,
+  useBreadcrumbs,
   useGithubRepoMeta,
   useHeadingsTree,
 } from '../../utils/hooks';
@@ -183,10 +183,8 @@ type ProjectPageProps = {
 const ProjectPage: NextPageWithLayout<ProjectPageProps> = ({ data }) => {
   const { id, intro, meta, slug, title } = data.project;
   const intl = useIntl();
-  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
-    title,
-    url: slug,
-  });
+  const { items: breadcrumbItems, schema: breadcrumbSchema } =
+    useBreadcrumbs(title);
   const { ref, tree } = useHeadingsTree<HTMLDivElement>({ fromLevel: 2 });
 
   const page = {
@@ -211,7 +209,11 @@ const ProjectPage: NextPageWithLayout<ProjectPageProps> = ({ data }) => {
     slug,
     title,
   });
-  const schemaJsonLd = getSchemaJson([webpageSchema, articleSchema]);
+  const schemaJsonLd = getSchemaJson([
+    webpageSchema,
+    articleSchema,
+    breadcrumbSchema,
+  ]);
 
   const messages = {
     repos: {
@@ -262,12 +264,6 @@ const ProjectPage: NextPageWithLayout<ProjectPageProps> = ({ data }) => {
         // eslint-disable-next-line react/no-danger -- Necessary for schema
         dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
       />
-      <Script
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
-        // eslint-disable-next-line react/jsx-no-literals -- Id allowed
-        id="schema-breadcrumb"
-        type="application/ld+json"
-      />
       <PageHeader
         heading={title}
         intro={intro}
diff --git a/src/pages/projets/index.tsx b/src/pages/projets/index.tsx
index 843374a..401c68c 100644
--- a/src/pages/projets/index.tsx
+++ b/src/pages/projets/index.tsx
@@ -35,7 +35,7 @@ import {
   loadTranslation,
   type Messages,
 } from '../../utils/helpers/server';
-import { useBreadcrumb } from '../../utils/hooks';
+import { useBreadcrumbs } from '../../utils/hooks';
 
 type ProjectsPageProps = {
   data: {
@@ -49,10 +49,8 @@ type ProjectsPageProps = {
  */
 const ProjectsPage: NextPageWithLayout<ProjectsPageProps> = ({ data }) => {
   const { dates, seo, title } = meta;
-  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
-    title,
-    url: ROUTES.PROJECTS,
-  });
+  const { items: breadcrumbItems, schema: breadcrumbSchema } =
+    useBreadcrumbs(title);
   const intl = useIntl();
   const webpageSchema = getWebPageSchema({
     description: seo.description,
@@ -70,7 +68,11 @@ const ProjectsPage: NextPageWithLayout<ProjectsPageProps> = ({ data }) => {
     slug: ROUTES.PROJECTS,
     title,
   });
-  const schemaJsonLd = getSchemaJson([webpageSchema, articleSchema]);
+  const schemaJsonLd = getSchemaJson([
+    webpageSchema,
+    articleSchema,
+    breadcrumbSchema,
+  ]);
   const page = {
     title: `${seo.title} - ${CONFIG.name}`,
     url: `${CONFIG.url}${ROUTES.PROJECTS}`,
@@ -95,12 +97,6 @@ const ProjectsPage: NextPageWithLayout<ProjectsPageProps> = ({ data }) => {
         // eslint-disable-next-line react/no-danger -- Necessary for schema
         dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
       />
-      <Script
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
-        // eslint-disable-next-line react/jsx-no-literals -- Id allowed
-        id="schema-breadcrumb"
-        type="application/ld+json"
-      />
       <PageHeader
         heading={title}
         intro={<PageContent components={mdxComponents} />}
diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx
index 9eaecba..fd7f9e1 100644
--- a/src/pages/recherche/index.tsx
+++ b/src/pages/recherche/index.tsx
@@ -46,7 +46,7 @@ import {
 import { loadTranslation, type Messages } from '../../utils/helpers/server';
 import {
   useArticlesList,
-  useBreadcrumb,
+  useBreadcrumbs,
   useThematicsList,
   useTopicsList,
 } from '../../utils/hooks';
@@ -211,10 +211,7 @@ const SearchPage: NextPageWithLayout<SearchPageProps> = ({ data }) => {
     },
   };
 
-  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
-    title: messages.pageTitle,
-    url: ROUTES.SEARCH,
-  });
+  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumbs();
 
   const webpageSchema = getWebPageSchema({
     description: messages.seo.metaDesc,
@@ -227,7 +224,11 @@ const SearchPage: NextPageWithLayout<SearchPageProps> = ({ data }) => {
     locale: CONFIG.locales.defaultLocale,
     slug: asPath,
   });
-  const schemaJsonLd = getSchemaJson([webpageSchema, blogSchema]);
+  const schemaJsonLd = getSchemaJson([
+    webpageSchema,
+    blogSchema,
+    breadcrumbSchema,
+  ]);
 
   const pageUrl = `${CONFIG.url}${asPath}`;
 
@@ -250,12 +251,6 @@ const SearchPage: NextPageWithLayout<SearchPageProps> = ({ data }) => {
         // eslint-disable-next-line react/no-danger -- Necessary for schema
         dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
       />
-      <Script
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
-        // eslint-disable-next-line react/jsx-no-literals -- Id allowed
-        id="schema-breadcrumb"
-        type="application/ld+json"
-      />
       <PageHeader
         heading={messages.pageTitle}
         meta={{ total: articles ? articles[0].pageInfo.total : undefined }}
diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
index 43b5aa6..9d42644 100644
--- a/src/pages/sujet/[slug].tsx
+++ b/src/pages/sujet/[slug].tsx
@@ -34,7 +34,6 @@ import type {
   WPTopicPreview,
 } from '../../types';
 import { CONFIG } from '../../utils/config';
-import { ROUTES } from '../../utils/constants';
 import {
   getLinksItemData,
   getPostsWithUrl,
@@ -45,7 +44,7 @@ import {
 } from '../../utils/helpers';
 import { loadTranslation, type Messages } from '../../utils/helpers/server';
 import {
-  useBreadcrumb,
+  useBreadcrumbs,
   useHeadingsTree,
   useTopic,
   useTopicsList,
@@ -71,10 +70,9 @@ const TopicPage: NextPageWithLayout<TopicPageProps> = ({ data }) => {
     fallback: data.otherTopics,
     input: { first: data.totalTopics, where: { notIn: [topic.id] } },
   });
-  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
-    title: topic.title,
-    url: `${ROUTES.TOPICS}/${topic.slug}`,
-  });
+  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumbs(
+    topic.title
+  );
   const { ref, tree } = useHeadingsTree<HTMLDivElement>({ fromLevel: 2 });
 
   if (isFallback || isLoading) return <LoadingPage />;
@@ -106,7 +104,11 @@ const TopicPage: NextPageWithLayout<TopicPageProps> = ({ data }) => {
     slug,
     title,
   });
-  const schemaJsonLd = getSchemaJson([webpageSchema, articleSchema]);
+  const schemaJsonLd = getSchemaJson([
+    webpageSchema,
+    articleSchema,
+    breadcrumbSchema,
+  ]);
 
   const messages = {
     widgets: {
@@ -163,12 +165,6 @@ const TopicPage: NextPageWithLayout<TopicPageProps> = ({ data }) => {
         // eslint-disable-next-line react/no-danger -- Necessary for schema
         dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
       />
-      <Script
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
-        // eslint-disable-next-line react/jsx-no-literals -- Id allowed
-        id="schema-breadcrumb"
-        type="application/ld+json"
-      />
       <PageHeader
         heading={
           <>
diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx
index 6ab349d..f019341 100644
--- a/src/pages/thematique/[slug].tsx
+++ b/src/pages/thematique/[slug].tsx
@@ -33,7 +33,6 @@ import type {
   WPThematicPreview,
 } from '../../types';
 import { CONFIG } from '../../utils/config';
-import { ROUTES } from '../../utils/constants';
 import {
   getLinksItemData,
   getPostsWithUrl,
@@ -44,7 +43,7 @@ import {
 } from '../../utils/helpers';
 import { loadTranslation, type Messages } from '../../utils/helpers/server';
 import {
-  useBreadcrumb,
+  useBreadcrumbs,
   useHeadingsTree,
   useThematic,
   useThematicsList,
@@ -70,10 +69,9 @@ const ThematicPage: NextPageWithLayout<ThematicPageProps> = ({ data }) => {
     fallback: data.otherThematics,
     input: { first: data.totalThematics, where: { notIn: [thematic.id] } },
   });
-  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
-    title: data.currentThematic.title,
-    url: `${ROUTES.THEMATICS}/${data.currentThematic.slug}`,
-  });
+  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumbs(
+    thematic.title
+  );
   const { ref, tree } = useHeadingsTree<HTMLDivElement>({ fromLevel: 2 });
 
   if (isFallback || isLoading) return <LoadingPage />;
@@ -97,7 +95,11 @@ const ThematicPage: NextPageWithLayout<ThematicPageProps> = ({ data }) => {
     slug,
     title,
   });
-  const schemaJsonLd = getSchemaJson([webpageSchema, articleSchema]);
+  const schemaJsonLd = getSchemaJson([
+    webpageSchema,
+    articleSchema,
+    breadcrumbSchema,
+  ]);
 
   const messages = {
     widgets: {
@@ -154,12 +156,6 @@ const ThematicPage: NextPageWithLayout<ThematicPageProps> = ({ data }) => {
         // eslint-disable-next-line react/no-danger -- Necessary for schema
         dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
       />
-      <Script
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
-        // eslint-disable-next-line react/jsx-no-literals -- Id allowed
-        id="schema-breadcrumb"
-        type="application/ld+json"
-      />
       <PageHeader
         heading={title}
         intro={intro}