概要
セマンティック・ウェブの一つに、構造化データというものがあります。構造化データを記載することで、データの「意味」を、クローラー等に分かりやすく伝えることができます。
場合によっては SEO 対策にもなります。例えば、Google で検索した時に下記のような「リッチスニペット」と呼ばれるものが出てくることがありますが、これは JSON-LD の構造化データを使用しています。
方法
構造化データにもいくつか種類がありますが、今回は JSON-LD に対応してみました。
手法としては、React Helmetで動的にこれらのデータを埋め込んでみました。 React Helmet は、Head タグ内のデータを動的に生成してくれる便利な React コンポーネントです。
今回は各ページに Helmet を設置し、それぞれ適切な情報を出力しています。 (まったく動的になっていないので、改善の余地があります)