SEO対策で、JSON-LDを導入してみた

はじめに

SEO対策でJSON-LDを導入してみたので、導入手順等まとめておきます。

途中私の解釈も書いていますが、正確な最新情報はぜひ各ドキュメントをご参照ください！

JSON-LDとは

構造化マークアップの形式の一つで、Googleが利用を推奨しています。
ページごとの構造に合わせて、適切な構造をクローラーに伝えられる代物です。
構造の例）記事、商品、FAQ、組織、求人、レシピ、口コミ抜粋 etc

その他の構造化マークアップ導入形式

• microdata
• RDFa

というものがあるそうです。
ただ、Google先生いわく、

一般的に、Google はサイトの設定で許容されている限り、JSON-LD を構造化データに使用することを推奨します。これは、ウェブサイトの所有者が実装と管理を最も容易に行うことができる（つまり、ユーザーエラーの発生する可能性が低い）ソリューションであるためです。

とのこと。

何かしらの事情でHTMLタグを使って構造を記述したい場合は、JSON-LD以外のものが選択肢になりそうです。

JSON-LD導入のメリット

主に以下2点と認識しています。

リッチリザルト

Googleの検索結果の画面で、"リッチ"に出ます。

商品情報やFAQ、レビュー情報などがサイトに遷移せずとも見られるというものです。密度の高い情報を検索結果画面で届けることで、サイトへの流入やクリック率がアップする可能性があります。

SEO効果

クローラーが正確に情報を認識しやすくなります。
具体的な成果の事例は、Googleが以下のように記載していました。

• Rotten Tomatoes では、構造化データを 10 万ページに追加した結果、構造化データを含むページでのクリック率が、構造化データのないページに比べ 25% 増加しました。
• The Food Network では、全ページの 80% で検索結果の機能を有効にした結果、アクセス数が 35% 増加しました。
• 楽天では、構造化データを実装したページでのユーザーの滞在時間が、構造化データのないページに比べ 1.5 倍長くなりました。また、検索機能がある AMP ページでのインタラクション率は、検索機能がない AMP ページに比べ 3.6 倍高くなっています。
• Nestlé では、検索でリッチリザルトを表示するページのクリック率が、表示しないページに比べ 82% 高くなっています。

JSON-LDの導入の仕方

私は以下の流れで導入を行いました。

どの構造を使うか決める

以下の3つを参考にします。

• schema.org
• Google検索セントラル
• SEOに力入れている他社事例

最低でもGoogleが"必須"と言及しているプロパティを漏れなく対応することが大事かなと。エラーになるとリッチリザルト自体表示されない可能性がありますので。

各サイトの構造で使えるプロパティを確定する

たくさんあるので、導入するページが強調したい内容に合わせて、適切にプロパティの構成を決定する必要があります。

ちなみにここが一番時間かかりまました。。。どのページで、どの構造/プロパティを使うのか使わないのか、みたいな判断をしないといけない数が多いです。

私の判断軸としては、以下の3つです。

• schema.orgの仕様に沿っている
• Googleの必須、推奨具合
• プロダクトのユーザーにとっての重要な情報かどうか

実装する

Googleが提示するサンプルでは、以下のような形式でサイトに挿入するように記載があります。ここをページの構造ごとにカスタマイズしていく形です。
(これはレシピサイトの例のようです)

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Recipe",
  "name": "Banana Bread Recipe",
  "description": "The best banana bread recipe you'll ever find! Learn how to use up all those extra bananas.",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": 4.7,
    "ratingCount": 123
  },
  "video": {
    "@type": "VideoObject",
    "name": "How To Make Banana Bread",
    "description": "This is how you make banana bread, in 5 easy steps.",
    "contentUrl": "https://www.example.com/video123.mp4"
   }
}
</script>

実装した内容をテストする

テストの方法は2つあります。

• schema.orgの構造化データテスト
• Googleのリッチリザルトテスト

両方でエラーがないこと、Googleのリッチリザルトで狙った項目が拾われていることを確認します。

特にGoogleのリッチリザルトテストツールは、推奨項目がないワーニングを出してくれるので、抜けている項目がないかをチェックできて有益でした。

ただし、このツールで検出できないエラーもあるので、テスト通ったから必ずリッチリザルトが表示されるというものでもないそうです。

まとめ

これからSEO結果にどのような影響があるのか、楽しみです！

参考記事