SEO対策、WEBサイト(ホームページ)の作り方、そして時々柴犬と愛媛県

スポンサーリンク

パンくずリストの構造化マークアップ、リッチスニペット


パンくずリストを完成形に

先日、パンくずリストのプラグインについての記事を書きましたが、今回はその続きです。
(というか、実際はこちらのほうが先に思いつきましたが、後先になりました)

 

しかーし

わたくしこの構造化の意味は理解しているものの、書き方・マークアップについては全く自信ありません!(ドヤ)

だから、この記事については、正直筆が進まないんですよねぇ(もちろんPCで入力してるけど)

 

 

まぁ気が重いが前回の記事はパンくずリストの設置についてのみの説明でしたが、今回は前回ちらっと触れた構造化マークアップやリッチスニペットについて説明していきたいと思います。

ただ、今回の記事はパンくずリストの構造化の具体的な方法について説明した記事ではなく、その前段階の

 

構造化とはなんぞや? リッチスニペットとはなんぞや?

 

というのと、プラグインを使って設置しようとしたものの致命的なミスをしていたことに関する記事です。
wordpressのPlugin-Breadcrumb NavXTというプラグインを使っていない上級者の方には全く身にならない記事ですので、具体的な記述方法に関して調べている方は(多分)別のページでまとめますのでそちらを参照ください。

 

構造化マークアップとは?

検索エンジン向けの記述

文字だけで説明すると分かりにくいけど、この構造化マークアップというのは、言うなれば、検索エンジン用のボットにいかにサイト内のキーワードなんかについて分かりやすくマークアップ(記述)するかというものなんですよね。

例えば、公開日はこれですよとか、これは映画のタイトルですよとか、これは評価点ですよとか、人間様にはそんなの見りゃ分かるじゃん!なりますが、検索エンジン様にはそんなことまで分かりません。

で、そんなことを検索エンジンにそんなことを伝えてどうなるかというと、検索結果ってサイト作成者が指定したタイトルとディスクリプションしか出なかったのが、動画や評価点など今まで情報として出せなかったものまで、表示できるようになるわけです。

つまりユーザーにとってはより探している情報に辿り着きやすくなるわけで、googleさんのユーザーからの評価もうなぎ上りでwin-winな結果。

リッチスニペット

そして、構造化のマークアップとともにキーワードとしてよく出てくるのがリッチスニペット。

そう、リッチスニペット(笑)

 

僕も初めて言葉と何なのかを知ったのは一年半前なんでかなり怪しいもんですが、知識を総動員したりググった結果から説明すると、そもそもスニペットというのは下の画像のように検索結果の下に表示されるテキスト(群)もろもろのことのようなんですが、これを発展させたのがリッチな(役に立つ?)スニペットでリッチスニペット

赤線を2か所引いてますが、上はパンくずリスト、下はアルバムの評価点や評価人数などが構造化マークアップによりリッチスニペットになっているのが分かりますね。これも特殊な記述(マークアップ)をすることにより可能となっているわけです。

検索結果を見ても分かるように特に記述の簡単なパンくずリストでも対応済みのサイトはまだ半数以下というのが実情で、まだ取り入れているのは一部の意識高い系の人ぐらいじゃないでしょうか。

ま、普通のコーディングに加えて余計な記述しなければいけないので、手間ではあるんですがね。

 

リッチスニペット

 

簡単に行かなかったパンくずリストのマークアップ

いざマークアップじゃ!

となって、前回の記事で最初は下のようなソースで行けますよと紹介しました

<div class="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <?php if(function_exists('bcn_display') && !is_front_page())
    {
        bcn_display();
    }?>
</div>

 

が、しかし・・・

 

 itemscope itemtype="http://data-vocabulary.org/Breadcrumb

こ、これがいけなかった(ズーン)

いつまでたっても、検索結果でリッチなスニペット(笑)にならないんですが・・・

そして男は立ち上がった

プロジェ〇ト エーーーーーークス

 

調べましたよ私。

  1. まずgoogoleウェブマスターツールの構造化チェックページで調べると、ちゃんと認識はしている。(はて?)
  2. 構造化の方法など改めてググってみる。うーんなんとなく合ってる気はする。
  3. パンくずリストがリッチスニペットになっているサイトを構造化チェックページで同じように調べてみる。→なんだか表示方法が違う。
  4. ああ、マークアップの形式が違うからか!(構造化の方法が実は3種類ぐらいあってそれぞれ記述の仕方が違う)
  5. 同じマークアップ方式のソースと自分のソース並べてみよう→プロパティが若干違うんですが・・・

 

ここで気が付いた私。

 

 itemscope itemtype="http://data-vocabulary.org/Breadcrumb

これじゃダメっすね

構造化の記述方法約3種類あると書きました。この3種類については詳しくはまとめページで説明はしていきますが、今回パンくずリストの設置にあたり使ったwordpressのプラグインのPlugin-Breadcrumb NavXTでデフォルトですでに設定されている構造化の形式microdataのschemaなんですよね。

つまり似たような言葉ではあるものの、何となく通じるが、ポルトガル語とスペイン語のように一部理解してもらえない。
ででで、下のように直してみた(すでに修正済みなんで元は正確には忘れたんですが・・・)

 

 itemscope itemtype="http://schema.org/Breadcrumb

これで構造化確認ページで試してみたところ、表示される結果が以前と変わらない・・・
正しく表示されているサイトを確認したら、記述方法間違っていました(テヘペロ)
知ったかぶりぶっこいてたみたいです。

下のように修正すると正しく認識してもらいました

 

div class="breadcrumbs" vocab="http://schema.org/" typeof="BreadcrumbList"

divのところは必要ないと思われますが、少し記述方法が特殊みたい(色々調べると書き方は一種類ではない模様)ですが、とりあえずこの記述が、正常に作動しているサイトと同じ認識のされ方をしたので正解かと思われます。
%e6%a7%8b%e9%80%a0%e5%8c%96%e3%83%86%e3%82%b9%e3%83%88%e3%83%84%e3%83%bc%e3%83%ab

完成版については後日、追記もしくはまとめページでまとめるかもしれませんが、今回はプラグインのPlugin-Breadcrumb NavXT側の記述はいじらなかったので、挿入するソースの部分を

div class="breadcrumbs" vocab="http://schema.org/" typeof="BreadcrumbList"

と設置場所に記述すればとりあえず設置は完了です。

具体的な記述内容

えーとあることに気付いたんですが、もしかしたらPlugin-Breadcrumb NavXTを使ってない人もいるかもしれないので、肝心のパンくずリスト側のソースだけ今はのっけておきます。

<div class="breadcrumbs" vocab="http://schema.org/" typeof="BreadcrumbList">
<span property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" title="タイトル" href="リンクのアドレス" class="home">
<span property="name">階層(カテゴリ)名</span></a><meta property="position" content="1"></span>
<span property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" title="タイトル" href="リンクのアドレス" class="post post-page">
<span property="name">階層名</span></a><meta property="position" content="2"></span>
<span property="itemListElement" typeof="ListItem">
<span property="name">階層(カテゴリもしくはページ)名など</span><meta property="position" content="3"></span>
</div> 

 

構造化マークアップに関するページ(外部サイト)

構造化のマークアップ方法に関して詳しく説明しているサイト見つけました!

この方の文章大変分かりやすいです。そうですこういうことなんです。簡単そうにまとめてるけど、中々ここまでまとめている記事はないので、ぜひ参考にしてみるといいでしょう。ただ、改めて読み返してみると、パンくずリストはschemaでは行ってませんね・・・(汗)
SEOにも効く? – schema.org 仕様でWebページをマークアップする。


スポンサーサイト

タグ: , ,

2 Responses to “パンくずリストの構造化マークアップ、リッチスニペット”

  1. Suda より:

    外部サイトの記事を書いたものです。リンクありがとうございます。
    記事中Data-vocabulary.orgのBreadcrumb タイプを利用しているのは、記事執筆当時はGoogleがschema.orgのBreadcrumbListに対応していなかったからです。
    今は対応しているのでschema.orgの方を使うのがより良い選択になります。

    • koutakishino より:

      Sudaさまご返信が遅くなりすみません。
      どうも詳しいご説明ありがとうございます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)