Gatsbyブログに構造化データを追加する
構造化データとは
Google などで例えば「ターミネーター」を検索したとすると、上映情報やレビューが表示されます。それらは"Rich Snippet"と呼ばれ、それらを充実させると検索結果に自分のページの情報が多く表示されるのでSEO的に有利になります。
構造化データにも様々な種類がありますが、Googleが推奨している構造化データの形はJSON-LDといって、JSONの形で構造化データを書くものです。
今回は構造化データをJSON-LDの形でGatsbyブログに追加する方法を紹介します。
Json-ldコンポーネントを用意する
主にこのブログは「ブログ記事」と「トップ画面などのその他のページ」に大別されますので、2つの構造化データコンポーネントを用意します。
const jsonLd = {
"@context": "http://schema.org",
"@type": "WebSite",
"image": {
"@type": "ImageObject",
url: `${siteUrl}/images/tube.png`,
height: 1200,
width: 630,
},
"url": siteUrl,
"name": title,
"author": {
"@type": "Person",
"name": author,
},
"description": description,
publisher,
};siteUrlなどの変数はgatsby-config.jsから受け取れるようにgrapqhのクエリで指定しておきます。
return (
<Helmet>
<script type="application/ld+json">{JSON.stringify(jsonLd)}</script>
</Helmet>
)React-helmetを用いてscriptタグを作成し、必要な場所にコンポーネントを置いておきましょう。 このコンポーネントはroot用なのでindex.jsに置きました。
同じことをブログ用のJSON-LDコンポーネントでも行ます。
テストツールを用いて確認する
データを正しく設定出来ているかは、google構造化データテストを用いて確認することができます。必須の項目などもここで確認すると良いでしょう。
このように不備があれば指定してくれます。
まとめ
これでGatsbyブログのSEO対策はひと段落したので、あとは淡々とコンテンツを増やしていきたい。
参考
GatsbyJS: How to Implement Schema Markup on Your Gatsby Site