どもども!ブログ書いてますかー!?
先日、当ブログのテーマをSTORK(ストーク)にしたとみっちだよ。
検索エンジンに表示される、自分のブログを見て最近気がついたことがあったのだ。
パンくずリストが反映されていない!
これはいかんと思い修正したので紹介してみるよ。
STORKを使っている人は必見!
検索エンジンに表示されたURL
記事ページのパンくずは、日本語で設定している。
そんで、検索エンジンで「アクセラスポーツ」と検索して表示された際の結果がこんな感じ。
確認した段階では検索順位は6位。価格コムに挟まれているんだけど、キャプチャ画像で赤枠で囲った文字を見てほしい。
価格コムはパンくずリストが日本語で表示されているのに対して、ザ サイベースのほうはURLが表示されている。。
これは、STORKのパンくずリストの構造化が間違っているに違いない!と踏んだわけ。
パンくずリストのリッチスニペットって大事?
パンくずなどのHTMLタグに構造化データマークアップを適用することで、検索画面に反映させる(=リッチスニペット)ことができる。
これまで、全然意識してこなかったんだけど、パンくずのリッチスニペットは2009年頃から反映されてきたんだとか。
リッチスニペットが適切に設定されていれば、検索結果を見た場合のクリック率が上がることもあるはず。その結果、検索順位の上昇が見込める…かもしれない。
STROKのパンくずリストを修正してみる
STORKのカスタマイズの前に、子テーマを導入しているだろうか??
STORK本体にアップデートが発生した場合に備え、いじらないほうが賢明なので、是非子テーマを導入しようね。
導入方法は公式ページを参考にしてほしい。
まず、子テーマの「functions.php」のバックアップファイルもとっておこう。
場所は下記になるよ。
「jstork_custom」の部分は自分でつけたフォルダ名になる。
次に、stork本体の「functions.php」をテキストエディタなどで開いてみよう。
このファイルを開くと、恐らく128行目付近に、
/*********************
パンくずナビ
*********************/
if (!function_exists('breadcrumb')) {
・
・
・
省略
・
・
・
}
/*********************
ページネーション
*********************/
・
・
・
省略
・
・
・
といった記述があるかと思う。
「パンくずナビ」の欄の記述を全てつかいまわしたいので、128行目から「ページネーション」の欄直前の206行目の「}」までコピーしよう。
今度は、子テーマのフォルダの中にある「functions.php」にペーストする。こだわりがなければ、貼り付ける場所は一番下の行でいいだろう。
もしもコピペして誤作動した場合は、コピペした記述をすぐに削除してくださいね。
修正方法
さて、修正する方法だけど、デフォルトの状態だと、
$str.= '<ul itemscope itemtype="//data-vocabulary.org/Breadcrumb">';
と書かれている。
ulタグには書かずにliタグにそれぞれitemscopeとitemtypeを書いてあげる。
僕が子テーマの「functions.php」に追記したのは下記。
・
・
・
/*********************
パンくずナビ
*********************/
if (!function_exists('breadcrumb')) {
function breadcrumb($divOption = array("id" => "breadcrumb", "class" => "breadcrumb inner wrap cf")){
global $post;
$str ='';
if(!get_option('side_options_pannavi')){
if(!is_home()&&!is_front_page()&&!is_admin() ){
$tagAttribute = '';
foreach($divOption as $attrName => $attrValue){
$tagAttribute .= sprintf(' %s="%s"', $attrName, $attrValue);
}
$str.= '<div'. $tagAttribute .'>';
$str.= '<ul>';
$str.= '<li itemscope itemtype="//data-vocabulary.org/Breadcrumb"><a href="'. home_url() .'/" itemprop="url"><i class="fa fa-home"></i><span itemprop="title"> HOME</span></a></li>';
if(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 itemtype="//data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($ancestor) .'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor) .'</span></a></li>';
}
}
$str.='<li itemscope itemtype="//data-vocabulary.org/Breadcrumb"><span itemprop="title">'. $cat -> name . '</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 itemtype="//data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($ancestor).'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor). '</span></a></li>';
}
}
$str.='<li itemscope itemtype="//data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($cat -> term_id). '" itemprop="url"><span itemprop="title">'. $cat-> cat_name . '</span></a></li>';
$str.= '<li>'. $post -> post_title .'</li>';
} elseif(is_page()){
if($post -> post_parent != 0 ){
$ancestors = array_reverse(get_post_ancestors( $post->ID ));
foreach($ancestors as $ancestor){
$str.='<li itemscope itemtype="//data-vocabulary.org/Breadcrumb"><a href="'. get_permalink($ancestor).'" itemprop="url"><span itemprop="title">'. get_the_title($ancestor) .'</span></a></li>';
}
}
$str.= '<li itemscope itemtype="//data-vocabulary.org/Breadcrumb"><span itemprop="title">'. $post -> post_title .'</span></li>';
} elseif(is_date()){
if( is_year() ){
$str.= '<li>' . get_the_time('Y') . '年</li>';
} else if( is_month() ){
$str.= '<li><a href="' . get_year_link(get_the_time('Y')) .'">' . get_the_time('Y') . '年</a></li>';
$str.= '<li>' . get_the_time('n') . '月</li>';
} else if( is_day() ){
$str.= '<li><a href="' . get_year_link(get_the_time('Y')) .'">' . get_the_time('Y') . '年</a></li>';
$str.= '<li><a href="' . get_month_link(get_the_time('Y'),get_the_time('m')) . '">' . get_the_time('n') . '月</a></li>';
$str.= '<li>' . get_the_time('j') . '日</li>';
}
if(is_year() && is_month() && is_day() ){
$str.= '<li>' . wp_title('', false) . '</li>';
}
} elseif(is_search()) {
$str.='<li itemscope itemtype="//data-vocabulary.org/Breadcrumb"><span itemprop="title">「'. get_search_query() .'」で検索した結果</span></li>';
} elseif(is_author()){
$str .='<li itemscope itemtype="//data-vocabulary.org/Breadcrumb"><span itemprop="title">投稿者 : '. get_the_author_meta('display_name', get_query_var('author')).'</span></li>';
} elseif(is_tag()){
$str.='<li itemscope itemtype="//data-vocabulary.org/Breadcrumb"><span itemprop="title">タグ : '. single_tag_title( '' , false ). '</span></li>';
} elseif(is_attachment()){
$str.= '<li itemscope itemtype="//data-vocabulary.org/Breadcrumb"><span itemprop="title">'. $post -> post_title .'</span></li>';
} elseif(is_404()){
$str.='<li>ページがみつかりません。</li>';
} else{
$str.='<li>'. wp_title('', true) .'</li>';
}
$str.='</ul>';
$str.='</div>';
}
}
echo $str;
}
}
変更して、正しくブログのパンくずが表示されただろうか!?
ちょっと難しそうに思えるかもしれないけど、ここまでの変更を行うと、パンくずのHTMLが直すことができるよ。
修正結果
修正前のパンくずリスト部分のHTMLを確認するとこんな感じだった。
<ul itemscope itemtype="//data-vocabulary.org/Breadcrumb">
<li><a href="https://sophiadigital.com/communication/" itemprop="url"><i class="fa fa-home"></i><span itemprop="title"> HOME</span></a></li>
<li><a href="https://sophiadigital.com/communication/category/car" itemprop="url"><span itemprop="title">自動車</span></a></li>
<li>【MAZDA】アクセラ AXELA スポーツ 15C を1日試乗運転した感想!</li>
</ul>
これが、先ほどの「functions.php」の変更を行うと、こんな感じに修正された。
<ul>
<li itemscope itemtype="//data-vocabulary.org/Breadcrumb"><a href="https://sophiadigital.com/communication/" itemprop="url"><i class="fa fa-home"></i><span itemprop="title"> HOME</span></a></li>
<li itemscope itemtype="//data-vocabulary.org/Breadcrumb"><a href="https://sophiadigital.com/communication/category/car" itemprop="url"><span itemprop="title">自動車</span></a></li>
<li>【MAZDA】アクセラ AXELA スポーツ 15C を1日試乗運転した感想!</li>
</ul>
構造化テストツール(Google)
Googleには構造化テストツールというものがあるので、これを使ってテストすることができる。
https://search.google.com/structured-data/testing-tool
修正前はBreadcrumbの欄に1件のアイテムしか認識してくれなかったのが、ちゃんとパンくずのliタグを2つ認識してくれるようになった。
これで修正は完了したので、しばらくしたら検索結果に反映されるはずだけど、急ぐ人は通称サチコ(Google Search Console)を使って、クロール(Gogleのロボットに来てもらう)申請しよう。
Fetch as Google
サチコの「Fetch as Google」の欄でURLを取得、その後でインデックスに送信すれば良いかと。
この作業をやったら30分くらいで、該当ページのパンくずが検索エンジンに反映されたよ。
トップページのURLでも「Fetch as Google」を実行して、全リンクをクロールとしてみたけど、これはなかなか反映されなかった。
全ページのパンくずが反映されるには気長に待とう。
Googleの検索結果にパンくずが反映されたぞ!
歓喜!!
赤枠のところが、「自動車」とパンくずに指定したカテゴリが日本語で表示されるようになった!
読者目線で見ると、検索結果に長ったらしい英語の文字列が書かれているよりも、パンくずが表示されている方が一目でその記事のカテゴリが分かったりしていいよね。
気にしないという人も多いかもしれないけどw
これで記事への流入数も少しでも増えるといいなー。
いや〜、STORKに変えてから気になっていた箇所を1つ直せてスッキリ!!
https://twitter.com/tomicci/status/794339750832271360
STORK固定フッタープラグインをリリース
当ブログでも使用している、人気WordPressテーマ「STORK(ストーク)」に関し、スマホで閲覧した際に以下のような固定フッターメニューを表示できるプラグインをリリースしました。
年々大型化するスマホの画面では、もはやページ上部のハンバーガーメニューはイマイチ使いづらくなってきたと言えます。
ページ下部、スマホホームボタンのそばに固定フッターメニューが表示されるとかなり使いやすくなります。
STORKテーマ限定の機能とはなりますが、ユーザービリティの向上やSNSでの拡散、他の記事への誘導などに、このプラグインをぜひ使ってみてください。