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対策はひと段落したので、あとは淡々とコンテンツを増やしていきたい。

参考

Google推奨「JSON-LD」で構造化マークアップ

google構造化データテスト

GatsbyJS: How to Implement Schema Markup on Your Gatsby Site

Schema Markup Generator