この記事は ウェブクルー Advent Calendar 2022 2日目の記事です。
昨日は @reon_kunishi_wc さんの「 開発プロセスをカレーの作り方で理解してみる 」でした。
はじめに
お久しぶりの記事投稿になります
今年も弊社のアドカレに参加させていただくことになりました！
今回はNuxt.jsで構造化マークアップの対応を行ったのでそれについて記事にしたいと思います。
構造化データとは
ページの意図を伝える明示的な手がかりとして構造化データを提供してもらうと、Google はそのページをより正確に理解できるようになります。
検索エンジンに正確な情報を伝えるために構造化データにすると良いということですね
ページに関する情報を提供し、そのコンテンツ（たとえば、レシピページの場合は材料、加熱時間と加熱温度、カロリーなど）を分類するために標準化されたデータ形式
構造化データでマークアップすると、検索結果での表示をリッチにすることができます。(リッチスニペット)
こんなかんじ → 検索ギャラリー
30ほど種類があり、それぞれ記述フォーマットがあります。
リッチスニペットの確認方法
正しく構造化マークアップできているかは以下で確認することができます。
リッチリザルト テスト
ボキャブラリーとシンタックス
構造化データをマークアップする際に使用するのがボキャブラリーとシンタックスです。
ボキャブラリー
何についての情報なのかを定義するような規格。
代表的なものがschema.org
シンタックス
HTML上に構造化マークアップを行う場合、形式が3種類あります。(JSON-LD、microdata、RDFa)
マークアップする際の仕様のこと。推奨はJSON-LD形式です。
JSON-LD形式で構造化データをマークアップする
JSON-LDはscriptタグを用いてHTML内に記述していきます。
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"name": "hoge太郎",
"birthDate": "1992-05-12"
}
</script>
Nuxt.jsのサイトに構造化マークアップをJSON-LD形式で対応
Nuxt.jsのサイトでhead内にscriptを書き入れる場合、
headメソッドを利用して__dangerouslyDisableSanitizersByTagIDで
scriptを挿入する形がありますが、ソースなかなか見づらいです…。
https://vue-meta.nuxtjs.org/api/#dangerouslydisablesanitizersbytagid
調べたところnuxt-jsonldというパッケージがあったので導入しました
Nuxt.js 2系
https://github.com/ymmooot/nuxt-jsonld/blob/v1/README.md
Nuxt.js 3系
https://github.com/ymmooot/nuxt-jsonld#readme\
(Nuxt3にはv2で対応された https://ymmooot.dev/articles/25/)
詳しい利用方法はそれぞれのREADMEにて！
複数の構造化データをマークアップしたい
調べたところ、このissueにたどり着きました。
https://github.com/ymmooot/nuxt-jsonld/issues/247#issuecomment-579851220
@graph 複数の構造化データを1つのスクリプトとして
https://www.w3.org/TR/json-ld/#named-graphs
弊社運用サイトでの実装例
記事コンテンツ内で、FAQとArticleを利用したかったのですが
nuxt-jsonld で @graphを用いて解決することができました
まとめ
リッチスニペット、30種類もあるのはこの記事書くまで知りませんでした
まだ利用したことないスニペットたくさんあるので
サイトに導入できそうなもの探してみようと思います～！！
ウェブクルーでは一緒に働いてくれる方を絶賛募集中です！
興味のある方はぜひお問い合わせください。
https://www.webcrew.co.jp/recruit/
明日のウェブクルー Advent Calendar 2022の担当は？
@youngjae_won さんです！よろしくお願いします