fbpx

As Best Creative, Do Everything For a Goal…

Blog 社員ブログ

BLOG

社員ブログ

SEOWeb制作Web知識
構造化データのこと~メリット、種類、テストツールの話など~
2020/10/08

構造化データの表示

ホームページでマークアップ(記述)される構造化データは、SEO対策の一つの手段であり、アクセス数アップが期待できる要素として大事です。一方で、構造化データの役割について、実はよく分かっていない方も少なからずいらっしゃると思います。
そこで、構造化データとは何なのか、基本的な情報や仕組みを本記事にて解説。メリット、種類、記述方法、テストツールにも言及します。
そうこう、おさえておきたいポイントにまんべんなくアプローチする内容です。
ぜひ参考にしてください。

目次

構造化データを学ぶ前に必要な基礎知識

構造化データについて教える人

まずは、構造化データを学ぶうえで必要な周縁の知識について紹介します。いずれも基本的なことです。曖昧な方は、確実に理解するようにしてください。

検索エンジン

構造化データの役割の一つが、検索エンジンに対してホームページの内容をわかりやすく伝えることです。

では、そもそも検索エンジンとは何か?
簡単にいうと、普段私たちが使っているGoogleやYahoo!などの検索サービスです。
インターネットで疑問に感じたことを調べるため、検索窓にキーワードを入力すると関連したサイトが一覧で表示されます。これは検索エンジンのプログラムによるものです。当然、そこでの掲載順位が高いと、ユーザーの目に留まりやすくなり、アクセス数が増える傾向にあります。そのため、ホームページの運営者は特定のキーワードで上位表示を目指すべく、さまざまな施策に取り組むのが一般的です。俗にSEO対策と呼ばれます。

構造化データは、先述した通り、検索エンジンに向けたものです。ホームページを構成する各要素が何を指しているのか適切に伝えることで、結果的に、SEOにおいても効果を発揮します。

セマンティックWeb

従来の検索エンジンは、ホームページに記載されているテキストをただの文字列として認識しているだけでした。つまり、文字の意味や文脈をしっかり理解できてはいなかったのです。そして、その後進化を遂げ、セマンティックWebという考え方が登場しました。これは、「適切にWeb上のデータを把握できるようにしていこう」という実にシンプルなものです。
たとえば、コーポレートサイトでは、会社情報を記載するにあたって会社名や住所、電話番号など、基本項目それぞれが指すもの、意味をきっちり認識できるようになります。では、なぜ検索エンジンはそれらの情報を判断できるようになったのか。ここで構造化データの働きが浮かび上がるのです。

構造化データとは?

構造化データの仕組みを示唆する接続ケーブル

構造化データはセマンティックWebを実現するために、HTML(ホームページのテキスト要素を作成するためマークアップ言語)の情報をより正確に理解できるようにしたものです。従来のテキスト情報に意味を持たせて、検索エンジンで有益な検索結果を提供できるようにする役割も持っています。
たとえば、「名前:新宿太郎」「生年月日:1980年1月1日」というテキストがあったとします。言うまでもなく、私たちはこの文字や言葉から情報(名前と生年月日)を受け取ることが可能です。しかし、過去の検索エンジンではただの文字列にすぎないものでした。そこに情報など存在しないと言わんばかりに……。
お察しの通り、構造化データによって、HTMLはただの文字列ではなく、はっきりとした意味を植え付けることができるようになりました。そしていまや、その機能は拡張し、より精度の高いメッセージを検索エンジンに届けられています。

ボキャブラリーとシンタックス

構造化データを理解するうえで、「ボキャブラリー」と「シンタックス」という言葉は覚えておきましょう。前者は、構造化データを設定する際の、情報を定義する規格です。名前であれば「name」、住所なら「address」といった具合です。
他方、後者はマークアップの仕様に当たります。主な種類は、「Microdata」「RDFa Lite」「JSON-LD」などです。

構造化タグ

代表的な構造化タグを知っておきたいところでしょう。
まず、「section」。見出しと本文、その他の情報で構成されています。文章のまとまりを示すタグです。
そして、「article」。記事であることを伝えるのに使います。
続いて、「aside」。サイドバーで利用します。補足情報を示すときに使うのが一般的です。
どんどんいきましょう!(笑)
「nav」はパンくずリストやグローバルナビゲーションなどで用います。
「header」はナビゲーションの補助やヘッダーを表します。
「footer」はコンテンツの作成者や著作権に関する記述を含めるのが常用手段です。もちろん、フッターであることを示すことができます。

以上、こうしたタグの活用が、検索エンジン側の認識・理解を助けてくれるのです。

構造化データの主なメリット

すでにいくつか述べてきましたが、あらためて構造化データのメリットを挙げたいと思います。知ればすぐにでも設置したくなるでしょう。いずれにせよ、ホームページの運用に生かせるはずです。

検索エンジンに対してコンテンツの理解を促してくれる!

構造化データによって、特定のテキストや画像の意味・文脈を検索エンジンが理解してくれるようになります。そのため、意図した情報をユーザーにも届けることができます。それは、検索エンジンがホームページの内容を正しく判断し、検索結果にも反映してくれるからです。

リッチリザルトでアクセス数アップに寄与!

通常の検索結果では、ホームページのタイトルとその説明文だけが表示されます。しかし、構造化データを用いるとパンくずリストやレビュー、FAQなど、さらに詳細な情報を表示してくれます。これをリッチリザルトといいます。検索結果のなかでも目立つため、クリックされやすい傾向にあります。

ナレッジグラフにサイト情報が表示されやすい!

ナレッジグラフとは、特定のワードで検索した際、検索ブラウザの右側に掲載されるパネル機能です。情報が大きく表示されるため、ユーザーとの接点が一気に近づきます。構造化データを駆使することで、検索エンジンから有益だと判断されれば、この枠に入る可能性は高まるでしょう。結果、クリック率の向上にも期待できます。

構造化データをHTMLに直接マークアップする方法

構造化データの神秘

構造化データをHTMLに直接マークアップする場合、大きく分けると3つの方法があります。先述したシンタックスの主な種類がまさに該当します。
schema.orgによって定められ、Googleがサポートしている「Microdata」「RDFa Lite」「JSON-LD」です。それぞれ、ご紹介しましょう。

Microdataの場合

headタグ要素以外でも、metaやlink要素を使って記述できる点や、精度の高いHTML5 の構文に違反しないことがメリットとして挙げられるMicrodataですが、主には「itemscope」「itemtype」「itemprop」がプロパティとして使われています。

Microdataの記述例です。

Microdataの記述例

1行目、divの開始タグ内にitemscope属性がついています。そして、divの終了タグとのあいだにはitempropでのプロパティが記述されています。
Microdataのメタデータの本体は、ルールとしてプロパティ名である「name」、値の「新宿花子」がペアです。
このマークアップによって、新宿花子という文字列がnameであることを検索エンジンに伝えられます。
なお、itemtype は次のように使われます。
itemtypeの使用例
この場合、人物の情報を定義づける役割が果たされます。

RDFa Liteの場合

Microdataとマークアップ方法の近いシンタックスです。
W3Cによって規格化された形式で、「HTML5」や「XHTML」など幅広い言語で使用できます。
HTMLのソースコードで該当する箇所の近くに、構造化データを記述する点もMicrodata同様です。更新こそ面倒ですが、変更漏れは回避しやすいと考えます。

RDFa Liteの記述例です。

RDFa Liteの記述例

各属性について、vocabは規格の定義(上記の場合、schema.org)、タイプ名はtypeofを用います(上記の場合、指定は会社を示すCorporation、郵便番号と顧客バーコードデータを示すPostalAddress)。そして、propertyには該当する内容が入ります。

JSON-LDの場合

JSON-LDはheadタグ要素内が一般的とはいえ、HTML内のどこでも記述可能です。データを1箇所にまとめられることができ、記述量も少なく、シンプルで分かりやすい点が特徴に挙げられます。

JSON-LDの記述例

JSON-LDの記述例

@contextで規格の定義(上記の場合、schema.org)、@typeでタイプが指定(上記の場合、schema.org)されます。
コンテンツの変更の際には、JSON-LDの調整も必須です。忘れないように注意しましょう。

構造化データに関するルールやマナー

構造化データには、知っておくべきルールやマナーがあります。適切なマークアップができるよう、しっかりと覚えてください。

商品の構造化データは単一ページのみ

商品に対する構造化データについて、マークアップは単一ページのみ可能です。この点は、Googleのガイドラインでも指摘されています。そのため、商品一覧のページではなく、詳細ページで構造化データを記述するようにしてください。
なお、画像については、リッチリザルトを考慮するならば、プロパティに「image」を含めることが必要です。

レシピの構造化データにカロリーは必須ではない

以前、料理のレシピなどでカロリーを表示すると、ランキングに影響があるという噂がありました。しかし、実際はカロリーのプロパティは必須ではなく、ランキングも左右しません。あくまで検索エンジンにとって、さまざまな要素の構造化データがコンテンツの理解に役立つという話です。もちろん、ユーザーにとってもそう。気になる方も多いことを考えれば、カロリーの表示はありがたいでしょう。

複数のアイテムをマークアップする時の注意点

「レシピの画像」と「レシピの動画」を、別々にマークアップしたとします。そうすると、Google はそれぞれを独立した構造化データと認識するかもしれません。
そこで、防止策が必要です。おすすめは、「@id」のプロパティでの関連付け。1つのページで複数のアイテムをマークアップする場合、「@id」を使用し、指定する名前を統一することで、対象の画像、動画を紐づけ関連性のあるものと判断してくれます。

構造化データに関する疑問とGoogle社員の回答

構造化データについて疑問・質問が取り上げられ、それに対してGoogle社員が回答していました。
いくつかその趣旨をご紹介しましょう。

ページ間の参照をGoogleは認識するの?

同一ページであれば、マークアップを関連付けることはよくあります。しかし、別々のページではそれ程多くありません。必要性があまり無いからです。それでも別々のページで関連付けを行いたいなら、「@id」で統一をすればGoogleは認識してくれます。
ただし、テストツールでは反映されないでしょう。

同じ内容に言及しているエンティティを同一視させるには?

エンティティとはWebサイトの実体性を伝える多くの要素のこと指します。具体的には運営者、電話番号、企業名などです。これらをマークアップする際は、同じ様式にしてください。なぜなら、Google は一貫性を好むからです。

リッチリザルトの表示以外でも役に立つ?

構造化データは、リッチリザルトだけで利用するわけではありません。そのページの内容を検索エンジンが理解できるようにすることが基本です。そのため、関連性があるなら、積極的に構造化データを用いることをおすすめします。結果的に、関連性の高い検索クエリからのトラフィックが増えるかもしれません。

リッチリザルトは2ページ目以降も出てくるの?

通常であれば、リッチリザルトは1ページ目だけに表示されるのが基本です。しかし、テスト的に2ページ目以降でも出てくることがあるでしょう。

構造化データのテストツールについて

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

構造化データを記述するにあたって、検索エンジンが認識しているかどうかは、テストツールで確認できます。ずばり「構造化データ テストツール」です。Googleが提供しているサービス「Google Search Console」に紐づいています。手軽で使いやすくエラーが一目でわかります。筆者も重宝しているおすすめのツールです。
しかし、すでに、この先、提供を終了することが発表されています。当面は利用できるとはいえ、非常に残念なお知らせです。

一方で、リッチリザルトの構造化データはベータ版から正式版へと変わりました。そう、「リッチリザルト テスト」です。構造化データの検証に関してはリッチリザルトとしてサポートしているものに限られるとはいえ、実際の Googlebot のレンダリングと同じ処理であったり、レンダリング後の HTML コードの確認であったり、プレビュー表示や加えて、モバイル・PC 両方のユーザーを識別したうえでの検証を可能にするなど機能は充実しているといえます。

構造化データを活用しよう!

構造化データを支えるネットワーク

構造化データはホームページ運営者とユーザーの双方にとって便利な機能です。
繰り返しますが、構造化データを利用すれば、検索エンジンに対してページの情報を伝えることができます。リッチリザルトが表示されることで、検索結果でも目に留まりやすくクリックされる期待も高まるでしょう。アクセス数アップをミッションとする担当者にとっては使わない手はありません。
そして、ユーザーにとっても親切です。とりわけリッチリザルトの表示に対しては、検索ブラウザ上で細かい情報をみてとれるため、スムーズに欲しい情報へとアプローチできます。

本記事にて、そのメリットを感じたならば、ぜひうまく活用してみてください。

(本文:サトウ)

SHARE

PLEASE CONTACT US

サングローブのサービスにご関心のある方は、
いつでも下記のボタンからお問い合わせください。

Go to TOP
Go to TOP