1ページ内にH1はいくつ使っても大丈夫なのか？

2016年12月30日カテゴリー : CSS コメント : 0

　かつては SEO にとって重要であった H1 タグですが、Google から「いくつ使っても検索順位には影響しない」との公式アナウンスがあったことから、以前ほど神経質になる必要はなくなったように思います。とはいったものの、訪問してくれるユーザーに伝えたい情報を知らせるのに便利なものであることに変わりはないので、どのように使ったらよいのかを考えてみたいと思います。

H1がいくつあってもSEOには影響しない

H1 タグを1ページのなかでいくつ使っても SEO 的には問題ない、という話は少し前から巷では広まっていました。これは Google のウェブマスター・トレンド・アナリストであるジョン・ミューラー氏の「見出しが正しく使われてなくても、Googleはそれが致命的な問題とは認識しないし、アルゴリズムによって順位を下げるという事もない」という発言から来ていると思われます。

当ブログの WordPress テーマは私が HTML をよくわかっていないときに自作したものなのですが、見出しの扱いがちょっとおかしかったのが気になっていたんですけど、これでほっといても問題ないな（開き直り

とはいえ、これから新しく Web デザインを行うのであれば、どのように H1 タグを使えばいいのか知っておいたほうがよいのではないでしょうか。

ユーザーに一番伝えたいことをH1で囲むべし

「H1 はいくつ使ってもよい」と言ったばかりなのですが、やはり H1 は1ページにひとつが理想なのではないかというのが私の考えです。それもそのページで一番伝えたいことを囲むのがよい。

例えばブログの記事であれば、記事タイトルを H1 で囲むのが効果的だと思います。SEO 的にも重要がキーワードが入っているでしょうし、訪問してくれたユーザーに一番伝えたいのもタイトルであるはずです。

では、ブログや Web サイトのトップページの場合、なにを一番に伝えればよいのか。

ロゴやトップ画像をH1で囲んでいる例は多い

ブログや Web サイトのトップページには記事のときのようなタイトルがないため、どこを H1 タグで囲めばよいか悩むかもしれません。ここで、訪問してくれたユーザーの一番目を引きやすいロゴやトップ画像を囲んでしまおうと考える人が多いのかも。

実際に、Google の検索結果上位にランキングされているブログや Web サイトでもそのようにしているところはたくさんあります。

だけど、ここで「一番伝えたいことを H1 で囲む」という原則を思い出してください。自分のブログや Web サイトがイラストや写真サイトであれば問題ないのかもしれませんが、そうでなかった場合に一番伝えたいことはロゴや画像ではないはずです。

かつてはtext-indent:-9999px;でテキストを飛ばしていた

H1 タグが SEO で重要であるという意見が主流だった頃、「テキストを飛ばす」という方法が常套手段として広まっていました。Google エンジンは画像を読み取ることができず、SEO 対策はあくまでテキストで行うのが基本だったためです。

例えば当ブログのトップ画像ですが、これは無料の写真素材を適度な大きさに切り抜いて、その上に GIMP を使って「Naokix.net」と描画したものです。

この画像を H1 で囲んでいるのですが、Google エンジンは画像のなかに表示されている文字列までは読み取れないため、このページで一番伝えたいことがトップ画像そのものになってしまっています。

そこで、以前では次のような対策をとっていました。

#title {
    background-image: url("./images/logo.jpg");
    text-indent: -9999px;
}

#title {

background-image: url("./images/logo.jpg");

text-indent: -9999px;

}

これは背景に画像を指定し、本来であれば表示されるテキストに対して極端なインデントを指定することでテキストを表示させなくする手法です。ここにサイトタイトルなどを文字にしておけば Google エンジンが読み込んでくれるので、SEO にも効果があるというわけです。

今はやっちゃダメ

極端なインデントを無理矢理に指定するためブラウザの表示に負担がかかることと、Google エンジンに隠しテキストと認識されて検索順位に影響が出る可能性があるため、この方法は現在使うことができません。

そこで、img タグの alt 属性を利用します。

<h1>
    <a href="#">
        <img src="./images/logo.jpg" alt="WordPressの悩みを解決！Naokix.net">
    </a>
</h1>

<h1>

</a>

</h1>

WordPress の場合、ブログトップとなるインデックスページと記事ごとのテンプレートが別々になっているため、ブログトップのインデックスではロゴを H1 で囲み img タグの alt 属性にテキストを記述して記事タイトルを H2 に、各エントリーではロゴを div や p にして記事タイトルを H1 で囲むようにすればいいかと思います。