恐らくウェブ業界でない人の間ですら知られているもっとも有名な HTML 要素といえば、見出し要素、つまり h1 ～ h6 要素でしょう。とりわけ h1 要素は SEO に密接に関わっており、サイト運営者にとっては気になって仕方がない要素の一つでしょう。
SEO の話はネットで星の数ほど語られていますが、ここでは HTML 仕様の視点から見出し要素の詳細を紹介し、そして、特に SEO で注目される h1 要素にまつわる疑問を考察していきましょう。
見出し要素とは
もう説明する必要もありませんが、h1 ～ h6 要素は、セクションの見出しのことですね。見出しを表す要素は、h1 ～ h6 要素のほかには hgroup 要素があります。
これら見出し要素にはランクがあります。h1 要素が最も高いランクであり、h6 要素が最も低いランクです。このランクとは、文書構造の深さのことです。
<body>
<h1>ページタイトル</h1>
<h2>見出し 1</h2>
<p>…<p>
<h2>見出し 2</h2>
<p>…</p>
<h3>見出し 2.1</h3>
<p>…</p>
<h3>見出し 2.2</h3>
<p>…</p>
<h4>見出し 2.2.1</h4>
<p>…</p>
<h2>見出し 3</h3>
<p>…</p>
</body>
上記のマークアップの場合、もし目次を作るなら次のような階層構造になるはずです。
ページタイトル
見出し 1
見出し 2
見出し 2.1
見出し 2.2
見出し 2.2.1
見出し3
このように、見出し要素のランクが階層位置に一致します。前述のマークアップの入れ子構造が文書構造と一致しないため、分かりずらいですね。section 要素を使ってマークアップすると、記述量が増えますが、マークアップ構造と文書構造が一致します。
<body>
<h1>ページタイトル</h1>
<section>
<h2>見出し 1</h2>
<p>…<p>
</section>
<section>
<h2>見出し 2</h2>
<p>…</p>
<section>
<h3>見出し 2.1</h3>
<p>…</p>
</section>
<section>
<h3>見出し 2.2</h3>
<p>…</p>
<section>
<h4>見出し 2.2.1</h4>
<p>…</p>
</section>
</section>
</section>
<section>
<h2>見出し 3</h3>
<p>…</p>
</section>
</body>
すべて h1 要素でマークアップしても良いの？
上記のマークアップであれば、すべての見出しを h1 要素でマークアップすることも可能です。
<body>
<h1>ページタイトル</h1>
<section>
<h1>見出し 1</h1>
<p>…<p>
</section>
<section>
<h1>見出し 2</h1>
<p>…</p>
<section>
<h1>見出し 2.1</h1>
<p>…</p>
</section>
<section>
<h1>見出し 2.2</h1>
<p>…</p>
<section>
<h1>見出し 2.2.1</h1>
<p>…</p>
</section>
</section>
</section>
<section>
<h1>見出し 3</h1>
<p>…</p>
</section>
</body>
section 要素を使って構造化しているなら、h1 要素ではなく、h2 要素や h3 要素でも良いのではないかと思われるでしょう。仕様上、それでも文法エラーではありません。ただし、もしすべて同じ見出し要素を使うなら、h1 要素を使うことが強く推奨されています。
とはいえ、筆者はランクに応じた見出し要素を適切に使う方が良いと思っています。このあたりの詳細は「section 要素を見つめなおす」でも触れていますので、合わせてご覧ください。
階層を無視した見出し要素の使い方
ちなみに、 section 要素を使って構造化しているなら、階層位置に関係がない見出し要素を使っても、セマンティクス的には同じになります。
<body>
<h4>ページタイトル</h4>
<section>
<h2>見出し 1</h2>
<p>…<p>
</section>
<section>
<h6>見出し 2</h6>
<p>…</p>
<section>
<h1>見出し 2.1</h1>
<p>…</p>
</section>
<section>
<h3>見出し 2.2</h3>
<p>…</p>
<section>
<h2>見出し 2.2.1</h2>
<p>…</p>
</section>
</section>
</section>
<section>
<h5>見出し 3</h5>
<p>…</p>
</section>
</body>
もう見出し要素の使い方が無茶苦茶です。でも文法上、セマンティクス上、いずれも問題はありません。ただし、これが運用上問題ないかというと、かなり微妙なのではないでしょうか。もちろん、SEO 的にも微妙ですよね。文法上問題なくても避けるべきでしょう。
トップページと下部ページの h1 要素の扱い
ウェブサイトのトップページでは、サイト名称を h1 要素でマークアップするのは自然です。では、下部ページはどうでしょう。例えばプロフィールのページを考えてみましょう。このページでは h1 要素にはサイト名称を入れますか？それとも「 プロフィール 」を入れますか？
下部ページはウェブサイトという大枠の中の 1 部なわけですから、すべてのページの h1 要素にはサイト名称を入れ、下部ページの見出しは h2 要素を使うべき、と思う人はいるでしょう。中には全ページをテンプレート化していて、自動的にページヘッダーのサイト名称が h1 要素でマークアップされてしまっているサイトも存在するかもしれません。ただ、現在、この考え方は少数派になった感じがします。
一方で、下部ページはサイトそのものを表しているわけではありませんから、h1 要素でページの見出しをマークアップするべきと考える人もいます。これは現在の主流の考え方ではないでしょうか。ただし、その場合、サイト名称は何でマークアップすればよいのか悩みます。
では、どれが正しいのでしょうか。結論から言うと、HTML 仕様で決められているわけではありませんので、あなた次第となります。HTML の文法上はどちらでも構わないということです。
では SEO 的にはどうなのでしょう。それは Google 様のみぞ知る世界ですので誰にも分かりません。ただ、SEO を研究されている方々のブログには、さまざまな検証結果が公開されていますので参考にしてみるのも良いでしょう。しかし、これは Google 様のお気持ち次第、明日には Google 様の気が変わっているかもしれません。
では、どうすれば良いのかもどかしいですよね。ここからはあくまでも筆者の意見ですので、ご参考までに読んでください。
結論から申し上げますと、トップページの h1 要素にはサイト名称を、下部ページの h1 要素にはページの見出し（タイトル）を、下部ページのサイト名称はどうでも良い、と考えています。実際に多くのサイトがそうしている感じがします。
下部ページのサイト名称はどうでも良いと言われても困りますよね。具体的には h1 ～ h6 要素ではマークアップしないということです。div 要素でも span 要素でも何でも良いのではないでしょうか。
なぜそう考えるのかというと、いまどきトップページからわざわざリンクをたどって下部ページにたどり着く人は少ないですよね。ほとんどは Google の検索結果からトップページを経由せずに下部ページにアクセスするのではないでしょうか。そのとき、読者にとってサイト名称はまったく重要ではないはずです。読者はそのサイトではなく、そのページに書かれていることに興味があるから訪問しているわけです。もし、そのページの主題がサイト名称だと、おかしくないでしょうか？
下部ページでも h1 要素にサイト名称を入れるべきと考えるのは、どちらかというと提供者論理のような感じがします。筆者もサイト運営者の端くれですので、気持ちは分かるのですけどね…。でもやはりユーザー視点ではない気がします。Google は常にユーザー視点での利便性をウェブサイトに求めていることを考えれば、SEO 的にこれで不利になることはないと思います。
h1 要素と title 要素の内容は同じでなければいけない？
h1 要素と title 要素に入れる見出しは同じが良いのでしょうか？それとも違っていても良いのでしょうか？初心者のうちは、これに悩む人がそれなりにいるのではないでしょうか。
結論から言うと、内容は同じであるべきですが、一字一句同じである必要ないと思います。実際には、title 要素には「ページタイトル | サイト名称」のように記載することが推奨されることが多いのではないでしょうか。その理由は、それぞれの要素の用途を考えると分かりやすいです。
h1 要素は、ページにアクセスした訪問者が見るものですが、あくまでもページの中に表示されます。h1 要素に関して言うと、これ以上でもこれ以下でもありません。
一方、title 要素はページの中には表示されませんが、気づかないところで様々な場所で使われます。まず誰もが気付く場所を挙げるなら、ブラウザーのタブの部分ですよね。ただし、通常は途中で切られてしまい、あまり役に立ちません。これはタイトルをユーザーに読ませるためというよりかは、たくさん開いてしまったタブをユーザーに区別させるために使われるものです。
これを見ると、title 要素の先頭にサイト名称を入れないほうが良いということが良くわかりますよね。もしサイト名称が先に記述されていたら、すべてのタブが同じに見えてしまい区別できなくなります。
title 要素の内容は履歴にも使われます。
title 要素の内容はブラウザーのブックマークに使われます。皆さんもブックマークは良く使うと思いますが、どんどんたまっていきますよね。そういう状況で、title 要素にはどのような文言が適しているでしょうか？おそらく、ページタイトルに加えてサイト名称も記載されている方が便利ではないでしょうか。通常、ブックマークのリストは様々なウェブサイトのページのごった煮状態です。もし複数のページが同じタイトルでブックマークに並んでいたら、区別できません。そこにウェブサイトの名称も添えられていると、他と区別できて便利になります。
最後に、title 要素の用途としてサイト運営者なら最も気にすることは、Google などの検索エンジンの検索結果ですね。これは前述のブックマークと状況は似ています。様々なウェブサイトのページが列挙されます。ページタイトルの後にサイト名称も添えられていた方が、見る側は選択の判断材料にもなりますので、便利になります。
まとめ
どうしても見出し要素の話題となると、SEO は切っても切り離せません。しかし、気まぐれな Google 様がどう考えているのかを推測するのは不毛です。とにかくユーザーの利便性に集中して判断するのが長い目で見て良いはずです。この記事でも触れたような慣例に従っていれば、少なくとも不利になることはないはずです。
まったく流行っていないブログを運営している筆者が言っても説得力はありませんが、検索エンジン対策はほどほどに、コンテンツの充実やユーザー利便性に時間を費やしたいですね。そうすればいつか Google 様も分かってくださると信じて終わりにしたいと思います。最後まで読んでくださりありがとうございました。それでは次回の記事までごきげんよう。
