WordPressのカテゴリーページSEO

　以前から当ブログのカテゴリーページとアーカイブページをスッキリ表示させたいと考えていた。日付と記事タイトルだけを一覧表示すれば十分。記事の要約やカテゴリー名など、余計なものは表示させたくない。記事数が増えたので、ユーザビリティのことを考えるとやっておいた方が断然良い。
　だが、WordPressのテーマやテンプレートのカスタマイズ方法があまり分かっていないので先送りしていた。カスタマイズ箇所が多岐に渡りそうなので面倒だったのだ。
　
　そういう状況の中で、下記ブログ記事を読んだ。
　
理想のワードプレスSEOテンプレートを自分で作ろう！（ほぼ趣味
http://parudou.com/seoblog/wordpress/75/

全てのページを質の高いページにするためには、
重複を無くさなければならない。
カテゴリー・タグのトップページを全件表示して、
題名のみで本文の抜粋は無し。
h3タグなどではなく、liタグで並べる。
そうすると、「３０件の記事」などGoogleが記事一覧ページと認識します。

　どうやらSEO的にも悪くないらしい。liタグを使うというのも面白い。
　と言うことなので、重い腰を上げ、WordPressのカスタマイズ方法を調べることにした。せっかくなので、カテゴリー名やカテゴリー説明文、コメント件数も表示させたい。試行錯誤した結果、カテゴリーページは以下のようにスッキリした。

　これで一気に見通しがよくなり、カテゴリーページとアーカイブページから目当ての記事が探しやすくなった。コメント件数をアイコンと共に表示させたのも探しやすくするためだ。
　カテゴリーページでは、カテゴリー名をh1タグで指定した上で、カテゴリー説明文をその下に表示させたので、来訪者が一目でどのようなページなのか把握できるようになったと思われる。
　
　なお、「Twenty Twelve」テーマを以下のような感じでカスタマイズした。参考までに。
　
Twenty Twelve: content.php　※追加行：2,3,4,5,6,7,11

?>
<?php if (  is_archive() || is_category()  ) : ?>
			<li>
				<?php printf('<span>'.esc_html( get_the_date() ).'</span> '); ?><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a> 
<?php comments_popup_link ('','<em></em>1件','<em></em>%件','',''); ?>
			</li>
<?php else : ?>
	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
（中略）
	</article><!-- #post -->
<?php endif; ?>

<?php if ( is_archive() || is_category() ) : ?>

<li>

<?php printf('<span>'.esc_html( get_the_date() ).'</span> '); ?><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>

<?php comments_popup_link ('','<em></em>1件','<em></em>%件','',''); ?>

</li>

<?php else : ?>

（中略）

</article>

<?php endif; ?>

　
Twenty Twelve: カテゴリーテンプレート (category.php)　※追加行：2,3,4,5,9,13

		<div id="content" role="main">
<header class="entry-header">
<h1 class="entry-title"><?php single_cat_title(); ?></h1>
<br /><p class="entry-meta"><?php echo category_description(); ?></p>
</header>
<?php social_echo();?>
		<?php if ( have_posts() ) : ?>
			<?php
echo '<ol class="list_item_title">';
			/* Start the Loop */
（中略）
			endwhile;
echo '</ol>';
			twentytwelve_content_nav( 'nav-below' );
			?>

</header>

<?php social_echo();?>

<?php if ( have_posts() ) : ?>

<?php

echo '<ol class="list_item_title">';

/* Start the Loop */

（中略）

endwhile;

echo '</ol>';

twentytwelve_content_nav( 'nav-below' );

　
Twenty Twelve: アーカイブ (archive.php)　　※追加行：2,3,4,7,11

		<div id="content" role="main">
<header class="entry-header">
<h1 class="entry-title"><?php wp_title('',true,''); ?></h1>
</header>
		<?php if ( have_posts() ) : ?>
			<?php
echo '<ol class="list_item_title">';
			/* Start the Loop */
（中略）
			endwhile;
echo '</ol>';
			twentytwelve_content_nav( 'nav-below' );
			?>

</header>

<?php if ( have_posts() ) : ?>

<?php

echo '<ol class="list_item_title">';

/* Start the Loop */

（中略）

endwhile;

echo '</ol>';

twentytwelve_content_nav( 'nav-below' );

　
Twenty Twelve: スタイルシート (style.css)

.list_item_title li {
margin: 15px 0px;
font-size: 15px;
}
.list_item_title span {
font-size: 10px;
}
.list_item_title em {
padding: 0 0 0 15px;
background: url("comment-grey-bubble.png") no-repeat 0px 3px;
}

.list_item_title li {

margin: 15px 0px;

font-size: 15px;

}

.list_item_title span {

font-size: 10px;

}

.list_item_title em {

padding: 0 0 0 15px;

background: url("comment-grey-bubble.png") no-repeat 0px 3px;

}

※なお「/wp-admin/images/comment-grey-bubble.png」を「/wp-content/themes/twentytwelve/comment-grey-bubble.png」にコピーしている。

アフィリエイト執事ブログ

関連するアフィエイト情報

最近のアフィリエイト情報