schema.orgで構造化マークアップ！リッチスニペット表示でクリック率を改善

2017年6月2日

12061

schema.orgとは、Google、Yahoo、Microsoftの3社で策定を進めていた構造化マークアップ（形式言語）規格です。schema.orgの仕様通りにHTMLにマークアップすることで、通常のHTMLマークアップでは伝えきれない、より詳しい正確な情報を検索エンジンのクローラーが認識できるようになることでトラフィック獲得に有利に働きます。

構造化データとは？
schema.orgのメリット
schema.orgの仕組み
マークアップの応用編

構造化データとは？

構造化データとは、HTMLでマークアップされた情報が何を意味するのかを、クローラーが理解できるようにタグ付けしたものを指します。あるWebページのある文字列を見たときに、その単語が名詞なのか動詞なのか人間には理解できても、クローラーにとっては理解に困難が生じます。この問題をクリアするため、あらかじめ定義されたフォーマットに沿って、クローラーにも文字データを理解できるように構造化してマークアップしたものが構造化データです。

schema.orgでは、クローラーの情報収集の精度を高めることを目的としていますが、構造化マークアップすることは、結果的にユーザーに最適な検索結果を提供できるようになるため、Webサイトにおける施策の一環としても重要な位置付けと考えることができます。

schema.orgのメリット

リッチスニペット表示によるクリック率の向上

構造化マークアップを行うことでリッチスニペットを表示させることができるようになります。リッチスニペットは、通常のスニペットに加えて、画像・価格・レビューなどを併せて表示させることができます。アイキャッチやレビューなどを駆使して、Webサイトを目立たせることで、検索ユーザーの注意を引きやすくなり、結果的にクリック率が高くなると考えることができます。構造化マークアップの最大のメリットは、クリック率の向上につながるリッチスニペット表示とも言えるでしょう。

リッチスニペットの一例

パンくず
サイト階層の構造を示すパンくずを表示
製品
価格、在庫状況、レビューの評価など、製品に関する情報を表示
レビュー
レストラン、映画、店舗などのレビューを表示
テレビと映画
テレビ番組や映画に関する詳細情報を表示
動画
動画の画像を表示
レシピ
評価、調理時間、栄養情報などの情報を表示

参考：Google Search Gallery

リッチスニペット　レシピ検索の例

長期的には検索順位への好影響が期待できる

過去にGoogleのJohn Mueller氏が構造化マークアップを行うことが、ランキング要素になる可能性について言及しています。

YouTube：Googleウェブマスター・セントラル　オフィスアワー（英語）

動画中にあるように、今後、構造化マークアップを実装済みのWebサイトが、非実装のWebサイトに比べて好評価を受ける可能性はあると言えます。

schema.orgの仕組み

Webサイト運営者にとってメリットの大きい構造化マークアップですが、schema.orgとは、どのような仕組みで構成されているのでしょうか。ここではレシピコンテンツに対してのマークアップを例に挙げて、その基本的なプロパティと使用方法を解説していきます。

基本的なプロパティと使用方法

schema.orgでは、以下の基本的なプロパティを用いてマークアップを行います。

itemscope
itemtype
itemprop

各プロパティの使用方法は以下のようになります。ここではsectionタグを用いて解説していきます。

基本STEP①「itemscopeを追加して範囲を指定する」

sectionタグにitemscopeと記述することで、<section>〜</section>の間にあるHTMLがある特定のものについての情報であることを示すようになります。

<section itemscope>
<h1>レシピ情報</h1>
<span>料理の名前</span>
<p>使用する食材</p>
<p>調理の手順</p>
<p>レシピの製作者</p>
</section>

基本STEP②「itemtypeで何に関する情報かを指定する」

itemtypeをitemscopeの後ろに記述していきます。指定はURLで行い、適切なitemtypeを選ぶようにしましょう。今回は料理のレシピについての記載をしていますので、http://schema.org/Recipeを選択しています。

どのようなitemtypeがあるかはschema.orgに掲載されていますので、必ずこちらから参照してください。

<section itemscope itemtype =”http://schema.org/Recipe”>
<h1>レシピ情報</h1>
<span>料理の名前</span>
<p>使用する食材</p>
<p>調理の手順</p>
<p>レシピの製作者</p>
</section>

基本STEP③「itempropで情報の項目を指定する」

sectionタグにRecipeを指定したことで、このsectionが料理レシピの情報を扱っていることが分かるようになりました。このステップではsection内のそれぞれのタグが何の情報を扱っているかを詳細に記述していきます。

itempropで指定できるプロパティはitemtypeによって違いますので、必ず確認しながら進めていきましょう。指定できるプロパティはitemtypeで指定したURLから確認することができます。今回の例ではhttp://schema.org/Recipeとなります。

ここまでが、基本的なschema.orgのプロパティと使用方法の解説になります。各プロパティの要点をまとめると、

itemscope：範囲の指定。
itemtype：何に関する情報かの指定。
itemprop：その情報の項目についての指定。

以上のようになります。一このように考え方は至ってシンプルなので、難しく構えることはありません。

マークアップの応用編

さてここからは、応用編として更に構造的なマークアップについて解説をしていきます。

先程の例のなかで「レシピの制作者」という項目がありました。このままですと単純に名前を記述する形になりますが、せっかくですので少し情報を追加してみましょう。ポイントは情報量が増え多様化していく際にどのような構造化マークアップをすれば、クローラーが正確に情報を理解できるのかという部分です。

応用STEP①「レシピ製作者の項目を追加する」

まずは、項目を追加していきましょう。今回はレシピ製作者の「名前」の他に、「勤務先」と「顔写真」を追加してみましょう。

<section itemscope itemtype =”http://schema.org/Recipe”>
<h1>レシピ情報</h1>
<span itemprop=”name”>料理の名前</span>
<p itemprop=”recipeIngredient”>使用する食材</p>
<p itemprop=”recipeInstructions”>調理の手順</p>
<p itemprop=”author”>レシピの製作者</p>
<img src=”顔写真.jpg” alt=”レシピ製作者の顔写真”>
<p>勤務先</p>
</section>

応用STEP②「情報の構造化を考える」

さて、項目の追加が完了しましたので、次はitempropの記述になります。これらの項目にはどのようなプロパティを指定すればよいでしょうか。

ここで問題になるのが、sectionタグで指定しているRecipeのプロパティでは、「勤務先」について的確な指定をすることができないということです。ですが、考えてみると「料理のレシピ」という情報の枠の中に「顔写真」や「勤務先」という情報が含まれること自体が、クローラーにとっては理解に苦しむ情報の構造であるということです。ですから、この場合は「レシピの製作者」〜「勤務先」までをdivタグで囲って、入れ子構造にすることで情報の構造化を計っていきましょう。

<section itemscope itemtype =”http://schema.org/Recipe”>
<h1>レシピ情報</h1>
<span itemprop=”name”>料理の名前</span>
<p itemprop=”recipeIngredient”>使用する食材</p>
<p itemprop=”recipeInstructions”>調理の手順</p>
<div>
<p itemprop=”author”>レシピの製作者</p>
<img src=”顔写真.jpg” alt=”レシピ製作者の顔写真”>
<p>勤務先</p>
</div>
</section>

応用STEP③「入れ子構造にも構造化マークアップをする」

すでにお察しの通りかと思いますが、前のステップで記述したdivタグを新たに構造化マークアップすることで、section全体の情報を系統的に整理することが可能です。ここでは、レシピ製作者の情報に対してPersonというプロパティを使用していきます。

この際に注意することは、レシピ製作者として指定しているitemprop=”author”というプロパティをdivタグに移すことです。こうすることで、このdivタグ全体がauthorを表しているということになります。

<section itemscope itemtype =”http://schema.org/Recipe”>
<h1>レシピ情報</h1>
<span itemprop=”name”>料理の名前</span>
<p itemprop=”recipeIngredient”>使用する食材</p>
<p itemprop=”recipeInstructions”>調理の手順</p>
<div itemprop=”author” itemscope itemtype =”http://schema.org/Person”>
<p itemprop=”name”>レシピの製作者</p>
<img src=”顔写真.jpg” alt=”レシピ製作者の顔写真” itemprop=”image”>
<p itemprop=”worksFor”>勤務先</p>
</div>
</section>

これで、Recipeという情報の中にPersonという情報を構造的にマークアップすることができました。こうすることで、クローラーはレシピ情報の中のレシピ製作者が人物であり、顔写真と勤務先という情報を掲載しているということが理解できるようになります。

マークアップをテストする

マークアップを設定したら、Google Search Consoleの構造化データテストツールを使用して正しく表示されるかテストします。構造化データテストツールにURLを入力すると正しく構造化データが記入されているかチェックすることができます。

COOKPADの例

いかがでしたか？基本さえ理解できれば、応用も含めてそれほど難易度は高くない構造化マークアップ。もちろん、メンテナンスも含めて工数が増えるというデメリットは抱えていますが、それでも受けられる恩恵のほうが大きように感じます。schema.orgを駆使することで比較的簡単に構造化データを作ることができますので、ぜひ、時間を作ってWebサイトに磨きを掛けてみてください。