構造化データ

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

「構造化データ」は、ルールに従ってマークアップするソースコードです。HTMLに記述することで有効になります。

「構造化データ」を実装するメリットは、マークアップすることでGoogle がコンテンツをより正確に認識できるようになり、Googleが提供する検索結果機能を有効にすることができることです。ユーザーもより関連性の高い情報を得ることができ、それによりクリック数(CTR)向上が見込める点です。

ただし、構造化データを正しくマークアップしても、必ず意図通り検索結果に表示されるとは限りません。また、検索順位が上がるランキング要因にではないことは認識すべき点です。

ちなみに、構造化データは、Structured Dataの和訳です。

構造化データの形式 schema.org

 schema.orgとは、Google、Bing、Yahoo!(米国法人) による、ウェブページの構造化データマークアップのための共通仕様をつくる取り組みです。検索エンジン毎にマークアップをしなくて済むように、構造化データの統一規格を設けた、ということでしょう。

Googleの公式アナウンスでは、「Google 検索での動作の正確な定義には、schema.org のドキュメントではなく developers.google.com(デベロッパーガイド) のドキュメントをご利用ください。」とありますので、Google対策としては、developers.google.comの説明・仕様に従うということになります。

構造化データで実現する主な検索結果の機能

拡張

パンくずリスト、サイトリンク検索ボックス、企業ロゴなどの組み合わせで、検索結果やリッチリザルトの見栄えを良くします。

リッチリザルト

レシピや映画、書籍の検索結果のクチコミの星や、サムネール画像など、グラフィカルな要素を表示します。まとめてカルーセル表示をされる場合もあります。リッチリザルトは、以前は「リッチカード」または「リッチ スニペット」と呼ばれていました。リッチリザルトには対象ジャンル毎に多くの機能と種類が用意されています。

構造化データ マークアップ形式

「Google では、JSON-LD(推奨)、Microdata、RDFa の 3 種類のページ内マークアップ形式をサポートしています」

「可能であれば、構造化データには JSON-LD を使用することをおすすめします。」

Google公式情報では上記の説明がありますので、迷わずJSON-LD形式の構造化データマークアップ一択ということで問題ありません。

構造化データマークアップを挿入する場所

マークアップしたソースは、該当ページのHTMLソース内の任意の場所に<script>~</script>の形式で記述します。HTMLソースのどこに入れても有効です。<head></head>内や</body>の上など、管理しやすい場所に記述します。

構造化データの種類

構造化データには様々な種類があり、それについては、Googleの公式解説サイトに詳細が掲載されています。ここで現状実装可能な構造化データの種類を確認することができます。2020年10月現在で、29種類が掲載されています。

Googleデベロッパー ガイド>構造化データ

この中で利用頻度が高く、汎用的な構造化データをピックアップして説明します。

ロゴ(Logo)

組織のロゴとして使用する画像を指定する構造化データです。

ロゴ構造化データマークアップのサンプル
ロゴ構造化データマークアップのサンプル

この中の"name","url","logo"を自社のサイトの情報に書き変えて、トップページのソースに記述し完了です。これは全ページに入れる必要はありません。

logo画像は、Googleデベロッパー ガイドで「画像は 112x112 ピクセル以上にする必要があります」とあるので正方形サイズにしておきます。

パンくずリスト(BreadcrumbList)

そのページのサイト内の位置づけ、階層構造を定義する構造化データです。

実際のディレクトリ構造と異なっていても問題なく、任意の階層構造を設定することが出来ます。

パンくずリスト構造化データマークアップのサンプル
パンくずリスト構造化データマークアップのサンプル

ページで目に見えているパンくずリストと内容が同じでも、異なっていても有効です。どちらが優先されるかはGoogle次第となります。

positionは階層、nameはページタイトル、itemは該当URLになります。Googleデベロッパー ガイドには「ページに移動する方法がサイト内に複数ある場合は、1 つのページに複数のパンくずリストを指定できます」とあるので、複数実装も可能です。

パンくずリスト構造化データの表示
パンくずリスト構造化データの表示

記事(Article)

ニュース、ブログ、スポーツなどの記事ページで、検索結果に画像を表示できるなど検索結果表示をリッチにすることを目的とした構造化データです。

AMP用と非AMP用で内容が変わります。下記は非AMP用です。

非AMP用記事構造化データマークアップのサンプル
非AMP用記事構造化データマークアップのサンプル

こちらも、id,name,urlを該当する内容にします。datePublishedは公開日、dateModifiedは更新日となります。

"headline"は、記事のタイトルを入れます。

"image"(画像)の幅は 1,200 ピクセル以上にする必要があります。

AMP用の構造化データは下記のようになります。

AMP用記事構造化データマークアップのサンプル
AMP用記事構造化データマークアップのサンプル

モバイル ファースト インデックス対策

「構造化データは、ページのコンテンツを把握しやすくする上で便利なものです。また、検索結果で自身のページをより効果的に強調できるようにもなります。<中略> モバイル ファースト インデックスでは、インデックスの対象となるのはモバイル版ページのみになるため、モバイル版ページで構造化データが使用されていないと、構造化データが見落とされてしまいます」

このように構造化データの理解とリッチリザルトについても、Googleはモバイルサイトを主体にすることになります。

画像代替テキスト(alt)の重要性

Googleは「画像に代替テキストが指定されていない場合、Google 画像検索でページ上の画像のコンテキストを把握することが非常に難しくなります」とアナウンスしています。

そのため、構造化データでマークアップする、ロゴ画像や記事画像についても、これらの画像を配置しているページのHTMLソースの<img>タグには、nameで設定したワードなど画像を説明するテキストを、altとして設定することが推奨されます。Googleが画像の内容を認識することの手助けになります。

構造化データの導入方法

手動

文字通り、上記のフォーマットを書き変えて、1ページづつソースに書いていく方法です。更新頻度が高いサイトでは負荷が高くなりますが、自由度は高くなります。

Wordpress

Markup (JSON-LD) structured in schema.orgなど、各種プラグインを利用します。プラグインによってはサポートしている構造化データの種類が限られていたりしますが、ロゴや、パンくずリスト、記事といった基本的な構造化データはサポートしており手軽に実装可能です。

Movabletype

構造化データ専用のテンプレート・モジュールを作り各テンプレートに実装します。MTタグを利用することで、自動的にタイトルやURLを取得することができ、自由度が高い実装が可能です。

GTM(Google Tag Manager)

ページタイトルやURLを取得するJavascriptをGTMのカスタムHTMLに記述・設定することで、GTMを導入しているサイトであれば、簡単に実装可能です。Javascriptの内容を工夫することで自由度が高い構造化データを入れることが出来ます。

マークアップ後の構造化データの確認

マークアップした構造化データのソースは必ず「リッチリザルトテストツール」で検証します。有効な構造化データになっているかどうかをチェックし、エラーが出ていたら直します。有効であれば、サーチコンソールでGoogle に URL の再クロールをリクエストし完了です。

関連ページ

出典