【WordPress】プラグインなしのschema.org対応パンくずリストを実装する方法(microdata版)


記述するシンタックス(構文)にmicrodataを使用したschema.org対応のパンくずリストパンくずナビゲーション)を作ってみました。

functions.phpに記述するだけなので、プラグインなしでも、非常に簡単に実装できます。

パンくずリスト(ナビゲーション)を構造化データでマークアップして、SEOしましょう♪

プラグインを利用するのが嫌いな方は、参考にどうぞ。

「schema.org」について

schema.orgとは?

Google、Microsoft、Yahoo! などが共同で進めている、ウェブの改善を目的とした「構造化データのマークアップの仕様」を策定する取り組みのこと。

ちなみにschema(スキーマ)とは、「概要」のこと。

shema.orgをざっくり説明

Googleなどの検索エンジンは、人とは違い「プログラム」なので、言葉の意味を理解しません。

たとえば、『吾輩は猫である』と書かれていれば、人なら夏目漱石の著書と考えますが、検索エンジンはそこまで深く理解しません。

そこで、登場するのがschema.orgが提供するボキャブラリー。これをマークアップすることで、検索エンジンにも「本」であることが認識されます。

つまり、schema.orgは、サイト内の情報を検索エンジンによりよく伝える手段といえます。

ちなみに現在、Googleは、schema.orgのパンくずリストをサポートしています。つまり、SEO対策として、導入した方が良いということ。

メリット

メリットは、次のようなもの。

schema.orgの利点
  • ページのカテゴリやテーマなどの内容を検索エンジンに伝える事ができる
  • 検索エンジンでリッチスニペットを表示させる事ができる

詳しく説明はしませんが、schema.orgを導入することで、サイトの情報を詳しく検索エンジンに伝え、サイト閲覧者の利便性も向上させれるようになります。

スポンサーリンク

functions.phpに記述

以下のものをfunctions.phpに書き込んでください。

functions.phpの記述に関し、WordPressの編集ページからしてはダメ。サーバー内の編集ページか、FTPソフトを使って行ってください。
使用しているテーマやプラグインによっては、不具合が発生する可能性があります。既存のパンくずリストのプログラムに上書きする場合は、すぐに元に戻せるようにデータを保管しておいてください。

//パンくずリスト
function breadcrumb(){
	global $post;
	$str = '';
        $a1 = '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="';
        $a2 = '"><span itemprop="name">';
        $a3 = '</span></a><meta itemprop="position" content="';
        $b1 = '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><span itemprop="name">';
        $b2 = '</span><meta itemprop="position" content="';
	if(!is_home()&&!is_admin()){ /* !is_admin は管理ページ以外という条件分岐 */
		$str.= '<nav id="breadcrumb"><ol itemscope itemtype="http://schema.org/BreadcrumbList">';
		$str.= $a1 . home_url() . $a2 . 'TOP' . $a3 . '1" /></li>&gt;';
		if(is_category()) {								//カテゴリーのアーカイブページ
			$cat = get_queried_object();
			if($cat -> parent != 0){
				$ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
                                $positionNum = 2;
				foreach($ancestors as $ancestor){
                                        $str.= $a1 . get_category_link($ancestor) . $a2 .get_cat_name($ancestor) . $a3 . $positionNum . '" /></li>&gt;';
                                        $positionNum++;
				}
			}
                        $position = count($ancestors)+2;
			$str.= $b1 . $cat -> name . $b2 . $position . '" /></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' ));
                                $positionNum = 2;
				foreach($ancestors as $ancestor){
					$str.= $a1 . get_category_link($ancestor) . $a2 . get_cat_name($ancestor) . $a3 . $positionNum . '" /></li>&gt;';
                                        $positionNum++;
				}
			}
                        $position = count($ancestors)+2;
                        $str.= $a1 . get_category_link($cat -> term_id). $a2 . $cat-> cat_name . $a3 . $position . '" /></li>&gt;';
                        $position = count($ancestors)+3;
			$str.= $b1 . $post -> post_title . $b2 . $position.'" /></li>';
		} elseif(is_page()){							//固定ページ
			if($post -> post_parent != 0 ){
				$ancestors = array_reverse(get_post_ancestors( $post->ID ));
                                $positionNum = 2;
				foreach($ancestors as $ancestor){
					$str.= $a1 . get_permalink($ancestor) . $a2 . get_the_title($ancestor) . $a3 . $positionNum . '" /></li>&gt;';
                                        $positionNum++;
				}
			}
                        $position = count($ancestors)+2;
			$str.= $b1 . $post -> post_title . $b2 . $position.'" /></li>';
		} elseif(is_date()){							//日付ベースのアーカイブページ
			if(get_query_var('day') != 0){				//年月日別アーカイブ
			$str.= $a1 . get_year_link(get_query_var('year')). $a2 . get_query_var('year') . '年' . $a3 . '2" /></li>&gt;';
				$str.= $a1 . get_month_link(get_query_var('year'), get_query_var('monthnum')). $a2 . get_query_var('monthnum') . '月' . $a3 . '3" /></li>&gt;';
				$str.= $b1 . get_query_var('day'). '日' . $b2 . '4" />';
			} elseif(get_query_var('monthnum') != 0){	//年月別アーカイブ
				$str.= $a1 . get_year_link(get_query_var('year')) . $a2 . get_query_var('year') .'年' . $a3 . '2" /></li>&gt;';
				$str.= $b1 . get_query_var('monthnum') . '月' . $b2 . '3" />';
			} else {							         //年別アーカイブ
				$str.= $b1 . get_query_var('year') . '年' .  $b2 . '2" />';
			}
                        $str.= '</li>';
		} else {                                                                         //上記以外
             if(is_search()) {							                //検索結果表示ページ                    
                        $str.= $b1 . '「'. get_search_query() .'」で検索した結果';
		}elseif(is_author()){							//投稿者のアーカイブページ
                        $str.= $b1 . '投稿者 : '. get_the_author_meta('display_name', get_query_var('author'));
		} elseif(is_tag()){								//タグのアーカイブページ
                        $str.= $b1 . 'タグ : '. single_tag_title( '' , false );
		} elseif(is_attachment()){						//添付ファイルページ
                        $str.= $b1 . $post -> post_title;
		} elseif(is_404()){								//404 Not Found ページ
                        $str.= $b1 . '404 Not found';                  
		} else{										//その他
			$str.= $b1 . wp_title('', true) ;
                }
                        $str.= $b2  . '2" /></li>';
		}
		$str.= '</ol>';
		$str.= '</nav>';
	}
	echo $str;
}

ファイルに書き込む

パンくずリストを表示させるために以下のコードを表示させたい場所に書き込んでください。


<?php breadcrumb(); ?>

CSSにデザインする

僕がしているCSSの設定は、以下のとおり。

#breadcrumb {
/*パンくずナビの位置調整*/
}

#breadcrumb ol {
    font-size: 12px;
    font-weight: bold;
    margin: 0;
    padding: 5px;
    list-style-type: none;
}

#breadcrumb ol li {
    display: inline;
    padding: 5px;
}
スポンサーリンク

解説

基本的な骨格は、『Webデザインレシピ』さんのサイトを参考にさせていただきました。

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

ちなみに、このサイトは、説明が非常にわかりやすく、PHP初心者でも理解できます。ちなみに僕はPHP初心者です(笑)

schema.orgを追加

schema.orgの記述方法は、以下のschema.orgを参考にします。

⇒schema.org『BreadcrumbList』

<ul>でパンくずナビをリスト化している人が多いと思いますが、schema.orgのサイトを参考にし、<ol>でリスト化をしています。

『TOP > カテゴリー名 > 投稿ページのタイトル』の場合、以下のようになります。

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="トップページのアドレス">
        <span itemprop="name">TOP</span></a>
    <meta itemprop="position" content="1" />
  </li>
  
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="カテゴリーのアドレス">
      <span itemprop="name">カテゴリー名</span></a>
    <meta itemprop="position" content="2" />
  </li>
  
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
      <span itemprop="name">投稿ページのタイトル</span>
    <meta itemprop="position" content="3" />
  </li>
</ol>

以下のボキャブラリーが追加されています。

  • itemscope
  • itemtype
  • itemprop

作成上、壁となったのは、メタ情報(<meta>)。それ以外は、schema.orgのボキャブラリーを追加するだけで済みます。

メタ情報が問題だった

メタ情報で、パンくずリストの階層の位置(position)を指定しています。

<meta itemprop="position" content="階層の順番" />

たとえば、投稿ページの場合、TOPページが「1」、カテゴリーが「2」、現在ページが「3」のようになります。

TOP > カテゴリー > 現在ページのタイトル

上記の場合であれば、phpの記述は、非常に簡単です。それぞれにメタ情報を書き込むだけでよいので。

しかし、実際は、祖先カテゴリー(親カテゴリーや祖父カテゴリーなど)を設定する場合に問題が発生します

TOPページが「1」、祖父カテゴリーが「2」、親カテゴリーが「3」、現在のカテゴリー「4」、現在ページが「5」のように、カテゴリーが増える分、数字がズレます。

TOP > 祖父カテゴリー > 親カテゴリー > 現在のカテゴリー > 現在ページ

親カテゴリーを設定していても、番号が適切に割り振られないと使い物になりません。

問題解決

この問題を、インクリメントなどを利用して解決しました。

たとえば、投稿ページの場合は、以下のようにします。

『TOPページ』は、1が確定なので、考える必要はありません。

『祖先カテゴリー(親カテゴリーや祖父カテゴリーなど)』の部分は、foreachでループさせます。初期値を2として、インクリメントでループするごとに1プラス。

『現在のカテゴリー』は、上記のループ回数に、”TOP”と”現在のカテゴリー”を足すので、ループ回数+2に。

『現在のページ』は、ループ回数に、”TOP”と”現在のカテゴリー”と”現在のページ”を足すので、ループ回数+3で計算します。

階層 positonの番号に対するプログラム上の考え
TOPページ 必ず先頭にあるため、1で固定
祖先カテゴリー 2からスタートし、インクリメントでループするごとに1プラス
現在のカテゴリー 上記のループ回数+2(祖先がなければ、ループ回数は0)
現在のページ 上記のループ回数+3(祖先がなければ、ループ回数は0)

固定ページやカテゴリーページも同様の考えです。

そして、重複するタグが多く発生するため、変数を使って、記述を減らしています。

$a1、$a2、$a3は、リンク有り(現在のページ以外)で使い、$b、$b2は、リンク無し(現在のページ)で使います。

結果、かなり雑な感じになっていますが、本職がプログラマーではないので、ご勘弁ください。

最後にチェック&報告

実装が終わりましたら、構造化データテストツールで、チェックしてください。

自分のWebサイトのURLを、コピペするだけなので簡単にチェックできます。

また、Googleに変更後のデータを保存してもらうために、Google Search Console内の「Fetch as Google」でクロールを促しましよう。

スポンサーリンク
ページ先頭へ