WordPressでmicrodataを使ったパンくずリスト

WordPress

WordPressでパンくずリストをmicrodataを使ってマークアップするやり方

そういえばこのサイトではまだパンくずリストを作成していなかったので今回新たに作ってみました。パンくずリストを作成することでGoogleの検索結果にも表示されるので、Webサイトを運営している人は作っておいて損はなさそうですね。

[ads_center]

リッチ スニペット

今までパンくずリストをしっかり作ったことがなかったので、どういう風にHTMLをマークアップしていけばいいのかわからなかったので少し調べてみました。

というのも、パンくずリストをただ作っても検索結果に表示されない場合があるみたいだからです。で、これについてはGoogleのウェブマスターツールのページで推奨されるやり方が書いてあったので、今回はこれに従って作っていくことにしました。

  • microdata
  • microformats
  • RDFa

上記の中で、Google推奨になっているものが「microdata」です。

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

プラグインなしで作成

WordPressには便利なプラグインがあり、パンくずリストを表示させるプラグインもあるんですが、今回はプラグインを使わないで作成してみることにします。

まず、microdataを使った基本的なマークアップについてです。以下のようなパンくずリストを表示させたいとします。

ホーム >Web制作 >JavaScript

この場合、microdataを使用すると以下のようなマークアップになります。

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="○○○" itemprop="url">
        <span itemprop="title">ホーム</span>
    </a> &gt;
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="○○○" itemprop="url">
        <span itemprop="title">Web制作</span>
    </a> &gt;
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="○○○" itemprop="url">
        <span itemprop="title">JavaScript</span>
    </a>
</div>

href属性には各ページURLを入れて下さい。

  • divに囲まれたHTMLはパンくずであることを示す
  • itemscopeはdivのコンテンツがアイテムであることを示す
  • itemtypeはアイテムがパンくずであることを示す
  • itempropはアイテムのプロパティ(タイトル・URL)

これらを出力させるために、functions.phpにコードを記述していきます。

  • category.php
  • single.php
  • page.php
// パンくずリスト
function breadcrumb(){
	global $post;
	$str ='';
	if(!is_home()&&!is_admin()){
		$str.= '<div id="breadcrumb" class="cf"><div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">';
		$str.= '<a href="'. home_url() .'" itemprop="url"><span itemprop="title">ホーム</span></a> &gt;</div>';

		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.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($ancestor) .'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor) .'</span></a> &gt;</div>';
				}
			}
		$str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($cat -> term_id). '" itemprop="url"><span itemprop="title">'. $cat-> cat_name . '</span></a></div>';
		} elseif(is_page()){
			if($post -> post_parent != 0 ){
				$ancestors = array_reverse(get_post_ancestors( $post->ID ));
				foreach($ancestors as $ancestor){
					$str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_permalink($ancestor).'" itemprop="url"><span itemprop="title">'. get_the_title($ancestor) .'</span></a></div>';
				}
			}
		} 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.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($ancestor).'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor). '</span></a> &gt;</div>';
				}
			}
			$str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($cat -> term_id). '" itemprop="url"><span itemprop="title">'. $cat-> cat_name . '</span></a></div>';
		} else{
			$str.='<div>'. wp_title('', false) .'</div>';
		}
		$str.='</div>';
	}
	echo $str;
}

※実際に試す場合は、まずローカル環境でちゃんと出力されるかどうかを確認することをオススメします。

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

そして表示させたい場所に関数を貼り付けます。

<?php breadcrumb(); ?>

これで、microdataでマークアップされたパンくずリストを出力させることができます。

構造化データをテストしてみる

最後に、テストツールを使ってパンくずリストを構造化したデータがGoogleにちゃんと読み取られるかどうかをテストします。ここでしっかりと認識させることができれば、とりあえずは完了です。

Google Structured Data Testing Tool

こんな感じで試したいURLを入力してプレビューを押します。

構造化データをテスト

試しに当サイトの記事ページを確認してみると、このようにちゃんと認識されていました。

構造化データを認識

これでひとまずは安心ですね。パンくずリストを作ってからどのくらいで検索結果に反映されるか分かりませんが、とりあえずはこれで気長に待ってみようかと思います。

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

また、microdataを使って作成したからといって検索結果の順位に影響があるということはないので、変に期待しない方がいいです。これについては最初に紹介したリンク先「リッチ スニペットと構造化データについて」に載っています。

リッチ スニペット用にデータをマークアップしても、検索結果でのページの掲載順位は変わりません。また、マークアップが必ず使用されるとは限りません。

ただ、どんなカテゴリー階層に入っているページなのかが分かりやすく表示されるので、ユーザーに選ばれやすくなるという傾向は少なからずあるんじゃないかなーと思っています。

関連記事

  1. Tetris

    WordPress

    レスポンシブに対応したmasonry風のフリーのWordPressテーマ「Tetris」

    Tetrisという素敵なフリーのWordPressテーマを見つけたので…

  2. WordPress

    シングルページに同一カテゴリーの記事一覧を表示するカスタマイズ

    WordPressのシングルページの記事の下に現在表示されている記事と…

  3. WordPressで投稿IDを指定した記事をランダム表示

    WordPress

    WordPressで複数の投稿ID(記事ID)を指定した記事をランダムで表示させるやり方

    個人的にやってみたかったので備忘録。WordPressで自分が作った関…

  4. WordPress

    WordPressで特定の記事やページにカスタムフィールドで指定したCSS・JSファイルを読み込む

    個人的に今後ちょっと使いそうな機能だったのでメモがてらエントリー。Wo…

  5. WordPressの自動バックグラウンド更新

    WordPress

    WordPressで複数のウィジェットを表示させるやり方

    WordPressのウィジェットってとても便利ですよね。ドラッグ&ドロ…

  6. WordPressのログイン時のツールバー

最近の記事

  1. 久保田城
  2. ハードサイド CS80
  3. ACC-TRBX
  4. ピスタチオ クリスマス ツリー フラペチーノ

Instagram始めました

Facebookページ

PAGE TOP