Reactで構造化データをJSON-LD形式で実装してみた
こんにちは！
アソビューでバックエンドエンジニアをしている島田です。
先日、FAQ(よくある質問)の構造化データをGoogle検索のリッチリザルトに表示させるためにreact-helmet-asyncというコンポーネントを使って構造化データをJSON-LD形式で実装を行ったのでそれについて書いていきます。
そもそもなぜ構造化データにJSON-LD形式を採用したのか
Google検索では以下の構造化データを使用できます。
- JSON-LD：ページの見出しまたは本文の
<script>タグ内に埋め込まれる JavaScript 表記 - microdata：HTML コンテンツ内に構造化データをネストするために使用される、オープン コミュニティの HTML 仕様。
- RDFa：検索エンジンに伝えたいユーザー表示コンテンツに対応する HTML タグ属性を追加することによってリンクデータをサポートする HTML5 の拡張機能。
参考：https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data?hl=ja
今まではmicrodataが主に使われていたみたいですが、HTMLタグやHTML属性を使用するので煩雑となりメンテナンスコストが掛かるというデメリットがありました。
一方、JSON-LDではscriptタグ内であればHTML内のどこに記述しても良いので管理がしやすいメリットがあります。さらに、Google検索で推奨されているのがJSON-LDであるため今回採用しました。
react-helmet-asyncについて
documentのheadを動的に管理できるreact-helmetというコンポーネントライブラリがあります。
react-helmetはcomponentWillMountを使用していて、React v16.3以降は非推奨となっていて、弊社ではv16.13.1を使用しているため今回は使用しませんでした。(公式サイトに記載あり)
react-helmet-asyncはreact-helmetをフォークして作られたコンポーネントになります。余談ですがreact-helmet-asyncはreact-helmetよりもダウンロードされています。(react-helmet vs react-helmet-async)
Reactで実装してみる
環境は以下の通りです。
react: 16.13.1
react-helmet-async: 1.1.2
typescript: 4.1.3
使い方はシンプルで<Helmet> タグを使用するコンポーネントを <HelmetProvider> で囲います。
あとは、<script> タグでよくある質問を埋め込んであげるだけで<head>タグへ挿入してくれます。
外部コンポーネント化してあげれば汎用的に使用できるので、とても便利です。
こちらを画面表示して、<head> タグの中身を見ると以下のように<script> タグが出力されていることを確認できます。
<head>
<script type="application/ld+json" data-rh="true">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"よくある質問","acceptedAnswer":{"@type":"Answer","text":"よくある質問の答え"}}]}
</script>
</head>
リッチリザルトで検証する
上記でよくある質問を<head>タグへ挿入した結果がリッチリザルトに正しく反映されているか検証したいなと思った時に簡単に結果を確認できるツールをGoogleが提供してくれています。
それが、リッチリザルトテストというツールで、URLまたはコードを入力することで構造化データの検証をしてくれます。
早速、検証してみましょう。
使い方は簡単で、以下の画面でURLまたはコードを入力して「URL をテスト」ボタンを押下します。
その後、以下のような結果画面が表示されます。緑のチェックマークとなっているのでOKです。
「検出された構造データ」の中身を確認することもできます。
ちゃんと反映されていますね。
さいごに
今回のような目的での使い方はあまり多くはないかもしれませんが、少しでも参考になれば幸いです。
アソビューではエンジニアを募集しています！ご興味ある方はぜひ応募ください！
アソビュー株式会社の募集 採用・求人情報 - Wantedly
アソビュー株式会社の新卒・中途・インターンの募集が48件あります。気軽に面談して話を聞いてみよう。職種や採用形態からあなたにあった募集を見つけることができます。募集では「どんなことをやるのか」はもちろん、「なぜやるのか」「どうやるのか」や実…
