Next.jsで構造化データ(JSON-LD)に対応する
Next.jsプロジェクトでGoogleの構造化データ対応を行った。
やり方としてはHeadコンポーネントの中で[[script type="application/ld+json"]]を読み込むようにする。
import NextHead from "next/head";
const jsonLd = ({ title, updated, url, imageUrl, description }) => {
const jsonLd = {
"@context": "http://schema.org",
"@type": "Article",
name: title,
headline: title,
datePublished: "2020-04-27T00:00:00.000Z",
dateModified: updated,
url: url,
mainEntityOfPage: url,
image: [imageUrl],
description: description,
};
return JSON.stringify(jsonLd);
};
const Head: React.FunctionComponent<Props> = ({}) =>
return (
<NextHead
<script
type="application/ld+json"
dangerouslySetInnerHTML={{
__html: jsonLd({
title: "title",
description: "description",
imageUrl: "image url",
url: "url",
updated: new Date().toISOString()
}),
}}
/>
</NextHead>
);
};
export default Head;
Next.jsはXSS対策のためにデフォルトだと文字列をエスケープしてくれるようになっているが、エスケープをした状態で構造化データ テストツールを実行すると「} またはオブジェクト メンバーの名前がありません。」というエラーになってしまう。
そこで、[[dangerouslySetInnerHTML]]を使ってエスケープを解除するようにしている。
これで構造化データの対応ができた。