WordPress|パンくずリストのリッチスニペット表示
Wordpressでのパンくずリストのリッチスニペット表示について、まとめてみました。
検索結果に表示されるスニペットは、
通常meta descriptionに設定したテキストが表示されますが、
画像やパンくずなど、meta description以外で検索結果に表示されるものを”リッチスニペット”といいます。
リッチスニペットは、構造化データマークアップを行うことによって検索画面に表示させることができ、
構造化データマークアップとは、テキストに対してメタデータを設定していくことで、
これによって検索エンジンのロボットがページの内容や階層をより正確に理解出来ます。
以前は、パンくずのプラグインをしようして、構造化マークアップを行っていましたが、
プラグインのアップデートにより、出来なくなってしまいましたので、
こちらの記事を参考に
「パンくずリストを作ってみるとWordPress でのサイト構築のコツがつかめるかもしれない(コード 付き)」
構造化マークアップされたパンくずリストを作成しました。
テーマ内fanction.phpに以下を書き込みます。
そして、パンくずを表示させたいところに、
このショートコードを書くことで、構造化マークアップされたパンくずが生成されます。
Written by Ishiko.
検索結果に表示されるスニペットは、
通常meta descriptionに設定したテキストが表示されますが、
画像やパンくずなど、meta description以外で検索結果に表示されるものを”リッチスニペット”といいます。
リッチスニペットは、構造化データマークアップを行うことによって検索画面に表示させることができ、
構造化データマークアップとは、テキストに対してメタデータを設定していくことで、
これによって検索エンジンのロボットがページの内容や階層をより正確に理解出来ます。
以前は、パンくずのプラグインをしようして、構造化マークアップを行っていましたが、
プラグインのアップデートにより、出来なくなってしまいましたので、
こちらの記事を参考に
「パンくずリストを作ってみるとWordPress でのサイト構築のコツがつかめるかもしれない(コード 付き)」
構造化マークアップされたパンくずリストを作成しました。
テーマ内fanction.phpに以下を書き込みます。
/** パンくずリスト*/ function breadcrumb(){ global $post; $str =''; if(!is_home()&&!is_admin()){ $str.= '<ol class="inner">'; $str.= '<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. home_url() .'" itemprop="url"><span itemprop="title">HOME</span></a> > </li>'; if(is_search()){ $str.='<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><span itemprop="title">「'. get_search_query() .'」で検索した結果</span></li>'; } elseif(is_tag()){ $str.='<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><span itemprop="title">タグ : '. single_tag_title( '' , false ). '</span></li>'; } elseif(is_404()){ $str.='<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><span itemprop="title">404 Not found</span></li>'; } elseif(is_date()){ if(get_query_var('day') != 0){ $str.='<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_year_link(get_query_var('year')). '" itemprop="url"><span itemprop="title">' . get_query_var('year'). '年</span></a> > </li>'; $str.='<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_month_link(get_query_var('year'), get_query_var('monthnum')). '" itemprop="url"><span itemprop="title">'. get_query_var('monthnum') .'月</span></a> > </li>'; $str.='<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><span itemprop="title">'. get_query_var('day'). '日</span></li>'; } elseif(get_query_var('monthnum') != 0){ $str.='<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_year_link(get_query_var('year')) .'" itemprop="url"><span itemprop="title">'. get_query_var('year') .'年</span></a> > </li>'; $str.='<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><span itemprop="title">'. get_query_var('monthnum'). '月</span></li>'; } else { $str.='<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><span itemprop="title">'. get_query_var('year') .'年</span></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.='<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb" itemprop="url"><a href="'. get_category_link($ancestor) .'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor) .'</span></a> > </li>'; } } $str.='<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb" itemprop="url"><span itemprop="title">'. $cat -> name . '</span></li>'; } elseif(is_author()){ $str .='<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb" itemprop="url"><span itemprop="title">投稿者 : '. get_the_author_meta('display_name', get_query_var('author')).'</span></li>'; } elseif(is_page()){ if($post -> post_parent != 0 ){ $ancestors = array_reverse(get_post_ancestors( $post->ID )); foreach($ancestors as $ancestor){ $str.='<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb" itemprop="url"><a href="'. get_permalink($ancestor).'" itemprop="url"><span itemprop="title">'. get_the_title($ancestor) .'</span></a> > </li>'; } } $str.= '<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb" itemprop="url"><span itemprop="title">'. $post -> post_title .'</span></li>'; } elseif(is_attachment()){ if($post -> post_parent != 0 ){ $str.= '<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb" itemprop="url"><a href="'. get_permalink($post -> post_parent).'" itemprop="url"><span itemprop="title">'. get_the_title($post -> post_parent) .'</span></a> > </li>'; } $str.= '<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb" itemprop="url"><span itemprop="title">' . $post -> post_title . '</span></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.='<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb" itemprop="url"><a href="'. get_category_link($ancestor).'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor). '</span></a> > </li>'; } } $str.='<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb" itemprop="url"><a href="'. get_category_link($cat -> term_id). '" itemprop="url"><span itemprop="title">'. $cat-> cat_name . '</span></a> > </li>'; $str.= '<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb" itemprop="url"><span itemprop="title">'. $post -> post_title .'</span></li>'; } else{ $str.='<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb" itemprop="url"><span itemprop="title">'. wp_title('', false) .'</span></li>'; } $str.='</ol>'; } echo $str; }
そして、パンくずを表示させたいところに、
<?php breadcrumb(); ?>
このショートコードを書くことで、構造化マークアップされたパンくずが生成されます。
Written by Ishiko.