diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-01-19 13:56:34 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-01-19 14:22:28 +0100 |
| commit | a26b775b7bbf1abd3e99c8bf9ce4c7522d3a0adc (patch) | |
| tree | 7f041845fa64d00f20f949d1cba14fec3eca3435 /src/components/Comment | |
| parent | 813084fc23113ae2f594bf6ef1cf53bd003c9479 (diff) | |
chore: add structured data using schema.org and JSON-LD
I also added the featured image on single article.
Diffstat (limited to 'src/components/Comment')
| -rw-r--r-- | src/components/Comment/Comment.tsx | 42 |
1 files changed, 39 insertions, 3 deletions
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 <p>{t`This comment is awaiting moderation.`}</p>; }; + const schemaJsonLd: WithContext<CommentSchema> = { + '@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 ( - <li className={styles.item}> - {comment.approved ? getApprovedComment() : getCommentStatus()} - </li> + <> + <Head> + <script + type="application/ld+json" + dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }} + ></script> + </Head> + <li className={styles.item}> + {comment.approved ? getApprovedComment() : getCommentStatus()} + </li> + </> ); }; |