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/PostPreview/PostPreview.tsx | 104 +++++++++++++++++++---------- 1 file changed, 70 insertions(+), 34 deletions(-) (limited to 'src/components/PostPreview/PostPreview.tsx') diff --git a/src/components/PostPreview/PostPreview.tsx b/src/components/PostPreview/PostPreview.tsx index 3bf7bdb..2a0bcf1 100644 --- a/src/components/PostPreview/PostPreview.tsx +++ b/src/components/PostPreview/PostPreview.tsx @@ -7,6 +7,9 @@ import Image from 'next/image'; import { ButtonLink } from '@components/Buttons'; import { ArrowIcon } from '@components/Icons'; import { TitleLevel } from '@ts/types/app'; +import { BlogPosting, WithContext } from 'schema-dts'; +import Head from 'next/head'; +import { config } from '@config/website'; const PostPreview = ({ post, @@ -24,41 +27,74 @@ const PostPreview = ({ thematics: post.thematics, }; + const publicationDate = new Date(post.dates.publication); + const updateDate = new Date(post.dates.update); + + const schemaJsonLd: WithContext = { + '@context': 'https://schema.org', + '@type': 'BlogPosting', + name: post.title, + description: post.intro, + articleBody: post.intro, + author: { '@id': `${config.url}/#branding` }, + commentCount: post.commentCount ? post.commentCount : 0, + copyrightYear: publicationDate.getFullYear(), + creator: { '@id': `${config.url}/#branding` }, + dateCreated: publicationDate.toISOString(), + dateModified: updateDate.toISOString(), + datePublished: publicationDate.toISOString(), + editor: { '@id': `${config.url}/#branding` }, + image: post.featuredImage?.sourceUrl, + inLanguage: config.defaultLocale, + isBasedOn: `${config.url}/article/${post.slug}`, + isPartOf: { '@id': `${config.url}/blog` }, + license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr', + thumbnailUrl: post.featuredImage?.sourceUrl, + }; + return ( -
- {post.featuredImage && Object.keys(post.featuredImage).length > 0 && ( -
- {post.featuredImage.altText} -
- )} -
- - - {post.title} - - -
-
-
- - {t`Read more`} - - {' '} - {t({ message: `about ${post.title}`, comment: 'Post title' })} - - - -
- -
+ <> + + + +
+ {post.featuredImage && Object.keys(post.featuredImage).length > 0 && ( +
+ {post.featuredImage.altText} +
+ )} +
+ + + {post.title} + + +
+
+
+ + {t`Read more`} + + {' '} + {t({ message: `about ${post.title}`, comment: 'Post title' })} + + + +
+ +
+ ); }; -- cgit v1.2.3