【WordPress】クローラーにも親切なパンくずを付けたい人のためのスニペット

最近は仕事でSEOの勉強をする機会が多いです。
勉強したことは自分のブログにも反映させているのですが、そこそこ効果はあるようで。
「くろひつじ」で検索すると、1ページ目(下部ですが)に表示されるようになってきました。ヤッタネ!

『パンくず』ってやっぱり必要らしい

勉強している中で「なるほどな〜」と思い、サイトにも反映させたのが『パンくず』です。

パンくずとは、サイトの構造をユーザーに分かりやすく表示するためのもの。
今見ているページは、何というカテゴリ内にあるのか、トップページはどこなのか、それらを明確にしたものです。
このページだと、記事の最後、関連記事の手前に表示しています。

パンくずはユーザーにも親切ですが、コレを正しく記述すれば、クローラーにも親切になります。

<!-- breadcrumb -->
<ul id="breadcrumb">
<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
		<a href="https://memo.ark-under.net" itemprop="url"><span itemprop="title">くろひつじのメモ帳</span></a>
	</li>		
<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
		<a href="https://memo.ark-under.net/category/memo" itemprop="url"><span itemprop="title">Memo</span></a>
	</li>
<li>【WordPress】クローラーにも親切なパンくずを付けたい人のためのスニペット</li>
</ul>
<!-- /breadcrumb -->

こう書くことで、クローラーが正しくそのページのサイト構造を認識してくれるんだそうです。

コピペOK!パンくずを表示するスニペット

しかし、wordpressでパンくずをつけるとなると、実は意外と面倒くさい。
なのでコピペで使えるスニペットとして作ってみました。
まず、以下をfunctions.phpに追加。

//現在のページ数の取得
function show_page_number($nl) {
	global $wp_query;
	$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
	$max_page = $wp_query->max_num_pages;
	if($nl=='false'){
		return $paged;
	}else{
		echo $paged;
	}
}

以下のコードだけをコピペした「mod-breadcrumb.php」というファイルを作ります。

<!-- breadcrumb -->
<ul id="breadcrumb">
<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
		<a href="<?php echo home_url(); ?>" itemprop="url"><span itemprop="title"><?php bloginfo('name'); ?></span></a>
	</li>
<?php if(is_category()): //カテゴリページの場合 $catName = single_cat_title("", false); $catId = get_cat_ID( $catName ); $cats = get_category( $catId ); $parentCat = $cats->parent;
	$catSlug = $cats->slug;
	$parentLink = get_category_link( $catC->term_id );
	if($parentCat):
	$parent = get_category($parentCat);
	$parentLink = get_category_link( $parent->term_id );?>	
<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><a href="<?php echo $parentLink; ?>" itemprop="url"><span itemprop="title"><?php echo $parent->cat_name; ?></span></a></li>
	<?php endif; ?>	
<li><?php echo $catName; ?>(<?php show_page_number(''); ?>)</li>
<?php elseif(is_tag()): //タグページ $catName = single_cat_title("", false); ?>
<li><?php echo $catName; ?>(<?php show_page_number(''); ?>)</li>
<?php elseif(is_search()): //検索結果ページ ?>
<li>検索結果:<?php the_search_query(); ?>(<?php show_page_number(''); ?>)</li>
<?php elseif(is_archive()): //アーカイブページ ?>	
<li><?php wp_title(''); ?>(<?php show_page_number(''); ?>)</li>
<?php elseif(is_single()): //記事ページの場合 $catCs = get_the_category($post->ID);	$cat = $catCs[0];
	$catLink = get_category_link( $cat->term_id );
	$catName = $catCs[0]->name;
	//親カテゴリーの取得
	$catParent = '';	$catParentLink = '';
	foreach($catCs as $catC){
		if($catC->parent > 0){ //親カテの情報があればセット
			$catParent = $catC->name;
			$catParentLink = get_category_link( $catC->term_id );
		}
	}?>
	<?php if($catParent): //親カテゴリーを表示 ?>	
<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
		<a href="<?php echo $catParentLink; ?>" itemprop="url"><span itemprop="title"><?php echo $catParent; ?></span></a>
	</li>
	<?php endif; ?>	
<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
		<a href="<?php echo $catLink; ?>" itemprop="url"><span itemprop="title"><?php echo $catName; ?></span></a>
	</li>	
<li><?php the_title(); ?></li>
<?php elseif(is_page()): // 固定ページの場合 foreach ( array_reverse(get_post_ancestors($post->ID)) as $parid ): //親ページがあれば表示 ?>	
<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
		<a href="<?php echo get_page_link( $parid );?>" itemprop="url"><span itemprop="title"><?php echo get_page($parid)->post_name; ?></span></a>
	</li>
<?php endforeach; ?>
<li><?php the_title(); ?></li>
<?php else: ?>
<li><?php the_title(); ?></li>
<?php endif; ?>
</ul>
<!-- /breadcrumb -->

あとは、テンプレートの好きな場所に、以下のモジュールファイルを呼び出すコードを追加します。
single.phpやpage.phpに追加する場合は、ループ内に入れてください。

<?php get_template_part('mod-breadcrumb'); ?>

「カテゴリ」「タグ」「検索結果」「アーカイブ」「記事ページ」「固定ページ」とほとんどのページで使用できますが、必要に応じて分岐を追加して使用してください。

CSSはどうしてる?

パンくずを追加することはできましたが、このままではただのリストです。
うちのブログはこんな感じでCSSを設定。悩みたくない人はicon_home.pngを用意して、以下をコピペでどうぞ。

/* パンくず */
#breadcrumb{
	width: 98%;
	margin: 0 auto 30px;
	color: #666666;
	font-size: 1.1rem;
	text-align: center;
}
main #breadcrumb{
	margin: 0 auto 18px;
	text-align: left;
}
main.archive #breadcrumb{
	margin: -10px auto 20px;
	text-align: center;
}
#breadcrumb li{
	display: inline;
}
#breadcrumb a{
	color: #666666;
	text-decoration: none;
}
#breadcrumb li:after{
	content: '>';
	display: inline;
	padding-right: 3px;
	padding-left: 3px;
}
#breadcrumb li:first-child a{
	display: inline-block;
	width: 20px;
	height: 16px;
	overflow: hidden;
	text-indent: -9999px;
	background-image: url(img/icon_home.png);
	background-repeat: no-repeat;
	background-size: 18px auto;
	background-position: left center;
	vertical-align: middle;
}
#breadcrumb li:first-child:after{
	padding-left: 0px;
}
#breadcrumb li:last-child:after{
	content: '';
}

自分の記事を探している人に届けるために

SEO対策ってすごく、なんとなくですけどお金儲け感があってあんまり好きじゃなかったんですよね。(多分悪徳業者のせい)
でも、勉強しているうちに認識が変わってきたんです。

せっかく誰かの役に立つものを書いてるんだから、検索して見つけてもらえるようにしとかないと、その探している誰かに届かない、と。

なので、きっといるであろう、自分の発信する情報を探している人のために、頑張っていきたいと思います。

UPDATE : / Tags

人気のタグ:CUD(カラーユニバーサルデザイン)寝かしつけ雑貨病気アプリフォント育児子どもとおでかけDTPcookie

関連記事

新着記事

コメントを残す