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/Comment/Comment.tsx | 42 +++++++++++++++++++++++++++++++++++--- 1 file changed, 39 insertions(+), 3 deletions(-) (limited to 'src/components/Comment') diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment/Comment.tsx index e0a65f3..11300fc 100644 --- a/src/components/Comment/Comment.tsx +++ b/src/components/Comment/Comment.tsx @@ -1,11 +1,14 @@ import { Button } from '@components/Buttons'; import CommentForm from '@components/CommentForm/CommentForm'; +import { config } from '@config/website'; import { t } from '@lingui/macro'; import { Comment as CommentData } from '@ts/types/comments'; +import Head from 'next/head'; import Image from 'next/image'; import Link from 'next/link'; import { useRouter } from 'next/router'; import { useEffect, useRef, useState } from 'react'; +import { Comment as CommentSchema, WithContext } from 'schema-dts'; import styles from './Comment.module.scss'; const Comment = ({ @@ -117,10 +120,43 @@ const Comment = ({ return

{t`This comment is awaiting moderation.`}

; }; + const schemaJsonLd: WithContext = { + '@context': 'https://schema.org', + '@id': `${config.url}/#comment-${comment.commentId}`, + '@type': 'Comment', + parentItem: isNested + ? { '@id': `${config.url}/#comment-${comment.parentDatabaseId}` } + : undefined, + about: { '@type': 'Article', '@id': `${config.url}/#article` }, + author: { + '@type': 'Person', + name: comment.author.name, + image: comment.author.gravatarUrl, + url: comment.author.url, + }, + creator: { + '@type': 'Person', + name: comment.author.name, + image: comment.author.gravatarUrl, + url: comment.author.url, + }, + dateCreated: comment.date, + datePublished: comment.date, + text: comment.content, + }; + return ( -
  • - {comment.approved ? getApprovedComment() : getCommentStatus()} -
    • + <> + + + +
  • + {comment.approved ? getApprovedComment() : getCommentStatus()} +
    • + ); }; -- cgit v1.2.3