SEO強化のサポート役「構造化データマークアップ」って何? そのやり方は?

いなば


SEO強化のサポート役「構造化データマークアップ」って何? そのやり方は?

こんにちは、フロントエンドエンジニアのいなばです。

案件で検索結果のリッチスニペット対応を行った際、構造化データマークアップについて調べたので、まとめてみました。
先日社内向け勉強会を行い、資料を作ったので今回はそれを記事にしてみました。

 

▼目次

構造化データマークアップとは?

まずは下にあるHTMLを見てください。なんの変哲もないHTMLですね。

<div>
 <h1>Avatar</h1>
 <span>Director: James Cameron (born August 16, 1954)</span>
 <span>Science fiction</span>
 <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

通常のHTMLは、文字列が何を意味するかに関する情報を提供しません。ここでの「Avetar(アバター)」は、大成功を収めた3D映画のことですが、検索エンジンは文字列が使われた背景や文脈まで理解することはまだ困難です。

 

次に、構造化データマークアップしたHTMLの例を見てみましょう(コードはMicrodataと呼ばれる構文による構造化マークアップの例です)。

<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <div itemprop="director" itemscope itemtype="http://schema.org/Person">
    Director: <span itemprop="name">James Cameron</span>
    (born <span itemprop="birthDate">August 16, 1954</span>)
  </div>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">
    Trailer
  </a>
</div>

文字列に対して、意味をメタデータとして持たせたマークアップを、構造化データマークアップと呼ぶようです。

構造化データマークアップにより、検索エンジンはその文字列が「特定の映画、場所、人物、または動画」などに対する記述だということを判別することができるようになります。

構造化データマークアップをすると何が期待できるのか?

構造化データマークアップをすると、検索結果での表示が最適化される可能性があります。キャプチャは、構造化データマークアップをした際にGoogle検索結果で反映されるリッチスニペットの一覧です。

パンくずやカルーセル表示など、何度か見かけたことのある方もいるかと思います。構造化データマークアップを行うことで、検索結果での表示がリッチになり、サイトへの流入の促進が期待できそうです。

Googleの検索エンジンが対応しているリッチスニペットの一覧は、こちらのページで確認することができます。
https://developers.google.com/search/docs/guides/search-gallery

構造化データマークアップでの注意点

ただし、構造化データマークアップで必ず検索結果の表示に反映されることは保証されていないようなので、注意が必要です。

Google does not guarantee that your structured data will show up in search results even if structured data is marked up and can be extracted successfully according to the testing tool.

  • The structured data is not representative of the main content of the page or potentially misleading.
  • The structured data is incorrect in a way that the testing tool was not able to catch.
  • The marked-up content is hidden from the user.

https://developers.google.com/search/docs/guides/mark-up-content?visit_id=1-636324866453354468-957459343&hl=ja&rd=1

また、リッチスニペットで表示されるための方法を紹介している記事によると、3つの条件があるということでした。

  • リッチスニペットの品質ガイドラインに沿っていること
  • 検索クエリと記事コンテンツの関連性
  • 記事コンテンツのクオリティ
参考
Googleのリッチスニペットが表示される条件(品質ガイドライン違反には手動対応あり)| 海外SEO情報ブログ
https://www.suzukikenichi.com/blog/why-doesnt-my-rich-snippets-appear/

構造化データマークアップの実践

必ず反映される保証はないといえども、やはりSEO観点から見るとリッチスニペットでの表示はとても魅力的です。ここからはどのようにして構造化データマークアップをWebサイトに適用するかを見ていきましょう。

構造化データマークアップの方法

現在Googleの検索エンジンが解釈する構造化データのフォーマットは、以下の3つです。

  • JSON-LD
  • microdata
  • RDFa

GoogleではJSON-LDを推奨しているとのことなので、今回はJSON-LDに絞って話を進めたいと思います。

schema.org

構造化データマークアップでは、Schema.orgにある「ボキャブラリ」と呼ばれる構造化データ用のスキーマを使用します。

http://schema.org/
Schema.orgはインターネット、Webページ、電子メールメッセージなどの構造化データ用のスキーマを作成、管理、宣伝するという使命を持つ共同作業のコミュニティ活動です。Schema.orgボキャブラリは、RDFa、Microdata、JSON-LDなど、さまざまなエンコーディングで使用できます。これらのボキャブラリーは、エンティティ、エンティティとアクション間の関係をカバーし、適切に文書化された拡張モデルを通じて容易に拡張できます。

ボキャブラリの一覧はこちらから確認することができます。キャプチャは途中で見切れていますが、非常にたくさんのボキャブラリが定義されています。

JSON-LDとは?

JSON-LDはJSONベースのデータ形式です。Googleやその他の検索エンジンに対してサイトのコンテンツを構造化データとして記述するために使用することができます。

今回はサンプルとして、LIGブログのトップページにもJSON-LDの記述があったので引っ張ってきました。@context と @typeは見慣れないですが、パッと見た感じは普通のJSONですね。

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "name": "株式会社LIG",
  "url": "https://liginc.co.jp/",
  "logo": "https://liginc.co.jp/logo.png",
  "sameAs": [
    "https://www.facebook.com/pages/LIG-inc/151284414928781",
    "https://twitter.com/LIG_J",
    "https://instagram.com/lig_j/"
  ]
}
</script>

@typeに指定されているOrganizationは、schema.orgで定義されているボキャブラリの1つです。schema.orgではボキャブラリごとにどのようなデータ構造を持てるのかが定義されています。

一番下にはJSON-LD、microdata、RDFaそれぞれの形式でのマークアップ例が載っているので、参考にしながら自サイトのHTMLにあてはめていけばよさそうです。

http://schema.org/Organization

期待される検索結果での表示のされ方

キャプチャは”@type”: “Organization” の構造化データを埋め込んだときのGoogle検索結果での見え方の例です。

schema.orgで定義されているデータには、必須かどうかの指定がなさそうですが、 Googleの検索エンジン側では必須のプロパティが存在します。

https://developers.google.com/search/docs/data-types/logo

構造化データマークアップの検証

マークアップが完了したら、Gooogleの提供する構造化データ テストツールに、URLもしくはソースコードを貼り付けて検証をしましょう。

構造化データ テストツール

先ほどのLIGブログのTOPページで出力されているLD-JSONをテストしてみました。テストの結果、正しく認識されていることを確認できました。

リリース後は、サーチコンソールからサイト内で認識されている構造化データの状況を確認することができます。

おわりに

構造化データマークアップによって検索順位のアップなどは起きないようですが、検索結果でリッチスニペットで表示されていれば、Webサイトへの流入やユーザーの検索体験に大きく貢献できそうです。

良質なコンテンツを増やしつつ、こういった細かな改善も継続していけるとよいですね。

参考リンク集

いなば
この記事を書いた人
いなば

フロントエンドエンジニア

おすすめ記事

Recommended by