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

Next.jsのPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

Alexaに気温と二酸化炭素濃度を教えてもらう

「Alexa、気温」でセンサー情報を教えてくれるようになった

jsでクリップボードにコピーするボタンを実装する

Clipboard.writeText()を使う

Cloud FunctionsでFirebase Authenticationの認証情報を取得する

functions.https.onCallを使用している場合はcontextパラメータを受け取ることができる

AWS SESの受信メールを暗号化してs3に保存しLambdaで読み込む

jsの場合、複合処理を独自実装する必要がある

RaspberryPi ZeroにNode.jsの最新版をインストールする

vercel/install-nodeを使うと手軽にインストールできた