feat: add SEO microdata for doc breadcrumbs (#6697)

* feat: add SEO microdata for doc breadcrumbs * refactor * refactor
facebook · Mar 14, 2022 · 12a7305 · 12a7305
1 parent 4e4cc0c
commit 12a7305
Showing 1 changed file with 26 additions and 8 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx
@@ -26,38 +26,50 @@ 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>
   );
 }
 
 // TODO move to design system folder
 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>
   );
 }
 
 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>