From a26b775b7bbf1abd3e99c8bf9ce4c7522d3a0adc Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Wed, 19 Jan 2022 13:56:34 +0100 Subject: chore: add structured data using schema.org and JSON-LD I also added the featured image on single article. --- src/components/Breadcrumb/Breadcrumb.tsx | 55 +++++++++++++++++++++++++++++--- 1 file changed, 51 insertions(+), 4 deletions(-) (limited to 'src/components/Breadcrumb/Breadcrumb.tsx') diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx index 77e7c08..0b9977e 100644 --- a/src/components/Breadcrumb/Breadcrumb.tsx +++ b/src/components/Breadcrumb/Breadcrumb.tsx @@ -1,7 +1,9 @@ +import { config } from '@config/website'; import { t } from '@lingui/macro'; import Head from 'next/head'; import Link from 'next/link'; import { useRouter } from 'next/router'; +import { BreadcrumbList, WithContext } from 'schema-dts'; import styles from './Breadcrumb.module.scss'; const Breadcrumb = ({ pageTitle }: { pageTitle: string }) => { @@ -15,9 +17,6 @@ const Breadcrumb = ({ pageTitle }: { pageTitle: string }) => { const getItems = () => { return ( <> - - -
  • {t`Home`} @@ -32,14 +31,62 @@ const Breadcrumb = ({ pageTitle }: { pageTitle: string }) => {
    • )} +
  • {pageTitle}
    • ); }; + const getElementsSchema = () => { + const items = []; + const homepage: BreadcrumbList['itemListElement'] = { + '@type': 'ListItem', + position: 1, + name: t`Home`, + item: config.url, + }; + + items.push(homepage); + + if (isArticle || isThematic || isSubject) { + const blog: BreadcrumbList['itemListElement'] = { + '@type': 'ListItem', + position: 2, + name: t`Blog`, + item: `${config.url}/blog`, + }; + + items.push(blog); + } + + const currentPage: BreadcrumbList['itemListElement'] = { + '@type': 'ListItem', + position: items.length + 1, + name: pageTitle, + item: `${config.url}${router.asPath}`, + }; + + items.push(currentPage); + + return items; + }; + + const schemaJsonLd: WithContext = { + '@context': 'https://schema.org', + '@type': 'BreadcrumbList', + '@id': `${config.url}/#breadcrumb`, + itemListElement: getElementsSchema(), + }; + return ( <> + + + {!isHome && ( -