From 12a7305238098a1c5f80d844b3ec59ab2a88547b Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Mon, 14 Mar 2022 08:45:47 +0800
Subject: [PATCH] feat: add SEO microdata for doc breadcrumbs (#6697)

* feat: add SEO microdata for doc breadcrumbs

* refactor

* refactor
---
 .../src/theme/DocBreadcrumbs/index.tsx        | 34 ++++++++++++++-----
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx
index f912aac438a4..cdb69965ec61 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx
@@ -26,11 +26,13 @@ function BreadcrumbsItemLink({
 }): JSX.Element {
   const className = clsx('breadcrumbs__link', styles.breadcrumbsItemLink);
   return href ? (
-    <Link className={className} href={href}>
-      {children}
+    <Link className={className} href={href} itemProp="item">
+      <span itemProp="name">{children}</span>
     </Link>
   ) : (
-    <span className={className}>{children}</span>
+    <span className={className} itemProp="item name">
+      {children}
+    </span>
   );
 }
 
@@ -38,16 +40,22 @@ function BreadcrumbsItemLink({
 function BreadcrumbsItem({
   children,
   active,
+  index,
 }: {
   children: ReactNode;
   active?: boolean;
+  index: number;
 }): JSX.Element {
   return (
     <li
+      itemScope
+      itemProp="itemListElement"
+      itemType="https://schema.org/ListItem"
       className={clsx('breadcrumbs__item', {
         'breadcrumbs__item--active': active,
       })}>
       {children}
+      <meta itemProp="position" content={String(index + 1)} />
     </li>
   );
 }
@@ -55,9 +63,13 @@ function BreadcrumbsItem({
 function HomeBreadcrumbItem() {
   const homeHref = useBaseUrl('/');
   return (
-    <BreadcrumbsItem>
-      <BreadcrumbsItemLink href={homeHref}>🏠</BreadcrumbsItemLink>
-    </BreadcrumbsItem>
+    <li className="breadcrumbs__item">
+      <Link
+        className={clsx('breadcrumbs__link', styles.breadcrumbsItemLink)}
+        href={homeHref}>
+        🏠
+      </Link>
+    </li>
   );
 }
 
@@ -76,10 +88,16 @@ export default function DocBreadcrumbs(): JSX.Element | null {
         styles.breadcrumbsContainer,
       )}
       aria-label="breadcrumbs">
-      <ul className="breadcrumbs">
+      <ul
+        className="breadcrumbs"
+        itemScope
+        itemType="https://schema.org/BreadcrumbList">
         {homePageRoute && <HomeBreadcrumbItem />}
         {breadcrumbs.map((item, idx) => (
-          <BreadcrumbsItem key={idx} active={idx === breadcrumbs.length - 1}>
+          <BreadcrumbsItem
+            key={idx}
+            active={idx === breadcrumbs.length - 1}
+            index={idx}>
             <BreadcrumbsItemLink href={item.href}>
               {item.label}
             </BreadcrumbsItemLink>