LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog

Blog


Schema.orgをパーツ化しリッチスニペットを実装する

皆様、お久しぶりです。
NHN Japan ウェブサービス本部の「キョウ」と申します。

前回の「初心者向けschema.org講座」に引き続き、
今回は「Schema.orgをパーツ化しリッチスニペットを実装する」方法についてお話しようと思います。

「Schema.orgで実装すると時間がかかる!」
「Schema.orgの為に工数はかけられない」
そんな方にお勧めです。

目次

※ Naverの業務内容とは直接は関係ございませんのでご了承ください。

※ Schema.orgを簡単に素早く実装したい人向けの記事と言う事をご了承ください。

1. 最近のSchema.orgについて(2012年6月)

前回の記事「初心者向けschema.org講座」の最後に、
「SMX Advanced 2011」ではあまり推奨されていないと言うお話をいたしました。

パネリストは、Schema.orgのタグがコードの膨張につながる点に関してコメントし、最終的に新しいSchema.orgの新しいタグを使ってサイト全体のコーディングをやり直す取り組みを推奨するパネリストは一人も現れなかった。そして、Schema.orgのタグをSEO戦略として利用する点に対して、経験に基づいた証拠もまた提示されなかった

http://www.seojapan.com/blog/html5-and-seo

ですが・・・・

今年の6月行われた「SMX Advanced 2012」では、リッチスニペットの効果が高い為schema.orgを使ったマークアップが重要になると言う話が出ました。

また「SMX East 2012」でCNNの「Topher Kohan」氏が発表したトラフィックデータを見ても
リッチスニペットの効果が高い事がうかがえます。

  • Videoリッチスニペット対応によって、トラフィックが35%が増加
  • recipeのリッチスニペット対応によって、トラフィックが22%増加

■Schema.orgのサポート状況

Googleは積極的にリッチスニペットの対応に取り組んでおり、
現在Schema.orgで定義できるリッチスニペットは13種類に及びます。
日本では一部Schema.org未対応の形式がございます。

bingに関しては米国でリッチスニペットの表示が確認されています。
schema.orgを使いリッチスニペットの設定ができるようですが、
データの過不足を細かく見ているようなのでGoogleより難易度が高いようです。

米Yahooもリッチスニペットの表示が確認されています。
私が確認した結果、「動画」と「レシピ」はschema.orgで定義できるようです。

■結論

現段階で日本でリッチスニペット対応しているのはGoogleです。
正直な所「microdata(data-vocabulary.org)」を使いリッチスニペットの実装した方が確実ですが、この盛り上がりを見てしまうと、そろそろ「schema.org」の準備を始めた方が良いかも知れませんね。

という事で今回は、
schema.orgを使ったリッチスニペットの実装方法を考えていきたいと思います。

2. Schema.orgのマークアップ方法について考えてみる

ここで一番悩むのはマークアップの方法ですね。
前回もお話しましたが、Schema.orgの実装にはデメリットがあります。

  • HTMLコードの肥大化
  • HTMLコードの視認性が悪くなる
  • Schema.orgでマークアップをし直すと時間がかかる
  • ページ内に対象のデータがないとマークアップできない

現在は時間をかけてゆっくり対応しても問題ないかも知れませんが、
今後、Schema.org実装目的のリニューアル案件が多発した場合に、
対応しきれなくなる可能性が出てくると思います。

では、「Schema.org」をどうやって作業工数を最小限に留め、運用しやすいように実装するのか?

ここで気をつけるべきポイントは3点

  • コードの視認性を確保する
  • データの追加更新が容易にできるようにする
  • 既存のコードに影響を与えない

3. [対応案1]と のみでSchema.orgを定義する

<body>
    <h1>キョウのビデオ</h1>
    <div>
    ~~~~~コンテンツが入ります~~~~~~
    </div>

    <!-- schema.org -->
    <div itemscope itemtype="http://schema.org/VideoObject">
        <meta itemprop="name" content="キョウのビデオ">
        <meta itemprop="description" content="今話題のキョウ主演のミュージックビデオ">
        <link itemprop="url" href="http://www.dummy.com/watch?v=150000">
        <link itemprop="thumbnailUrl" href="http://www.dummy.com/img.jpg?v=150000">
        <meta itemprop="duration" content="PT7M24S">

        <span itemprop="author" itemscope itemtype="http://schema.org/Person">
            <link itemprop="url" href="http://www.dummy.com/user/kyou">
        </span>

        <span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
            <link itemprop="url" href="http://www.dummy.com/img.jpg?v=150000">
            <meta itemprop="width" content="320">
            <meta itemprop="height" content="180">
        </span>

        <link itemprop="embedURL" href="http://www.dummy.com/v/150020?version=3&amp;amp;autohide=1">
        <meta itemprop="playerType" content="Flash">
        <meta itemprop="width" content="480">
        <meta itemprop="height" content="360">
    </div>
    <!-- /schema.org -->
</body>

画面上に表示されないと を使いマークアップを行う事で、
デザインや構成に影響を出さずに定義する事ができます。

上記のマークアップ方法は現在「Youtube」で使われています。
また、Googleの動画マークアップのサンプルコードもこの形式で書かれています。

■メリット

  • 既存のコードを汚さない
  • 1か所に内容が固まるので視認性が良い
  • タグを追記するだけでデータを追加可能
  • マークアップが複雑では無いのでシステム側も対応しやすい

■懸念点

  • リッチスニペットスパム判定に引っかかる可能性が多少ある

1点懸念点があるとすれば、リッチスニペットスパムです。
この方法を使えば、情報の偽装が容易に可能となります。

例えば、レビュー機能が実装されていないページにレビュー情報を埋め込み
適当な数字を記載する事で、リッチスニペットに偽りの評価情報を表示する事ができます。

皆様もおわかりだと思いますが、上記のスパム行為は大変危険です。

「SMX Advanced 2012」でマットカッツ氏から、「リッチスニペットスパムを発見した場合、2度とリッチスニペットが使えないようにドメインレベルで処置を行う」と言う発言がありました。
また、リッチスニペットの取り締まり強化を行ったとオフィシャルな告知もされています。

必ずリッチスニペットスパムを発見したら、「リッチスニペットスパム報告」をしましょう。

昔話ですが、2002年ごろに「ALTへの隠しテキスト」スパムが多発し、
alt内の文字の評価が下げられてしまう事件がありました。

もし、今後スパム行為が蔓延する事があれば・・・
とによるSchema.orgの定義ができなくなる可能性も十分あり得ると思います。

4. [対応案2] Schema.orgマークアップ専用のTable要素を用意

[対応案1]は定義した情報が非表示の要素と言う事が問題になりました。

上記問題を解決する為に、[対応案2]は定義した情報を可視化してみます。

通販サイトのスペック情報のような要素になりました。amazon.co.jpの内容を引用しています。)

<body>
    <h1>Webデザイナーのための jQuery入門 魅力的なユーザーインターフェースを手軽に作る (Books for Web Creative) [大型本]</h1>
    <div>
    ~~~~~コンテンツが入ります~~~~~~
    </div>

    <!-- MdSchemaOrgTable01 -->
    <div itemscope itemtype="http://schema.org/Book">
        <meta itemprop="image" content="dummy01.jpg">
        <link itemprop="bookFormat" href="http://schema.org/Paperback">
        <table>
            <tr><th>商品名</th><td itemprop="name">Webデザイナーのための jQuery入門 魅力的なユーザーインターフェースを手軽に作る (Books for Web Creative) [大型本]</tr>
            <tr><th>説明</th><td itemprop="description">jQueryはいま最もウェブデザイナー、ウェブサイト制作者に注目されている技術と言っても過言ではありません。ウェブサイトにアコーディオン・タブ・ツールチップなどを組み込もうと思ったら、まずjQueryを使うのがセオリーとなりました。最近のウェブサイト調査によれば、jQueryの採用割合はFlashのそれを上回ったと言います。HTMLやCSSに比べて、敷居の高さを感じる方も多いかもしれませんが、本書ではjQueryの巧みな使い手である著者が、徹底的にやさしく、わかりやすく解説します。</tr>
            <tr><th>価格</th><td itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                <span itemprop="price">3,024円</span>
                <meta itemprop="priceCurrency" content="JPY">
                <link itemprop="availability" href="http://schema.org/InStock">
            </tr>
            <tr><th>評価</th><td itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
                <span itemprop="ratingValue">5</span>/<span itemprop="bestRating">5</span>
                (<span itemprop="ratingCount">200</span>漂) 
                レビュー数:<span itemprop="reviewCount">4</span>件
            </tr>
            <tr><th>著作者</th><td itemprop="author" itemscope itemtype="http://schema.org/Person"><a href="http://gyauza.egoism.jp/clip/" itemprop="url"><span itemprop="name">高津戸 壮</span></a></td></tr>
            <tr><th>ページ数</th><td itemprop="numberOfPages">288ページ</td></tr>
            <tr><th>発売日</th><td itemprop="datePublished" content="2011-12-07">2011/12/7</td></tr>
            <tr><th>言語</th><td itemprop="inLanguage">日本語</td></tr>
            <tr><th>販売コード</th><td itemprop="isbn">ISBN-10:4774148563</td></tr>
        </table>
    </div>
    <!-- /MdSchemaOrgTable01 -->
</body>

[対応案1]と比べてタグの量は増えましたが、管理のしやすさはほぼ一緒だと言えます。

■メリット

  • 既存のコードを汚さない
  • 1か所に内容が固まるので視認性が良い
  • タグを追記するだけでデータを追加可能
  • マークアップが複雑では無いのでシステム側も対応しやすい
  • 画面上でリッチスニペットの内容を確認できる
  • パーツ化しているのでコピペと文章変更で流用が可能

■懸念点

  • 配置方法に工夫必要

実際に表示される情報の為、ページのどの部分に配置し表示するかを考える必要性があります。
スペック情報等の詳細な情報として配置する事ができますが、
プロジェクトによってはデザイナーの要望で配置が困難になる可能性もあります。
その場合、トグルやタブを使い初期状態では表示させないパーツとして配置する等、配置方法で工夫必要なのが懸念点とも言えます。

■今回は・・・

今回は[対応案2]を使い実装方法を説明させていただきます。
以降はこれを「Schema.org パーツ」と呼ばせてもらいます。

Schema.orgのサンプルに記載されている内容と、くらべてどうでしょうか?
パーツを1つ追加するだけでリッチスニペットが実装できるので、扱いやすいと思います。

5. 最速実装する為のワークフロー

では、「Schema.org パーツ」でリッチスニペットを実装する為のワークフローについて説明します。ECサイトに実装する前提で読んでもらえれば、イメージしやすいと思います。

[1] 定義する内容を決めて資料化する

[対応業種] ディレクター

Schema.orgで定義する情報を決めていきます。

この工程が最も重要です。
なぜか?データ入力作業とシステムの対応に影響が出る為です。
現状のサイトで表示できるデータとSchema.orgの仕様を確認した上で資料にまとめましょう。

Schema.orgの仕様だけ見てデータを増やしてしまうと、運用者(データ登録者)に負荷がかかってしまい、悲しい事態になる可能性も高いので、慎重にデータは決めていきましょう。

■最速ポイント

リッチスニペットに表示される要素と必須要素だけ定義しましょう。

リッチスニペットに影響のでないデータを定義しても、現状メリットはありません。
この部分を意識する事で、作業工数を相当削減できると思います。

ただし、現在不要なデータでも今後価値が生まれる可能性もあります。
いつでもデータを追加できるように心構えだけはしておきましょう。

※schema.orgに必須データの記述は特にありませんが、googleのリッチスニペットページの必須項目を参考にしてください。

※Productボキャブラリは「Googleショッピング」の掲載情報にも影響が出ますので、Googleショッピングで扱っているデータも確認の上データを決めた方が良いと言えます。

[2]「Schema.org パーツ」の配置方法を決める

[対応業種] ディレクター、デザイナー

「Schema.org パーツ」をどこに配置するのか?

本文との関係性が高い情報なのは間違いありませんが、
ユーザーが求めている情報ではない可能性もあります。

読ませる情報か?読ませない情報か?でデザイン方法も配置方法も変わると思います。
この部分に関しては、プロジェクトの傾向を見て判断した方が良いでしょう。

[3] Schema.org マークアップ

[対応業種] マークアップエンジニア

Schema.orgの仕様にそってマークアップを行ます。
>Schema.orgのマークアップの方法はこちら

[4] システム実装

[対応業種] システムエンジニア

最後にシステム実装して完了です。
その後、リッチスニペットの申請を行い、ページがインデクスするのを待ちます。

※現在Googleに関しては、申請を行わなくてもリッチスニペットが表示されるようになっています。ただし、確実に早く適応してほしい場合は申請しておいた方が良いでしょう。

6. 今日のまとめ

Schema.orgでマークアップした要素をパーツとして利用する。
それによって「Schema.orgの流用が容易になる」「Schema.orgの管理性が向上する
工数の短縮可能

7. 最後に

Schema.orgの実装は生粋のマークアップエンジニアならば問題ありませんが
一般的な方からすれば取得難易度が高くとっつき難いようです。

しかし、欲を張らずに最低限の内容でマークアップすれば
簡単に実装できるのでお試しください。

今後、機会がございましたら、今回お話した「Schema.orgのパーツ化」の概念を使い、
コピペで実装できるサンプルを用意していこうと思います。

リッチスニペット実装方法も「microdata(data-vocabulary.org)」に関しては
日本語記事はたくさんあるのですが、「Schema.org」に関しては全然ありませんしね。

今後ともよろしくお願いいたします。

長い記事でしたが、読んで頂きありがとうございます。