みなさんは、構造化データというものを聞いたことがありますか？ 簡単に言えば、検索エンジンにサイトの情報を分かりやすく伝える方法です。
Googleで検索してみると、こんな感じで表示されるものが、それに当たります。
拡張された検索結果を、リッチ スニペットと言います。 どうしたら、このように表示させることができるのでしょうか？
データ ハイライターとマークアップ
リッチ スニペットを表示させるためには、以下の方法があります。
- マークアップを追加して、構造化データを認識させる
- データ ハイライターを使用する
マークアップを追加して、構造化データを認識させる
サイトのHTMLを編集できれば、構造化データのマークアップを追加することで、リッチ スニペットを利用することができます。
マークアップの形式は、3つあります。
Googleが、microdataを推奨しているので、新しくマークアップするのであれば、microdataで行えば良いでしょう。
- microdata
- microformats
- RDFa
また、支援ツールを使用すれば、簡単にマークアップを生成できます。
また、BingやYahoo!でも、リッチ スニペットを利用することができますが、認識に差があります。
データ ハイライターを使用する
Google ウェブマスター ツールのデータ ハイライターを使えば、簡単に設定することができますが、Googleでしか利用できません。
schema.orgとは？
構造化データを調べていると出てくるschema.orgとは、いったい何でしょうか？
schema.orgでは、構造化データを共通のマークアップするための仕様を、策定しています。
Google、Microsoft、Yahoo!が共同で進めているものなので、この仕様に準じたマークアップがスタンダードとなりそうです。
検索エンジンごとに、違う仕様にならないようにする取り組み、ということですね。
schema.orgでmicrodataのマークアップをする
microdataでは、3つの要素を使って、マークアップします。 その属性をschema.orgで決められたものにします。
| itemscope | microdataを使っているという宣言になります。 |
|---|---|
| itemtype | どのアイテムなのかを設定します |
| itemprop | アイテムの詳細を設定します。 |
試しにPersonという要素でやってみます。
<div itemscope itemtype="http://schema.org/Person"> <p><a itemprop="url" href="http://localhost.tukumemo.com:8080/about/"><span itemprop="name">もりさん</span></a></p> <p><img itemprop="image" src="..." alt="morisan"></p> <p>職業：<span itemprop="jobTitle">フロントエンドエンジニア</span></p> <div itemprop="description"> <p>フロントエンドエンジニアのような仕事をしています。</p> </div> </div>
http://schema.org/Personを見ながらやってみましたが、itempropが多くて分かりにくいです。
また、属性によっては、入れ子で使うものがあったりします。
決まったカテゴリしかありませんが、当てはまるのならツールを使うほうが楽かもしれません。
パンくずリストのマークアップ
パンくずに関しては、仕様が少し違うようで、Googleでは、schema.orgのパンくずに未対応だそうです。
サポートが近いという話がありますが、今のところは、data-vocabulary.orgにしておきましょう。
リッチ スニペット – パンくずリスト – ウェブマスター ツール ヘルプ
現段階では、ウェブマスター ツールのヘルプのパンくずリストもdata-vocabulary.orgを使用しています。
<ul>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="..." itemprop="url"><span itemprop="title">ウェブマスター ツール</span></a></li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="..." itemprop="url"><span title="ヘルプ" itemprop="title">ヘルプ</span></a></li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="..." itemprop="url"><span title="構造化データを使用して検索結果にリッチ スニペットを表示する" itemprop="title">構造化データを使用して検索結果にリッチ スニペットを表示する</span></a></li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url"><span title="構造化データのタイプ" itemprop="title">構造化データのタイプ</span></a></li>
</ul>
ソースは、見やすいように、編集しています。
感想など
マークアップを頑張ってきましたが、実際に反映されるリッチ スニペットは、少ないです。 パンくず、レシピ、レビュー系、イベント以外は、見かけないです。
というわけで、今のところ、苦労のわりに見返りが少ない気がします。
SEOブログのソースを見ると、それぞれマークアップされていますが、アプローチが少し違います。
そんな感じなので、リッチ スニペットのマークアップをしたくてもitemtypeやitempropなどどうしたら良いのか、悩みます。
パンくずは表示されるので、マークアップを行った方が良さそうです。 WordPressでは、Breadcrumb NavXTというプラグインでもできるみたいです。 （ツクメモにはパンくずがありませんが…）
あとは、ECサイトのようなProductがあるサイトでは、頑張っても良いかもしれません。 （報われるかどうかは、分かりませんが…）
おまけのマークアップ
ブログのマークアップに、参考になりそうなサイトのソースを3つほど見てみました。こんな感じです。
<div itemscope itemtype="http://schema.org/BlogPosting">
<article>
<header>
<h1 itemprop="name">記事名</h1>
<p itemprop="description">説明文</p>
<meta itemprop="url" content="..." />
</header>
<dl>
<dt>公開日</dt>
<dd><time itemprop="datePublished" datetime="000-00-00T00:00:00+09:00">0000年0000 00時00分</time></dd>
</dl>
<div itemprop="articleBody">
...
</div>
</article>
</div>
<div itemscope itemtype="http://schema.org/Article">
<meta itemprop="author editor" content="もりさん">
<h2 itemprop="headline name"><a href="..." itemprop="url">記事名</a></h2>
<meta itemprop="description" content="説明文">
<div itemprop="articleBody">
<p itemprop="datePublished" content="0000-00-00">0000年00月00日</p>
<img itemprop="image" src="..." alt="">
...
</div>
</div>
<html itemscope itemtype="http://schema.org/WebPage"> <meta itemprop="name" content="サイト名" /> <meta itemprop="description" content="説明文" /> <meta itemprop="image" content="..." />
しっかりテストはしてくださいね。
構造化データ テストツール – ウェブマスター ツール ヘルプ
そんな感じで、またね！
コメント