/【検索エンジンにあなたのページの「情報」を伝える】リッチスニペット対策にもなる「構造化マークアップ」を実装しよう!【検索エンジンにあなたのページの「情報」を伝える】リッチスニペット対策にもなる「構造化マークアップ」を実装しよう!2019.12.13Tweet最近、重要視されている「構造化マークアップ」。あなたのWebサイトの内容をクローラーに伝えることで、Googleなどの検索結果表示をリッチにさせることができる手法です。検索結果をリッチにさせる(リッチスニペット)とは、例えば検索窓を加えたり、商品のレビューやレシピを表示させることです。検証方法4.まとめ1.構造化マークアップとは?「構造化マークアップ」という言葉をご存知ですか?Googleなど大手検索エンジンのクローラーに「サイト内にどんな情報が書かれているのか」を認識させるルール・HTMLへの記述方法のことです。検索エンジンがコンテンツ内容を容易に把握することができるGoogleなどの検索結果に情報をリッチに表示させることができることです。検索エンジンは、インターネット上で提示されている情報のうち「限られた要素」しか理解できていません。例として、テキストなのか画像なのかタイトルなのかなどです。そこで、決められたルールに基づいてマークアップすることで、あるWebページ内で「誰が、どこで、何を」などの意味をもった情報をクローラーに伝えることができるようになります。Webページ内の情報の内容を伝えることで、検索エンジンやアプリケーションなどがそれらの情報を理解し、例えば検索結果にリッチスニペットとしてWebページの関連情報が表示されるようになります。SEOへのメリットはある?Googleは、現状構造化マークアップを行ったWebサイトのSEOへの影響はないと伝えていました。2015年のあるカンファレンス内で、構造化マークアップについて触れています。その際に、「今はSEOの順位上昇に影響はないが、今後は一因になるかもしれない」と、近い将来SEOの一因になる可能性を示唆しています。hangout)2.構造化マークアップ方法の1つ、「schema.org」とは何か?構造化マークアップを実現する方法は複数ありますが、その中で「schema.org」の定義を利用している「Microdata」と「JSON-LD」の2種類があります。「schema.org」についてです。これはコミュニティの名称で、このコミュニティが定義している「プロパティ」を参考にHTMLに追記していきます。定義されたプロパティにサイト内の該当する情報を記述すると、クローラーはプロパティにどんな情報が紐付けられているか理解し、Webサイト内の情報を「意味をもった情報」として認識することができます。次のように各情報にプロパティを当て込み記述していきます。「itemtype」は、どのような情報のカテゴリなのか、大まかにどのような種類の情報なのか、を明示することができます。「itemprop」は、「itemtype」で明示したカテゴリ内で定義できるプロパティになります。「itemtype」が「本(Book)」の場合、「itemprop」には、「本のエディション」、「作者」など「本」に関するプロパティが定義されています。次の「schema.org」のWebサイトより、まずは自分が定義したい情報を「itemtype」から選び、その中で自分がクローラーに認識させたいプロパティを「itemprop」から選んで記述していきます。「Microdata」を用いてHTMLタグに記述する「Microdata」は、プロパティを追加したいHTMLのタグにclassを付加するように記述しますので、「どの情報を登録しているか」確認がし易いことが特徴です。itemprop=”publisher”>株式会社メディックス</span></p>「JSON-LD」のルールでHTMLを記述する「JSON-LD」は、文字通りJSONの一種で、JSONを使用して構造化マークアップを実現できる記述方法であり、現在Googleが推奨しています。英語版ですがGoogleがWebサイト上で説明・推奨しています。)「JSON-LD」では、「Microdata」と同様「schema.org」が定義しているプロパティに該当する情報を追加していきますが、こちらはJSON形式で記述します。記述方法の違いは?「Microdata」「JSON-LD」共に「schema.org」で定義されたプロパティを使用してマークアップしますが、両手法で大きく異なることは、次の点になります。HTMLの特定エリアにまとめてプロパティと付加したい情報を記述するコーディング担当者や開発環境によって感じるメリット・デメリットは異なりますが、「JSON-LD」のように、「特定エリアにまとめられる」ことは、同一Webサイト内のほかのページに適用させることが容易になります。次からは具体的な記述例をご紹介します。「Microdata」の記述例HTML内で各プロパティを設定したいタグに情報を付加しながらマークアップしていきます。「JSON-LD」では、HTMLタグにはプロパティを記述せず、JSON形式で構造化データをマークアップし、<script>タグの中で定義していきます。4F”}}}</script>↓(上記HTML部分は、以下のようにコーディングしてほしいです)記述例を見ていくと、「JSON-LD」は、HTMLの記述内容に影響を受けずプロパティを設定することができるため、同一Webサイト内でほかのページにも構造化マークアップを記述したい場合、容易に実装することができます。Toolでは、構造化マークアップの文法が正しいかや設定どおりのデータで認識されているか、を検証することができます。「Microdata」での記述検証例(https://search.google.com/structured-data/testing-tool)「JSON-LD」での記述検証例4.まとめ簡単にですが、構造化マークアップの説明をしてきました。冒頭でお伝えしたとおり、構造化マークアップを記述しても、現状ではSEOに影響はありません。検索結果のリッチスニペットを表示させたい方は試してみる価値はあると思います。「schema.org」のタイプやプロパティなどを定義しているWebページは英語版しかありませんが、難解な文章ではありませんので、これまでお伝えした内容を参考に記述してみてください。