SEOにも効く? - schema.org 仕様でWebページをマークアップする。

schema.org

Google ウェブマスターツール を利用していると、メニューに 検索のデザイン>構造化データという項目があります。この機能を利用すると、検索結果にリッチスニペットを表示する事ができます。
この記事では、schema.org 仕様に従ってWebページをマークアップし、HTMLページを構造化するための方法について説明します。
Magnolia CMSにおける実現方法も示します。

はじめに

弊社サイトを AWS に移行してから約二か月。
サイトリニューアル後、当然のごとく Google Analytics や Webmaster Tools 周りの設定 ( 見直し含む ) を行いました。

このとき、Webmaster Tools のメニューに [ 検索のデザイン ] > [ 構造化データ ] なるものを発見。

私自身リニューアル前はWebサイトの管理担当ではなかった事もあり、「何これ?」 状態だったのですが、調べてみると検索結果に リッチスニペット やその他の機能を表示されるために使われるとの事。

HTMLを適切にマークアップする事で、Googleが検索結果をリッチスニペット表示してくれます。

※以下はリッチスニペット ( レシピ ) の例ですが、調理時間、カロリー、料理の写真が表示されている事が判ります ( 角煮を選んだのは、たまたま私が先日作ったからです )。

リッチスニペット - レシピ

リッチスニペットを導入したからといって検索順位が上がるという訳ではありませんが ( Googleも「掲載順位を決定するためにマークアップを使用することはありません」と言っている )、文字だけの検索結果と上記のようなリッチスニペットの検索結果が同じページにあった場合、リッチスニペットが表示されている方をクリックしてしまう可能性が高いのではないでしょうか。

実際、海外ではリッチスニペットを導入してCTR ( クリック率 ) が30%アップとか、中には150%もアップしたという報告もあります。

という事で弊社サイトでもマークアップしてみようという事になりました。

マークアップ形式は何にするか?

リッチ スニペットと構造化データについて にあるように、Google のリッチスニペットがサポートしているマークアップを行うには、3つの形式 ( microdata, microformats, RDFa ) のうちいずれかを利用する事になります。

この記事では、可能な限り schema.org 仕様 ( = microdata ) でのマークアップを行う事にします。
schema.org は Google、Microsoft、Yahoo! が共同で勧めているマークアップの仕様策定の取り組みで、今後コンテンツのマークアップを行う場合、schema.org 仕様に従うのが一番確実と ( 少なくとも現状は ) 思えるからです。

マークアップの方法

schema.org によるマークアップの方法に関しては、Getting started with schema.org に説明があります。( 日本語訳は schema.orgを使いましょう )

マークアップ手順を大まかに説明すると、以下のようになります。

  1. マークアップ対象 (例:記事全体) を div タグで囲む
      <div>
        ( 記事全体 )
      </div>
    
  2. 上記div タグに itemscope 属性を付ける
      <div itemscope>
        ( 記事全体 )
      </div>
    
  3. 更に 型を表すitemtype 属性を付ける
      <div itemscope itemtype="http://schema.org/Article">
        ( 記事全体 )
      </div>
    
  4. div タグ中の各プロパティに itemprop属性を付ける
      <div itemscope itemtype="http://schema.org/Article">
        <span itemprop="name">記事名</span>
        <span itemprop="datePublished">記事公開日</span>
        ( 記事残り )
      </div>
    

※上記 Getting started with schema.org では、映画「Avatar」を例にしたマークアップの方法が示されています。

※schema.org で定義されている型の種類は The Type Hierarchy ページで確認できます。( 日本語訳は 型の階層構造 )

※現時点で Google がリッチスニペット対応している、レビュー、商品、レシピ、イベント、音楽 等はマークアップの効果が高いと思われます。
対応を行うサイトが提供しているコンテンツの種類に応じて、適応する型を決めましょう。

以下では弊社Webサイトで実際にマークアップを行った内容を例として説明します。

実際にマークアップする

弊社では以下についてマークアップを行う事にしました。

  • 記事
    当記事を含め、サイト上のコンテンツに対して Artile タイプのマークアップを行う。
  • パンくず
    サイト移行前には検索結果上でコンテンツの階層構造が表現されていたが、移行後にされなくなった。これをマークアップする。
    但し、リッチ スニペット - パンくずリスト によると、現状 Google では、schema.org の WebPage タイプに含まれる breadcrumb プロパティではなく、Data-vocabulary.org の Breadcrumb タイプ を利用する必要がある模様。
  • 会社情報
    会社概要ページの情報を Corporation タイプでマークアップする

記事のマークアップ

記事のマークアップは以下のようになります。
以下のプロパティをマークアップしています。
記事のHTML中に直接マークアップすれば、articleSection 等のマークアップも可能ですが、現状はMagnolia CMSのテンプレートで自動的に生成可能なものにしています。

プロパティ(itemprop)
記事名name
記事公開日datePublished
著者author
プロパティ(itemprop)
著者名name
画像image
<div class="text" role="article" itemscope itemtype="http://schema.org/Article">
<h1><span itemprop="name">【重要】まだなら直ぐに対応を - 『ハートブリード』バグ対策を行う</span></h1>
    <div class="text-meta" role="contentinfo">
        <ul class="text-data">
            <li class="date"><span itemprop="datePublished">2014/04/08</span></li>
            <li>著者: <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Masao Suda</span></span></li>
        </ul>
(中略)
    <img itemprop="image" class="media photo large" src="/.imaging/stk/agilegroup01/content/dam/agilegroup/img/bk/stage/heartbleed2/jcr:content/heartbleed2.2014-04-11-07-55-55.png" alt="" />
(中略)
</div>

Magnolia CMSのテンプレートで出力されるように設定します。

  1. 管理コンソールから [STK]>[Templates]アイコンをクリックします。
  2. テンプレート画面が表示されるので、ノードツリーを展開し、/templating-kit/pages/global/mainAreaIntroに移動します。
  3. /templating-kit/pages/global/mainAreaIntro を編集します。
    以下内容 ( 抜粋 ) で編集し、[テンプレートを有効にする] をチェックし、保存します。
    (中略)
    
    [#if hasTitle]
        <h1>
            [#if hasKicker]<em>${kicker}</em>[/#if]
            <span itemprop="name">${title}</span>
        </h1>
    [/#if]
    
    [#if (showAuthorDate && (hasDate || hasAuthor || hasLocation)) || showTextFeatures || (showCategories && hasCategories)]
        <div class="text-meta" role="contentinfo">
            [#if showAuthorDate]
                [#if hasDate || hasAuthor || hasLocation]
                    <ul class="text-data">
                        [#if hasDate]
                            <li class="date"><span itemprop="datePublished">${date?date?string.medium}</span></li>
                        [/#if]
                        [#if hasAuthor]
                            <li>${i18n['dialogs.pages.article.stkArticleHeader.tabMain.author.label']}: <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">${author}</span></span></li>
                        [/#if]
                        [#if hasLocation]
                            <li class="location">${location}</li>
                        [/#if]
                    </ul>
                [/#if]
            [/#if]
    
    (中略)
    
    [#if showImage && hasImage]
        <img itemprop="image" class="${imageModel.imageClass}" src="${imageModel.image.link}" alt="${imageModel.image.caption!"Image "+content.title!content.@name}" />
    [/#if]
    
    (中略)
    

パンくずのマークアップ

パンくずのマークアップは以下のようになります。
パンくず表示で、現在表示中のページは a タグにならないため link タグにてプロパティを設定しています。

<div id="breadcrumb">
    <h5>現在位置:</h5>
    <ol>
          <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
              <li><a href="/" itemprop="url"><span itemprop="title">ホーム</span></a></li>
          </span>
          <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
              <li><a href="/technote.html" itemprop="url"><span itemprop="title">技術情報</span></a></li>
          </span>
          <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
              <li><link href="/technote/openssl-update.html" itemprop="url"/><strong><span itemprop="title">【重要】まだなら直ぐに対応を - 『ハートブリード』バグ対策を行う</span></strong></li>
          </span>
    </ol>
</div><!-- end breadcrumb -->

パンくずはCMS のテンプレートによって表示しています。
microdata のマークアップも行うようにテンプレートを変更します。

以下 Magnolia CMS の場合の設定手順を示します。

  1. 管理コンソールから [STK]>[Templates]アイコンをクリックします。
  2. テンプレート画面が表示されるので、ノードツリーを展開し、/templating-kit/pages/global/breadcrumb に移動します。
  3. /templating-kit/pages/global/breadcrumb を編集します。
    以下内容で編集し、[テンプレートを有効にする] をチェックし、保存します。
    <div id="breadcrumb">
        <h5>${i18n['nav.selected']}</h5>
        <ol>
          [#list model.breadcrumb as item]
              <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
              [#if item_has_next]
                  <li><a href="${item.href}" itemprop="url"><span itemprop="title">${item.navigationTitle}</span></a></li>
              [#else]
                  <li><link href="${item.href}" itemprop="url"/><strong><span itemprop="title">${item.navigationTitle}</span></strong></li>
              [/#if]
              </span>
          [/#list]
        </ol>
    </div><!-- end breadcrumb -->
    

Data-vocabulary.org の Breadcrumb タイプ を見ると、最上位の階層以外には "child" プロパティを使うべきですが、上記マークアップでGoogleのスニペット上は問題なく表示されたので、上記の設定にしています ( テンプレートに最上位のURLとそれ以外を分岐させる処理を書きたくなかったため )。

会社情報のマークアップ

会社情報については単一のページ ( 会社概要 ) に記載するだけなので、テンプレートの変更は行わず、ページHTML中に microdata を埋め込みました。
実際のマークアップは以下のようにしました。

プロパティ(itemprop)
会社ロゴlogo
会社名name
会社住所address
プロパティ(itemprop)
郵便番号postalCode
住所(Region)addressRegion
住所(Locality)addressLocality
住所(StreetAddress)streetAddress
電話番号telephone
会社設立日foundingDate
<div itemscope itemtype="http://schema.org/Corporation">
<img itemprop="logo" src="/dam/agilegroup/img/logos/branding-biglogo.png" style="height:100px">
<table border="1" cellpadding="1" cellspacing="1" style="width:100%">
<tbody>
<tr>
<th scope="row">商号</th>
<td><span itemprop="name">アジャイル株式会社</span></td>
</tr>
<tr>
<th scope="row">所在地</th>
<td>
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
〒<span itemprop="postalCode">113-0034</span>&nbsp;
<span itemprop="addressRegion">東京都</span><span itemprop="addressLocality">文京区</span><span itemprop="streetAddress">湯島2-2-1 東邦深澤ビル6F</span>
</span>
</td>
</tr>
<tr>
<th scope="row">電話</th>
<td><span itemprop="telephone">03-6801-5691</span></td>
</tr>
<tr>
<th scope="row">設立</th>
<td><time itemprop="foundingDate" datetime="2006-09-01">2006年9月</time></td>

(中略)

</div>

フォーマット確認

マークアップが完了したら、フォーマットに問題がないか確認しましょう。
Google Webmaster Tools の 構造化データテストツール を利用して確認する事が可能です。

※2015/1 新しい構造化データテストツールがリリースされています。

構造化データテストツールのページではチェックするページのURLを入力するか、ページのHTMLコードを直接入力する事で metadata のマークアップに問題がないかを確認できます。


上でマークアップした弊社の会社情報のチェック結果を示します。
テンプレート、及び、HTMLにて設定したマークアップが正しく認識できている事が確認できます。

※以下では会社情報でurlプロパティが無いためエラーとなっています。
( 以前のツールでは指摘されなかったエラー )

Structured Data Testing Tool

Bing - Webmaster Tools にも フォーマットチェックのためのツールがあります。
こちらでも併せてチェックを行っておくと、より確実かもしれません。
Bing マークアップ バリデータ

検索結果の確認

マークアップを行ったコンテンツが検索エンジンから(再)インデックスされれば、検索結果上にリッチスニペットが表示されるようになるはずです。

Google で構造化データが認識されているかどうかは Google Webmaster Tools の [ 検索のデザイン ]>[ 構造化データ ] メニューにて確認できます。

ウェブマスターツール 構造化データ

この画面からデータタイプのリンクをクリックする事で、タイプ毎に認識された構造化データのページ情報を確認する事もできます。

マークアップして再インデックスされたタイミングで、想定した形でマークアップが認識されているか確認しましょう。

注意点

リッチスニペットに関しては、「リッチスニペットスパム」という、リッチスニペットにページ上に存在しないデータを埋め込んだり、実際のレビュー内容以上のレビュー結果をスニペット上に表示するといった悪用がなされた事があり、Googleはこれらへの対応を行ってきています。

Googleでは リッチスニペットに関するガイドライン を提示しています。
このガイドラインに違反した場合、リッチスニペットが表示されないだけでなく、何らかのペナルティ(検索結果に表示されない等)が課される可能性もあるかもしれません。

きちんとガイドラインを守ってマークアップを行うようにしましょう。

まとめ

schema.org 仕様に基づくコンテンツのマークアップは、セマンティックWeb に通じるものです。

セマンティックWebは、Webのあるべき姿や利用者側からすると推進して欲しいものかとは思うのですが、コンテンツ提供者側からすると必ずしもいいことばかりではないように思います。
なぜなら、

  • 広告を見てもらえない可能性が増える(かも)
    セマンティックWeb化は、コンピュータによる自動的なデータの収集や解析をしやすくします。
    収益を広告モデルに依存しているサイトの場合、コンテンツ部分のみ抽出しやすくなる=広告を飛ばされる・非表示にされる可能性を高めるのはデメリットかもしれません。
  • データを再利用されてしまう可能性
    レシピを例に取ると、レシピそのもの ( どういった材料を利用して、どういった調理を行うか ) には著作権は無いとされています ( 料理に対する意見を書いた文章や料理を撮影した写真には存在する )。
    材料や調理法にまで詳細なマークアップを施した場合、レシピそのもののデータが再利用されやすくなる事は考えられます。

といった事が考えられるからです ( 他にもあるかもしれません )。

弊社の場合、マークアップによるメリット ( より多くのCTRを得られる。長期的には検索結果ページにおけるランク上昇も見込める ) を考え、導入する事にしました。

導入するにあたってはメリット・デメリットの双方を考慮して決めるべきだと思います。

導入する・しないの二択論ではなく、レシピをマークアップするにしても、材料や調理法まではマークアップしない等、導入する目的に沿った形で賢く利用するのがよいのではないでしょうか。