WordPressテーマ「STORK」のパンくずリストを検索エンジンに反映させよう!

どもども!ブログ書いてますかー!?

先日、当ブログのテーマをSTORK(ストーク)にしたとみっちだよ。

検索エンジンに表示される、自分のブログを見て最近気がついたことがあったのだ。

パンくずリストが反映されていない!

これはいかんと思い修正したので紹介してみるよ。

STORKを使っている人は必見!

検索エンジンに表示されたURL

記事ページのパンくずは、日本語で設定している。

そんで、検索エンジンで「アクセラスポーツ」と検索して表示された際の結果がこんな感じ。

確認した段階では検索順位は6位。価格コムに挟まれているんだけど、キャプチャ画像で赤枠で囲った文字を見てほしい。

価格コムはパンくずリストが日本語で表示されているのに対して、ザ サイベースのほうはURLが表示されている。。

thesaibase.com/car/axela-15c

これは、STORKのパンくずリストの構造化が間違っているに違いない!と踏んだわけ。

パンくずリストのリッチスニペットって大事?

パンくずなどのHTMLタグに構造化データマークアップを適用することで、検索画面に反映させる(=リッチスニペット)ことができる。

これまで、全然意識してこなかったんだけど、パンくずのリッチスニペットは2009年頃から反映されてきたんだとか。

リッチスニペットが適切に設定されていれば、検索結果を見た場合のクリック率が上がることもあるはず。その結果、検索順位の上昇が見込める...かもしれない。

STROKのパンくずリストを修正してみる

STORKのカスタマイズに伴う動作不良は当ブログでは責任をもてませんので、バックアップを取るなどして慎重におこなってくださいませ。

STORKのカスタマイズの前に、子テーマを導入しているだろうか??

STORK本体にアップデートが発生した場合に備え、いじらないほうが賢明なので、是非子テーマを導入しようね。

導入方法は公式ページを参考にしてほしい。

まず、子テーマの「functions.php」のバックアップファイルもとっておこう。

場所は下記になるよ。

/wp-content/themes/jstork_custom/functions.php

jstork_custom」の部分は自分でつけたフォルダ名になる。

次に、stork本体の「functions.php」をテキストエディタなどで開いてみよう。

/wp-content/themes/jstork/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="http://thesaibase.com/" itemprop="url"><i class="fa fa-home"></i><span itemprop="title"> HOME</span></a></li>
  <li><a href="http://thesaibase.com/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="http://thesaibase.com/" itemprop="url"><i class="fa fa-home"></i><span itemprop="title"> HOME</span></a></li>
  <li itemscope itemtype="//data-vocabulary.org/Breadcrumb"><a href="http://thesaibase.com/category/car" itemprop="url"><span itemprop="title">自動車</span></a></li>
  <li>【MAZDA】アクセラ AXELA スポーツ 15C を1日試乗運転した感想!</li>
</ul>

構造化テストツール(Google)

Googleには構造化テストツールというものがあるので、これを使ってテストすることができる。

修正前はBreadcrumbの欄に1件のアイテムしか認識してくれなかったのが、ちゃんとパンくずのliタグを2つ認識してくれるようになった。

これで修正は完了したので、しばらくしたら検索結果に反映されるはずだけど、急ぐ人は通称サチコ(Google Search Console)を使って、クロール(Gogleのロボットに来てもらう)申請しよう。

Fetch as Google

サチコの「Fetch as Google」の欄でURLを取得、その後でインデックスに送信すれば良いかと。

この作業をやったら30分くらいで、該当ページのパンくずが検索エンジンに反映されたよ。

トップページのURLでも「Fetch as Google」を実行して、全リンクをクロールとしてみたけど、これはなかなか反映されなかった。

全ページのパンくずが反映されるには気長に待とう。

Googleの検索結果にパンくずが反映されたぞ!

歓喜!!

赤枠のところが、「自動車」とパンくずに指定したカテゴリが日本語で表示されるようになった!

読者目線で見ると、検索結果に長ったらしい英語の文字列が書かれているよりも、パンくずが表示されている方が一目でその記事のカテゴリが分かったりしていいよね。

気にしないという人も多いかもしれないけどw

これで記事への流入数も少しでも増えるといいなー。

いや〜、STORKに変えてから気になっていた箇所を1つ直せてスッキリ!!

Facebookアカウントでコメント

※本コメント機能はFacebookによって提供されており、この機能によって生じた損害に対してザ サイベースは一切の責任を負いません。

ABOUTこの記事を書いた人

とみっち

埼玉でザ サイベースを主催しています。Webクリエイター。フリーランス歴7年。飄々と生きています。これでも育児頑張ってます。長野市出身。 @tomicci 詳しいプロフィール【興味】ギター/DTM/Web/車/田舎/旅/酒/育児 自然の音からデスメタルまで聴きます。【運営サイト】 ザ サイベース おと風景