Next.jsでパンくずリストの構造化データを作る

Next.jsでパンくずリストの構造化データを生成するようにしました。

パンくずリストの構造化データのコンポーネントを作成

パンくずリストは複数あるのでmapで回りながらitemListElementを動的に作ります。パンくずリストの構造化データができたらScriptコンポーネントを利用してscriptタグとして生成します。

import { BreadCrumb } from "@/_libs/domain/BreadCrumb";
import Script from "next/script";

type Props = {
  breadCrumbs: BreadCrumb[];
};

export const BreadCrumbJsonLD = ({breadCrumbs}: Props) => {
  const itemListElement = breadCrumbs.map((breadCrumb, index) => {
    return {
      "@type": "ListItem",
      "position": index + 1,
      "name": breadCrumb.title,
      "item": `${process.env.BASE_URL}${breadCrumb.path}`
    }
  })

  const jsonld = [
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": itemListElement
    }
  ];

  return (
    <>
      <Script
        id="breadcrumb-jsonld"
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonld) }}
      />
    </>
  );
};

パンくずリストの構造化データを生成する

上記で作成したコンポーネントをページで呼び出します。

const breadCrumbs = [
  {
    title: "TOP",
    path: "/",
  },
  {
    title: "記事一覧",
    path: "/articles",
  },
  {
    title: article.title,
    path: `/articles/${article.id}`,
  },
];

...

<BreadCrumbJsonLD breadCrumbs={breadCrumbs} />

正しく呼び出すと以下のように構造化データのHTMLが生成されています。

<script id="breadcrumb-jsonld" type="application/ld+json" data-nscript="afterInteractive">
[{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":
[{"@type":"ListItem","position":1,"name":"TOP","item":"http://hoge.com/"},
  {"@type":"ListItem","position":2,"name":"記事一覧","item":"http://hoge.com/articles"},
  {"@type":"ListItem","position":3,"name":"Next.jsでパンくずリストの構造化データを作る","item":"http://hoge.com/articles/1"}
]}]
</script>

パンくずリストの構造化データが正しく登録されているか確認

最後にリッチリザルトテストで正しい構造化データになっているかを確認します。

上記のサイトにアクセスして構造化データを入れた対象のページのURLを入力してテストすると結果が返ってきます。以下のように有効なアイテムを検出しましたとなれば完了です。