From 16ba7afe8fad415a1e34af466c316df56e86b87e Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Thu, 17 Feb 2022 10:37:34 +0800
Subject: [PATCH 1/3] feat: add SEO microdata for doc breadcrumbs

---
 .../src/theme/DocBreadcrumbs/index.tsx        | 35 ++++++++++++++-----
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx
index 8eecbe54170a..a11f844d1b10 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx
@@ -22,11 +22,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>
   );
 }
 
@@ -34,26 +36,35 @@ function BreadcrumbsItemLink({
 function BreadcrumbsItem({
   children,
   active,
+  position,
 }: {
   children: ReactNode;
   active?: boolean;
+  position?: string;
 }): 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={position} />
     </li>
   );
 }
 
 function HomeBreadcrumbItem() {
-  const homeHref = useBaseUrl('/');
   return (
-    <BreadcrumbsItem>
-      <BreadcrumbsItemLink href={homeHref}>🏠</BreadcrumbsItemLink>
-    </BreadcrumbsItem>
+    <li className="breadcrumbs__item">
+      <Link
+        className={clsx('breadcrumbs__link', styles.breadcrumbsItemLink)}
+        href={useBaseUrl('/')}>
+        🏠
+      </Link>
+    </li>
   );
 }
 
@@ -71,10 +82,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">
         <HomeBreadcrumbItem />
         {breadcrumbs.map((item, idx) => (
-          <BreadcrumbsItem key={idx} active={idx === breadcrumbs.length - 1}>
+          <BreadcrumbsItem
+            key={idx}
+            active={idx === breadcrumbs.length - 1}
+            position={String(idx + 1)}>
             <BreadcrumbsItemLink href={item.href}>
               {item.label}
             </BreadcrumbsItemLink>

From d502f59659c7457ef09dfc5ebddeb3ed4d7b7dd8 Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Thu, 17 Feb 2022 12:35:11 +0800
Subject: [PATCH 2/3] refactor

---
 .../src/theme/DocBreadcrumbs/index.tsx                   | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx
index a11f844d1b10..f333415586a4 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx
@@ -36,11 +36,9 @@ function BreadcrumbsItemLink({
 function BreadcrumbsItem({
   children,
   active,
-  position,
 }: {
   children: ReactNode;
   active?: boolean;
-  position?: string;
 }): JSX.Element {
   return (
     <li
@@ -51,7 +49,6 @@ function BreadcrumbsItem({
         'breadcrumbs__item--active': active,
       })}>
       {children}
-      <meta itemProp="position" content={position} />
     </li>
   );
 }
@@ -88,13 +85,11 @@ export default function DocBreadcrumbs(): JSX.Element | null {
         itemType="https://schema.org/BreadcrumbList">
         <HomeBreadcrumbItem />
         {breadcrumbs.map((item, idx) => (
-          <BreadcrumbsItem
-            key={idx}
-            active={idx === breadcrumbs.length - 1}
-            position={String(idx + 1)}>
+          <BreadcrumbsItem key={idx} active={idx === breadcrumbs.length - 1}>
             <BreadcrumbsItemLink href={item.href}>
               {item.label}
             </BreadcrumbsItemLink>
+            <meta itemProp="position" content={String(idx + 1)} />
           </BreadcrumbsItem>
         ))}
       </ul>

From 3ec32b4ce3ba1a1009865c6f470073b5646a0ee6 Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Mon, 7 Mar 2022 16:50:08 +0800
Subject: [PATCH 3/3] refactor

---
 .../src/theme/DocBreadcrumbs/index.tsx               | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx
index 0173dc1ec9cf..cdb69965ec61 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx
@@ -40,9 +40,11 @@ function BreadcrumbsItemLink({
 function BreadcrumbsItem({
   children,
   active,
+  index,
 }: {
   children: ReactNode;
   active?: boolean;
+  index: number;
 }): JSX.Element {
   return (
     <li
@@ -53,16 +55,18 @@ function BreadcrumbsItem({
         'breadcrumbs__item--active': active,
       })}>
       {children}
+      <meta itemProp="position" content={String(index + 1)} />
     </li>
   );
 }
 
 function HomeBreadcrumbItem() {
+  const homeHref = useBaseUrl('/');
   return (
     <li className="breadcrumbs__item">
       <Link
         className={clsx('breadcrumbs__link', styles.breadcrumbsItemLink)}
-        href={useBaseUrl('/')}>
+        href={homeHref}>
         🏠
       </Link>
     </li>
@@ -90,11 +94,13 @@ export default function DocBreadcrumbs(): JSX.Element | null {
         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>
-            <meta itemProp="position" content={String(idx + 1)} />
           </BreadcrumbsItem>
         ))}
       </ul>