From 13d05cb267ecd9487a723af60d76935aa4905da6 Mon Sep 17 00:00:00 2001 From: Reece Humphreys Date: Thu, 7 Dec 2023 11:48:49 -0500 Subject: [PATCH 1/2] Breadcrumb structured data added --- .env | 1 + components/breadcrumbs.tsx | 90 +++++++++++++++++++++++--------------- 2 files changed, 56 insertions(+), 35 deletions(-) diff --git a/.env b/.env index 69a548df..97123563 100644 --- a/.env +++ b/.env @@ -2,3 +2,4 @@ NEXT_PUBLIC_GA_MEASUREMENT_ID=G-2D9VN5WR6Z NEXT_PUBLIC_ALGOLIA_APP_ID=CQS6UA9C70 NEXT_PUBLIC_ALGOLIA_SEARCH_KEY=ef679b476514ba6905fc1140c7781f48 NEXT_PUBLIC_API_HOST=https://docs.icerpc.dev +NEXT_PUBLIC_BASE_URL=https://docs.icerpc.dev diff --git a/components/breadcrumbs.tsx b/components/breadcrumbs.tsx index f1d4ef34..4d3a41c7 100644 --- a/components/breadcrumbs.tsx +++ b/components/breadcrumbs.tsx @@ -3,6 +3,7 @@ import React from 'react'; import Link from 'next/link'; import clsx from 'clsx'; +import Script from 'next/script'; export type Breadcrumb = { name: string; @@ -10,44 +11,63 @@ export type Breadcrumb = { }; type Props = { breadcrumbs: Breadcrumb[] }; +const baseUrl = process.env.NEXT_PUBLIC_BASE_URL; export const Breadcrumbs = ({ breadcrumbs }: Props) => { + const schema = { + '@context': 'https://schema.org', + '@type': 'BreadcrumbList', + itemListElement: breadcrumbs.map((crumb, index) => ({ + '@type': 'ListItem', + position: index + 1, // Schema.org position is 1-based. + name: crumb.name, + item: new URL(crumb.href, baseUrl).href + })) + }; + return ( -
    - {breadcrumbs.map((crumb, index) => { - const name = crumb.name; - const href = crumb.href; - const isLast = crumb === breadcrumbs[breadcrumbs.length - 1]; + <> +
      + {breadcrumbs.map((crumb, index) => { + const name = crumb.name; + const href = crumb.href; + const isLast = crumb === breadcrumbs[breadcrumbs.length - 1]; - return ( -
    1. - - {name} - - {!isLast ? ( - - - - ) : null} -
    2. - ); - })} -
    + return ( +
  1. + + {name} + + {!isLast ? ( + + + + ) : null} +
  2. + ); + })} +
+