[2023-08-22 更新]
恐らくウェブ業界でない人の間ですら知られているもっとも有名な HTML 要素といえば、見出し要素、つまり h1 ～ h6 要素でしょう。とりわけ h1 要素は SEO に密接に関わっており、サイト運営者にとっては気になって仕方がない要素の一つでしょう。
SEO の話はネットで星の数ほど語られていますが、ここでは HTML 仕様の視点から見出し要素の詳細を紹介し、そして、特に SEO で注目される h1 要素にまつわる疑問を考察していきましょう。
見出し要素とは
もう説明する必要もありませんが、h1 ～ h6 要素は、セクションの見出しのことですね。これら見出し要素の数字を見出しレベルと呼び、セクションの深さを表します。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 要素を使ってマークアップすると、記述量が増えますが、マークアップの深さと文書構造が一致します。HTML ソースコードが読みやすくなるので、個人的にはこのマークアップを好んで使います。
<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 要素でマークアップしても良いの？
実は、以前の HTML 仕様の場合、上記のマークアップであれば、すべての見出しを 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>
しかし、2022 年 7 月の WHATWG HTML 仕様のアップデートにより、上記マークアップは文法エラーになります。section 要素でセクションの深さを明示的にマークアップしたとしても、セクションの深さに合わせた見出し要素を使わなければいけません。
トップページと下部ページの 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 様も分かってくださると信じて終わりにしたいと思います。最後まで読んでくださりありがとうございました。それでは次回の記事までごきげんよう。
