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]]を使ってエスケープを解除するようにしている。

これで構造化データの対応ができた。

参考


Related #js

Firebase Auth Googleログイン時のリダイレクトドメインを変更する

CNAME追加とHostingの「カスタムドメインを追加」を行う

jsで配列からランダムにn件取得する

lodashのsampleSizeを使った

jsで連番の配列を作成する

Array.from(Array(n).keys())

VercelのPreview環境に固定のサブドメインを割り当てる

X-Robots-Tagは付与されないので注意