Google検索結果にパンくずリストを表示し、クリックされやすくする方法

WEBサイトには、階層構造を表す「パンくずリスト」がグローバルメニューの下あたりによく設置されていますが、この「パンくずリスト」は、Google検索結果に表示することができます。検索結果のタイトルの下に表示されている無機質なURLを、階層構造を表した「パンくずリスト」を表示させて少しだけクッリクされやすくする方法を紹介します。

パンくずリストとは

ウェブページの位置をツリー構造を持ったハイパーリンクの一覧として示すもの。パンくずナビ、トピックパス、フットパスとも言う。「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。

ウェブディレクトリのような大規模なウェブサイト内において、利用者がサイト内での現在位置を見失わないようにし、ナビゲーションを助けるために使われる。

Wikipedia

For example

「パンくずリスト」を表示するメリット

パンくずリストをGoogle検索に表示させる事によって、以下のような効果が期待できるかもしれません。

SEO効果

パンくずリストを表示させるために、構造化マークアップを用いることでGoogleがサイト構造を理解するのに役立ちます。それによってSEO効果を期待できるかもしれません。

クリック率を上げる

無機質なURLが表示されている時は、目にも止まらなかったエリアに、パンくずリストが表示されることで目に入り、クリックされやすくなると考えられます。

Google検索結果にパンくずを反映させるには

Google検索結果にパンくずリストを表示させるのには、普通にWEBサイトにパンくずリストを表示させていれば、Googleが自動的に検索結果に反映してくれるようですが、当サイトは、CSSの::afterで階層を表す記号を使ったせいか、自動認識してくれませんでした。

そこで、Googleにパンくずリストを認識してもらえるようにリッチスニペットを使います。Googleに使えるリッチスニペットの形式は3つあり、中でもmicrodata形式での構造化マークアップをGoogleは推奨しています。

microdata（推奨）
microformats
RDFa

リッチスニペットを使い構造化マークアップをすることで検索結果にパンくずリストを表示させることができます。

リッチスニペットと構造化データについて – ウェブマスターツールヘルプ

microdata形式の構造化マークアップ

Googleでは、microdataとRDFaによる構造化マークアップの例が記述されていますが、推奨されているmicrodata形式でのマークアップ方法を解説します。

Googleの例では、divを使ったマークアップが記述されていますが、私はliタグを使ってパンくずリストを実装していますので当サイトと同じようにliタグを使っている場合は参考にしてみてください。

構造化マークアップ

<ul>
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="https://millkeyweb.com" itemprop="url">
            <span itemprop="title">HOME</span>
        </a> &gt; 
    </li>
    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="https://millkeyweb.com/category/webdesign" itemprop="url">
            <span itemprop="title">カテゴリー</span>
        </a> &gt; 
    </li>
    <li>
        現在ページ
    </li>
</ul>

上記のような構造化マークアップをするとGoogle検索結果にパンくずリストが表示されるようになります。（表示されるまでに、数日かかる場合があります。）

リッチスニペット – パンくずリスト – ウェブマスターツールヘルプ

WordPressにパンくずリストを設置する

WordPressでは、簡単にプラグインで実装する方法と自分でコードを書いて実装する方法を紹介します。

プラグインでパンくずリストを実装する方法

Breadcrumb NavXTプラグインを使って構造化マークアップしたパンくずリストを表示する方法です。

Breadcrumb NavXT

SEOモードさんがBreadcrumb NavXTプラグインを使って、実装する方法を紹介しておりますのでそちらをご覧いただくと大変わかりやすいです。

Breadcrumb NavXTを使ったパンくずリストの構造化マークアップ | SEOモード

コードを書いてパンくずリストを実装する方法

phpを書いてパンくずリストを実装する方法は、Webデザインレシピさんのブログで紹介されている方法がとても分かりやすく、カテゴリーページから404ページまでサポートされた実装方法を紹介していますので参考にしてください。

パンくずリストを作ってみるとWordPress でのサイト構築のコツがつかめるかもしれない（コード付き） | Webデザインレシピ

上記サイトを参考にfunctions.phpにコードが書けたら下記のように、構造化マークアップを追加した形に編集してください。

<?php
function breadcrumb() {
  global $post;
  $format = '<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="%1$s" itemprop="url"><span itemprop="title">%2$s</span></a>&gt;</li>';
  $str ='';
  if (!is_home()&&!is_admin()) { /* !is_admin は管理ページ以外という条件分岐 */
      $str.= '<div id="breadcrumb" class="clearfix"><ul>';
      $str.=  sprintf($format, esc_url(home_url('/')), get_bloginfo('name'));
         
      if(is_search()){
          $str.='<li>「'. get_search_query() .'」で検索した結果</li>';
      } elseif(is_tag()){
          $str.='<li>タグ : '. single_tag_title( '' , false ). '</li>';
      } elseif(is_404()){
          $str.='<li>404 Not found</li>';
      } elseif(is_date()){
          if(get_query_var('day') != 0){
              $str.= sprintf($format, esc_url(get_year_link(get_query_var('year'))), get_query_var('year') . '年');
              $str.= sprintf($format, esc_url(get_month_link(get_query_var('year'), get_query_var('monthnum'))), get_query_var('monthnum') . '月');
              $str.='<li>'. get_query_var('day'). '日</li>';
          } elseif(get_query_var('monthnum') != 0){
              $str.= sprintf($format, esc_url(get_year_link(get_query_var('year'))), get_query_var('year') . '年');
              $str.='<li>'. get_query_var('monthnum'). '月</li>';
          } else {
              $str.='<li>'. get_query_var('year') .'年</li>';
          }
      } elseif(is_category()) {
          $cat = get_queried_object();
          if($cat -> parent != 0){
              $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
              foreach($ancestors as $ancestor){
                  $str.= sprintf($format, esc_url(get_category_link($ancestor)), get_cat_name($ancestor));
              }
          }
          $str.='<li>'. $cat -> name . '</li>';
      } elseif(is_author()){
          $str .='<li>投稿者 : '. get_the_author_meta('display_name', get_query_var('author')).'</li>';
      } elseif(is_page()){
          if($post -> post_parent != 0 ){
              $ancestors = array_reverse(get_post_ancestors( $post->ID ));
              foreach($ancestors as $ancestor){
                  $str.= sprintf($format, esc_url(get_permalink($ancestor)), get_the_title($ancestor));
              }
          }
          $str.= '<li>'. $post -> post_title .'</li>';
           
      } elseif(is_attachment()){
          if($post -> post_parent != 0 ){
             $str.= sprintf($format, esc_url(get_permalink($post -> post_parent)), get_the_title($post -> post_parent));
          }
          $str.= '<li>' . $post -> post_title . '</li>';
      } elseif(is_single()){
          $categories = get_the_category($post->ID);
          $cat = $categories[0];
          if($cat -> parent != 0){
              $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
              foreach($ancestors as $ancestor){
                  $str.= sprintf($format, esc_url(get_category_link($ancestor)), get_cat_name($ancestor));
              }
          }
          $str.= sprintf($format, esc_url(get_category_link($cat -> term_id)), $cat-> cat_name);
          $str.= '<li>'. $post -> post_title .'</li>';
      } else{
          $str.='<li>'. wp_title('', false) .'</li>';
      }
      $str.='</ul></div>';
  }
  echo $str;
}
?>

構造化データテストツールで確認

パンくずリストの構造化マークアップができたら、リッチスニペットが反映されているか、ウェブマスターツールの構造化データテストツールで確認しておきましょう。

構造化データテストツールの使い方

構造化データテストツールにアクセスして、テストを行いたいページのURLを入力し、プレビューをクリックしてください。

するとGoogle検索結果のプレビューが見ることができます。プレビューにパンくずリストが反映されているか視覚的に確認することができます。

構造化マークアップが、Googleに認識されていれば、下図のようにデータの情報が表示されています。

まとめ

パンくずリストを検索結果に表示させると、SEOやクリック率増加が期待できる。
構造化マークアップ方法は、3種あるが、Googleはmicrodataを推奨している。
パンくずリストにリッチスニペットを追加する
WordPressには、プラグインまたはコードを書いて反映させる
構造化データテストツールで確認

あとがき

パンくずリストの他にも構造化マークアップはありますので、そちらも実装してみると検索結果に反映されてSEOにいいかもしれません。ウェブマスターツールの構造化データマークアップ支援ツールを使うと簡単にどのようにマークアップしたらいいかわかるので、使ってみてください。

Google検索結果にパンくずリストを表示し、クリックされやすくする方法

パンくずリストとは