ブログの内部構造を変え、見出しタグを完全に階層構造にしました。その方法を書き留めておきます。
見出しタグとは
見出しタグとは、h1タグとかh2タグと言われるもので、ブログのタイトルや見出しにつけるものです。
この見出しタグは階層構造となっていることが望ましいということです。すなわち、h1タグはページにひとつだけです。
次はh2タグがきます。h2タグは複数あってかまいません。h2タグの間に複数のh3タグが入ることもあります。
しかし、h2タグなしで、h3タグがきては、おかしいということになります。
見出しの階層構造
『これからはじめる SEO内部対策の教科書』（瀧内賢 技術評論社）でも、見出しタグは階層構造となっていることが、人間にとっても検索エンジンにとっても自然な流れであると書かれています。
HTML文書としても正しい書き方ということになります。
悩んでいたこと
このブログのテーマは、『WordPressデザインブック3.x対応』（エビスコム ソシム）をもとに作りました。
トップページでは記事の一覧を表示しています。ブログのタイトルにh1タグを使い、記事のタイトルにh2タグを使っています。
記事の個別ページでも、ブログのタイトルにh1タグ、記事のタイトルにh2タグを使っていました。
ところが、記事の個別ページにおける記事のタイトルは、h1タグをつけることが望ましいということです。
ここに次のように書かれています。
４－２－１．ページタイトルにh1タグを使う
ページタイトルには必ずh1タグを使うようにしよう。例えば、サイトのトップページはサイト名にh1を、記事ページでは記事タイトルにh1を設定しよう。例えば、記事ページのタイトルにh2を設定しているようなサイトを良くみかけるが、これはSEO的には非常に大きな損失であることを認識しよう。
また、『プロ・ブロガーの 必ず結果が出るアクセスアップ テクニック100』（コグレマサト，するぷ インプレスジャパン）にも、同様のことが書かれています。
そのため、以前とりあえず、記事の個別ページで、ブログのタイトルのh1タグはそのままにして、記事のタイトルにもh1タグをつけました。
つまり、１ページにh1タグが２つあることになるのですが、そこには目をつぶりました。
今回、この部分を修正しました。記事の個別ページのh1タグは、記事のタイトルだけにして、ブログのタイトルからはなくしました。
１ページにh1タグは一つだけにしました。
方法
方法は簡単です。
PHPでトップページかどうかを判断して、トップページであればブログのタイトルにh1タグをつけ、トップページでなければブログのタイトルには見出しタグをつけないようにしました。
言葉で書くのは簡単ですが、トップページかどうかを判断する方法と、PHPでの条件文の書き方を調べるのに時間がかかってしまいました。
header.phpのヘッダーの部分を以下のように変更しただけです。
HTML
<div id="header-in">
<?php if (is_home()) { ?>
<h1 class="header-top">
<a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a>
</h1>
<?php } else { ?>
<p class="header-top">
<a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a>
</p>
<?php } ?>
</div>
CSS
CSSではトップページでもそれ以外のページでも同じ表示をするようにクラスセレクタを使いました。
div#header {font-family: 'ＭＳ ゴシック', sans-serif;
margin-bottom: 20px}
div#header #header-in .header-top
{font-size: 2.5em;
font-weight:bold;
padding-top: 5px;
margin-bottom: 10px}
div#header #header-in .header-top a
{text-decoration: none;
color: #1f1f1f;
}
以前のブログの修正内容については、以下の記事をご覧ください。
