WordPressプラグインなしで「ぱんくずリスト」を作成し、microdataでGoogleの検索結果に確実に表示させる方法

コメントを残す

WordPressを利用しているサイトがGoogleの検索結果に表示される場合は通常タイトル、リンク、内容という場合がほとんどだと思います。つまりこんなかんじです。

Googleの検索結果

しかし、昨今言われているのが、Google検索で採用している「インライン マークアップ」のmicrodataを利用してよりリッチな検索結果にしようというお話です。簡単に言うと、Googleの検索結果での表示に著者情報や、評価点数情報、口コミ数情報なども合わせて表示できるようになるというものです。サイトによってはSEO的な効果が出る事は間違いなしです。

ん？何それ？と思われるかもしれませんが、「インライン マークアップ」という方法です。詳細はこちらの記事をご覧ください。

今回はその「インライン マークアップ」として「ぱんくずリスト」情報を付け足すことで、しっかりとGoogleの検索結果のページでも、「ぱんくずリスト」として表示されるようにする方法についてです。

では手順を見ましょう。

【パンくずの作成】

これは参考リンクにもある「りくまろぐ」さんを完全に参考にさせて頂きました。

single.phpなど、表示させたいページの表示させたい箇所に以下を挿入します。

<?php /*--- パンくずリスト --- */ ?>
<div id="breadcrumb">
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<?php echo home_url(); ?>" itemprop="url">
<span itemprop="title">ホーム</span>
</a> &rsaquo;
</div>
<?php /*--- カテゴリーが階層化している場合に対応させる --- */ ?>
<?php $postcat = get_the_category(); ?>
<?php $catid = $postcat[0]->cat_ID; ?>
<?php $allcats = array($catid); ?>
<?php 
while(!$catid==0) {    /* すべてのカテゴリーIDを取得し配列にセットするループ */
    $mycat = get_category($catid);     /* カテゴリーIDをセット */
    $catid = $mycat->parent;     /* 上で取得したカテゴリーIDの親カテゴリーをセット */
    array_push($allcats, $catid);
}
array_pop($allcats);
$allcats = array_reverse($allcats);
?>
<?php /*--- 親カテゴリーがある場合は表示させる --- */ ?>
<?php foreach($allcats as $catid): ?>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<?php echo get_category_link($catid); ?>" itemprop="url">
<span itemprop="title"><?php echo get_cat_name($catid); ?></span>
</a> &rsaquo;
</div>
<?php endforeach; ?>
<div><?php the_title(); ?></div>
</div>    <!--- end [breadcrumb] -->

このままでは縦に並んでしまうので、CSSで整えます。以下をCSSに追加しましょう。

div#breadcrumb {
    margin-bottom: 5px;
}
div#breadcrumb div {
    display: inline;
}

以上です。

【技術の話】

ちなみに、Google検索結果に反映させていくには、前半のPHPが大切です。microdataというマークアップラベルを利用しています。ぱんくずに関するマークアップは、以下の記述が必要です。

title パンくずのタイトルです。
url パンくずの URL です。
child 階層内での次のパンくずです。child には別のパンくずアイテムを指定する必要があります。

そして、これを実現する書き方として、itemscope itemtype　itemprop等を利用します。

Googleではこちらで言及しています。
https://support.google.com/webmasters/answer/185417?hl=ja

以下、引用です。

次の HTML コードは、婦人服サイトの商品ページでのパンくずリストについて記述しています。

  <a href="http://www.example.com/dresses">洋服</a> › 
  <a href="http://www.example.com/dresses/real">ドレス</a> › 
  <a href="http://www.example.com/dresses/real/green">緑のドレス</a>

このパンくずのセットは、ページ上では次のように表示されます:

洋服 › ドレス › 緑のドレス
次のセクションでは、microdata または RDFa を使用してこのコンテンツをマークアップする方法について説明します。

microdata でマークアップした HTML コードは、次のようになります:

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses" itemprop="url">
    <span itemprop="title">ドレス</span>
  </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses/real" itemprop="url">
    <span itemprop="title">ドレス</span>  </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
    <span itemprop="title">緑のドレス</span>  </a>
</div>

このサンプルについて解説します:

と の各コードの 1 行目は、

で囲まれた HTML がパンくずであることを示しています。itemscope は、

のコンテンツがアイテムであることを示し、itemtype=”http://data-vocabulary.org/Breadcrumb” は、アイテムがパンくずであることを示しています。
この例では、タイトルや URL などのアイテムのプロパティを記述しています。プロパティをラベル付けするため、これらのプロパティのいずれかを含む各要素（

、 など）に、プロパティを示す itemprop 属性が割り当てられています（例:

【まとめ】

WordPressプラグインなしで、Google検索結果でサイト情報がよりリッチに表示されるようなるマークアップ法を導入した「ぱんくずリスト」を作成するのは簡単にできた。あとは今回取り上げていませんが、どこのページまで対応するのか？カテゴリーやタグ、404ページなどの表示は？といったお話は、「ぱんくずリスト」の設計で必要になりそうですね。

【参考】

パーフェクトなページです。恐縮ですがコピペさせて頂きました。
りくまろぐ http://rikumalog.com/wordpress/breadcrumbs-to-googlesearch.html


関連記事:

  1. Google Mapのwordpress人気プラグイン「MapPress Easy Google Maps」を利用してレスポンシブルデザイン表示を簡単に実現する方法