WPで個別記事とそれ以外のページの見出しを条件分岐変更

WordPressの初期設定では見出しタグが最適に使用されているとは思えません。これではSEOに有効とは言えませんので、簡単な変更でSEOにも良い見出しのつけ方を試行錯誤してみました。

WordPress初期設定でのh1,h2タグ(見出しタグ)の使い方

WordPressの初期設定では「ブログ楽天の名前」がh1タグに指定されており「ブログの説明文」は見出しには使用されていません。そして「個別記事のタイトル」がh2タグになっているのが普通です。これではSEOに有効とは言えません。single.phpを使った個別記事があるテーマでも同様になっているようです。

個別記事のh1タグに「個別記事のタイトル」を指定していました

私は従来、個別記事以外のページではindex.phpで、h1タグに「ブログの説明文」を、h2タグに「個別記事のタイトル」を指定して、記事内部にh3タグ以下を使用していました。

個別記事のページでは、h1タグに「個別記事のタイトル」を、h2タグには何も指定せず、記事内部にh3タグ以下を指定していました。これは個別記事ページの表示に single.phpを使って実現していました。個別記事ページでh2タグを使わず飛ばしてh3タグになっていたのが気になっていました。h3タグ以下をひとつずつタグの数字を小さくして表示してh2タグを使ってやるのが良いのでしょうが、私にはできませんでした。

個別記事を指定するis_single()を使って条件分岐させてみました

今回これを、single.phpを使わず、header.phpだけを変更して、h1タグを条件分岐して変更する方法にしてみました。

最終的に、個別記事以外は、h1タグに「ブログの名前」+「ブログの説明文」を指定して、個別記事では、h1タグに「個別記事のタイトル」+「ブログの名前」を指定しました。h2タグに「個別記事のタイトル」を指定して、記事内部にh3タグ以下を指定するのは従来通りです。これならSEOにはかなり有利なはずです。

ここで、「ブログの名前」や「ブログの説明文」や「個別記事のタイトル」には、内容と文字の量を吟味して設定する必要があります。常にSEOを意識していればうまく設定できるようになると思います。

条件分岐部分には

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

という個別記事だけを指定するis_single()というものを使いました。

実際のスクリプト

<h1>
<?php if(is_single()): ?>
<span class="storytitle_s"><?php the_title(); ?></span>
<span id="header_s"><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></span>
<?php else: ?>
<span id="header"><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></span>
<span class="description"><?php bloginfo('description') ?></span>
<?php endif; ?>
</h1>

ここで、ブロック要素のh1タグの中にはブロック要素のdivタグを使うことができないので、インライン要素のspanタグを使ってブロック表示をさせています。single.phpは必要なく、とてもスマートにできました。表示がかなり乱れますのでスタイルシートで調整します。classやidの名前はお好きなものを使ってください。私は元々あったものをアレンジしました。

ブログの記事内で上記のclass="description"を書こうとしても、ワードプレスが勝手に削除してしまうので書くことができませんでした。ワードプレスの管理画面で「設定」の「投稿設定」の「不正にネスト化した XHTML を自動的に修正する」のチェックを外せばうまく書くことができました。

comments.php内のh2をh3に変更します

個別ページの中のコメントの所の見出しがh2になっているので、これは「個別記事のタイトル」のh2と同列ではおかしいと思います。これをあまり重要でないh3に変更します。

is_singleを使ってsingle.phpのようにデザイン変更が可能です

このis_single()を使って、h1タグの切り替えだけでなく、個別ページとそれ以外のページのデザインを変更できます。この場合、single.phpは必要ありません。