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. --- .env.example | 1 + package.json | 1 + src/components/Branding/Branding.tsx | 63 +++++++++++------ src/components/Breadcrumb/Breadcrumb.tsx | 55 +++++++++++++-- src/components/Comment/Comment.tsx | 42 +++++++++++- src/components/Layouts/Layout.tsx | 24 +++++++ src/components/PostPreview/PostPreview.tsx | 104 +++++++++++++++++++---------- src/config/website.ts | 1 + src/pages/article/[slug].tsx | 67 ++++++++++++++++++- src/pages/blog/index.tsx | 38 +++++++++++ src/pages/contact.tsx | 40 +++++++++++ src/pages/cv.tsx | 48 +++++++++++++ src/pages/index.tsx | 30 ++++++++- src/pages/mentions-legales.tsx | 50 ++++++++++++++ src/pages/sujet/[slug].tsx | 52 +++++++++++++++ src/pages/thematique/[slug].tsx | 47 +++++++++++++ src/ts/types/articles.ts | 2 + src/utils/helpers/format.ts | 2 + yarn.lock | 5 ++ 19 files changed, 607 insertions(+), 65 deletions(-) diff --git a/.env.example b/.env.example index efeb49d..fddbd69 100644 --- a/.env.example +++ b/.env.example @@ -7,6 +7,7 @@ AUTHOR_EMAIL="your@email.com" AUTHOR_URL="https://www.yourWebsite.com/" FEED_DESCRIPTION="What you want..." +NEXT_PUBLIC_FRONTEND_URL="$FRONTEND_URL" NEXT_PUBLIC_GRAPHQL_API="$BACKEND_URL$GRAPHQL_ENDPOINT" # Use this only in development mode. It prevents "unable to verify the first diff --git a/package.json b/package.json index 033527a..3ce04a9 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "prismjs": "^1.25.0", "react": "17.0.2", "react-dom": "17.0.2", + "schema-dts": "^1.0.0", "swr": "^1.1.1" }, "devDependencies": { diff --git a/src/components/Branding/Branding.tsx b/src/components/Branding/Branding.tsx index 9421314..5e2cf6a 100644 --- a/src/components/Branding/Branding.tsx +++ b/src/components/Branding/Branding.tsx @@ -6,36 +6,57 @@ import photo from '@assets/images/armand-philippot.jpg'; import Logo from '@assets/images/armand-philippot-logo.svg'; import { config } from '@config/website'; import styles from './Branding.module.scss'; +import Head from 'next/head'; +import { Person, WithContext } from 'schema-dts'; type BrandingReturn = ({ isHome }: { isHome: boolean }) => ReactElement; const Branding: BrandingReturn = ({ isHome = false }) => { const TitleTag = isHome ? 'h1' : 'p'; + const schemaJsonLd: WithContext = { + '@context': 'https://schema.org', + '@type': 'Person', + '@id': `${config.url}/#branding`, + name: config.name, + url: config.url, + jobTitle: config.baseline, + image: photo.src, + subjectOf: { '@id': `${config.url}` }, + }; + return ( -
-
-
- {t({ -
-
- + <> + + + +
+
+
+ {t({ +
+
+ +
+ + + {config.name} + + +

{config.baseline}

- - - {config.name} - - -

{config.baseline}

-
+ ); }; 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 && ( -