構造化データのマークアップによって、「間接的」にはSEOの評価を上げることができるんじゃないか、ということでしたね。
【Google推奨？】構造化データとは～マークアップはSEOに効果あり？
でも、何でもかんでもマークアップするのは、マイナスになることも多いということでした。
で、せめて構造化マークアップによって「リッチスニペット」だけでも活用できればという話でしたね。
このページの内容
スニペットとは何か
まず、リッチスニペットの「スニペット」とは何かというと、
「Googleの検索結果で表示されるサイトの一部」
と思っておけば良さそうです。スニペットを日本語で言うと「断片」ですね。サイトの断片が、検索結果に表示されているわけですからね。
このように。
だからリッチスニペットというのは普通のスニペットの「リッチ版」ということになります。豪華なんです。
ということでリッチスニペットの種類を見ていきましょう。
リッチスニペットの種類
パンくずリスト
まず、我々アフィリエイターにとって最も活用しやすいと思われる「パンくずリスト」ですね。こういうやつ。
普通のURL表示じゃなくて「kakaku.com＞パソコン＞タブレットPC」と表示されていますね。サイト名から順に階層を下げて表示しています。
これ、元々サイト内の表示なんですけど、構造化マークアップによってリッチスニペットとして、検索結果にも表示させることができるんです。
レビュー
あと、同じサイトですが、「レビュー」もリッチスニペットの一つ。
このように、評価点とか星の数なんて表示されていますね。
レシピ
あと、「レシピ」もリッチスニペットで表示できますが・・・
まあこれは単に、画像が表示されて目立つくらいのものでしょうか。
動画や音楽
それから「動画」と「音楽」。
はい。ユーチューブが検索結果に出てきたときに表示されることが多いですね。
検索窓
それから、すごいなと思ったのが「検索窓」。
これも価格コムのものですけど、この検索窓に入力することで、価格コムのサイト内部に飛んで検索結果が表示されます。
イベント情報
それから「イベント」。
こちらは、イベントの日程などがリッチスニペットとして表示されています。
会社と組織
最後に「会社と組織」。
これはリッチスニペットとしての会社表示なんですけど、こういう表示って会社じゃなくても普通のサイトでもありますよね。
リッチスニペットの書き方
それでは次に、リッチスニペットを表示させるためのマークアップの書き方ですけど、「パンくずリスト」と「レビュー」を取り上げてみたいと思います。
ただ。
これを自分で全部やるというのはアフィリエイターにはお勧めしません。そこは、エネルギーを使う場所ではないと思います。
賢威などの良いテンプレートに任せてしまうのが賢明です。＾＾
ということで、ここからのマークアップの書き方は参考までにとどめておくことをお勧めします。
パンくずリストのマークアップ
まず、パンくずリストの構造化マークアップから。
具体例
仮に「http://aaaa.com/」というサイトで、検索結果に「TOP＞書籍＞マンガ」と表示させたいとしましょう。その場合、以下のようになります。
<ol itemscope itemtype=”http://schema.org/BreadcrumbList”>
<li itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”>
<a itemprop=”item” href=”http://aaaa.com/”>
<span itemprop=”name”>TOP</span></a>
<meta itemprop=”position” content=”1″ />
</li><li itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”>
<a itemprop=”item” href=”http://aaaa.com/shoseki/”>
<span itemprop=”name”>書籍</span></a>
<meta itemprop=”position” content=”2″ />
</li><li itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”>
<a itemprop=”item” href=”http://aaaa.com/shoseki/manga/”>
<span itemprop=”name”>マンガ</span></a>
<meta itemprop=”position” content=”3″ />
</li></ol>
この例ではシンタックスはmicrodataを採用しています。理由は・・・わかりやすいから。それだけです。
軽く説明を入れておきましょう。
説明
大枠としては「ol～/ol」で挟まれている部分がパンくずリストになります。
「ol」のあとに続いている言葉「itemscope」が、「構造化マークアップですよ」ということを検索エンジンに知らせています。
で、何のマークアップかというのを「itemtype=”http://schema.org/BreadcrumbList”」で知らせています。
「BreadcrumbList」つまり日本語で言うと「パンくずリスト」ですね。＾＾
これでもう、この部分が「パンくずリストですよ」ということを検索エンジンに知らせることができたわけです。
あとは、パンくずリストの中に表示すべき、各階層のリンクをリスト化して、「これはURL」「これはアンカーテキスト」ということを指定しているだけです。
ちなみにURLは「itemprop=”item”」、アンカーテキストは「itemprop=”name”」と指定しています。
それら以外の「itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”」という部分は単に、「リンクをリストとして表示してますよ」と知らせているだけのようです。
あと、数字が書いてありますよね。「meta itemprop=”position” content=”1″」と。これで、サイト内での階層を表しています。
だから一番下の階層の「マンガ」のページが「３」となっています。４階層のパンくずリストをパークアップしたい場合は「４」を付け足せばいいですね。
それで、上記の例を自分のサイトに合わせて適当に書き換えてHTMLソースに貼り付ければ「パンくずリストマークアップ」のできあがりなのですが・・・このままだとリンクが縦に並んでしまいます。
- TOP
- 書籍
- マンガ
という具合に。
これを「TOP＞書籍＞マンガ」と１行にしたい場合はスタイルシートで指定するか、それも面倒という場合はそもそもリストタグ<li>を使わずに<div>でよさそうですね。
では次。
レビューのマークアップ
「レビュー」の構造化データマークアップですね。
具体例
とりあえず具体例ですが・・・
<div itemscope itemtype=”http://schema.org/Review”>
<span itemprop=”author”>速水鏡</span>の採点。
<span itemprop=”itemreviewed” itemscope itemtype=”http://schema.org/Book”>
<span itemprop=”author”>バナナデスク</span>さんの
<span itemprop=”name”>下克上∞</span>は
</span><span itemprop=”reviewRating” itemscope itemtype=”http://schema.org/Rating”>
<meta itemprop=”worstRating” content=”0″>
<span itemprop=”bestRating”>5</span>点満点中
<span itemprop=”ratingValue”>5</span>点です。
</span></div>
説明
最初に「itemscope」と入っているのはパンくずリストの場合と同じですね。
今度は「ol」ではなく「div」というタグで挟んであるところを「レビューマークアップ」していますね。
「itemscope」のすぐ後に「itemtype=”http://schema.org/Review”」とマークアップすることで「ここはレビューですよ」と検索エンジンに知らせています。
で、あとは評価者の名前とか、レビュー対象についてとか、最低点、最高点、評価点などをマークアップしているわけですね。
ただ「itemprop=”author”」が2つあるのが混乱のもとかもしれません。
一つ目の「itemprop=”author”」はこのレビューの書き手（速水鏡）、2つ目の「itemprop=”author”」はレビュー対象である書籍の書き手（バナナデスクさん）を「これが書き手ですよ」と検索エンジンに知らせています。
「meta itemprop=”worstRating” content=”0″」というのは「最低点は0点ですよ」と検索エンジンに知らせているのですけど、メタタグなのでサイトには表示されません。
この具体例を、適当に改変してやれば、レビューマークアップとしてどんな対象にも使うことができます。
たとえば「Book」の部分を「Movie」に変えてやれば映画のレビューになりますよね。「MusicRecording」に変えれば曲のレビューとなります。
それはこのページにいろいろ出ています。
テンプレートに頼るべきところ
ということで。
パンくずリストとレビューの構造化データマークアップを見てきましたけど、これ、手書きでやると時間がかかってしかたありません。
そこに時間をかけるのは私たちの仕事ではありませんので、構造化データマークアップを取り入れたいなら、そういう機能を持ったサイトテンプレートなりWordPressテーマなりを用いるべきでしょう。
