• コーディング ファクトリーHOME
  • Coding Methodology
  • 第111回 構造化マークアップでユーザーの目を引く検索結果表示に

コーディングメソドロジー

第111回 構造化マークアップでユーザーの目を引く検索結果表示に

構造化マークアップとは、決められたルールで情報を記述することにより、人間だけではなく検索エンジンなどのロボットにも、そのテキストがどのような意味を持っているのかを理解できるようにすることです。今回は構造化マークアップをすることのメリットと具体的な設定方法、実装後のテストツールについてご紹介します。

■ 構造化マークアップのメリット

図1:検索結果画面

構造化マークアップのメリット

図1 の画像はGoogleで「肉じゃが レシピ」と検索した時の、スマートフォンの検索結果画面です。

構造化マークアップでレシピ情報を設定をしているサイトでは、通常のテキストのみの検索結果とは異なり、図の赤枠部分のように、料理の写真、調理時間、カロリーなどの情報があわせて表示されます。通常のテキストのみの表示を「スニペット」と呼ぶのに対し、画像などの情報を含む表示を「リッチスニペット」といいます。リッチスニペットは通常のスニペットよりもユーザーの目を引きやすく、サイトを訪れるきっかけとなる情報をより多く、見た目にもわかりやすい状態で発信することができます。

また、AMP(Accelerated Mobile Pages)対応ページをGoogleの検索結果でカルーセルに掲載させるためには、次に解説するJSON-LD形式の構造化マークアップが必須となっています。

■ 具体的な記述と実装方法

構造化マークアップの仕様は、検索エンジン大手3社Google、Microsoft、Yahoo!が立ち上げたプロジェクト「schema.org」(http://schema.org/)で定められています。

記述方法は、Microdata、RDFa、JSON-LDの3種類があります。Microdata、RDFaが、HTMLタグに属性を直接あてる記述方法なのに対し、Googleが推奨するJSON-LDは、HTMLタグと切り離してコードを記述するため、管理しやすいのが特徴です。但し、ページに含まれていない情報を設定することはGoogleのガイドライン違反になるので注意が必要です。

コード1は、schema.orgの「レシピ」の仕様に基づいた、JSON-LD形式での構造化マークアップ例です。ページの内容によって変更が必要な箇所は赤文字の①~⑦の箇所です。

このコードをHTML内の任意の箇所に埋め込むことで、設定自体は完了となりますが、ページの内容と検索キーワードとの関連性が高くない場合には、構造化マークアップをしていてもリッチスニペットが表示されないこともあります。

コード1:JSON-LD形式でも構造化マークアップ

具体的な記述と実装方法

■ テストツールの紹介

制作したページで正しく構造化マークアップができているかどうかは、Googleのツールを使って確認することができます。文法が間違っていたり、設定必須項目が抜けていると「エラー」、推奨項目が抜けていると「警告」が表示されますので、公開する前に必ず確認しておきましょう。

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

https://search.google.com/structured-data/testing-tool?hl=ja

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム