前提
HTML5では見出しタグ(h1-h6)のルールが変わった。
W3Cは次のように書いている。
それぞれの文書のアウトライン（その見出しとセクションの構造）が関係する限りにおいて、次の2つの断片は、セマンティックに等価である：
<body>
<h1>Let's call it a draw(ing surface)</h1>
<h2>Diving in</h2>
<h2>Simple shapes</h2>
<h2>Canvas coordinates</h2>
<h3>Canvas coordinates diagram</h3>
<h2>Paths</h2>
</body>
<body>
<h1>Let's call it a draw(ing surface)</h1>
<section>
<h1>Diving in</h1>
</section>
<section>
<h1>Simple shapes</h1>
</section>
<section>
<h1>Canvas coordinates</h1>
<section>
<h1>Canvas coordinates diagram</h1>
</section>
</section>
<section>
<h1>Paths</h1>
</section>
</body>
著者は、その簡潔さのために前者のスタイルを好むかもしれないし、大量の編集を目の前にして利便性のために後者のスタイルを好むかもしれない。どちらが純粋に最良なのかは、オーサリングスタイルの好みの問題である。
話をわかりやすくするため、ここでは、前者のスタイルで話を進める。
後者のスタイルでも、結局は<h1>Diving in</h1>部分はh2と同じなので。
結論
結論といっても、個人的な意見だけれど、HTML5ではh1タグは次のルールで使うべきだと思う。
- 1つの画面にh1は1つにする（前提に注意）
- ロゴをh1にしていいのは、ロゴをユーザーにはじめに伝えたい場合だけにする（例えば、官公庁のサイトで、常にA市であることをユーザーに確実に伝えたい場合）
- トップ画面だけロゴをh1、その他はロゴ以外をh1にしてもいいが、トップ画面でユーザーに伝えたいのが本当にロゴのときだけにする
- 画像をh1にしてもいいが、ユーザーにはじめに伝えたいのが本当にその画像のときだけにする
- 画像をh1にする場合は、CSSのテクニックを使わず、普通にimgタグにしてalt属性を適切に設定する
なぜ1つの画面にh1は1つにするべきなのか？
HTML5の前までは、h1は1画面に1つというのはよく知られていた。
その画面全体の見出しを示すことによってユーザーに正しく情報を伝えるためであり、SEO対策のためだ。
HTML5になってもそれは本来同じはずなので、HTML5でもh1は1画面に1つがよい（前提に注意）。
ロゴがh1になっているのを直せない場合は？
その場合は、h2からはじめればよい。
よく考えてほしい。
<body>
<header>
<h1><img src="logo.png" alt="logo"></h1>
...
</header>
<h1>見出し</h1>
...
</body>
このような構造になっているとき、ロゴと見出しは同格ということになる。
本当にロゴとその見出しは同格なのか？
ロゴはサイト全体を包含しているはずだ。
ロゴと同格の見出しなんてないはずだ。
ちなみに、SEO対策とかいう人がいるが効果はないだろう。
h1にキーワードを埋め込むことよりも、h1をユーザー目線で設定して、ユーザーに適切な情報を与えることでユーザーを捕まえることがSEO対策には重要だ。
（当たり前のことだけど）
参考：In 2014, How Important is an H1 Tag for SEO? | SEJ
ロゴをh1にしてはいけないの？
別にかまわない。
ただ、本当にロゴがユーザーにはじめに伝えたいことならば。
ユーザーに、3秒だけこの画面のことを伝えられるとしたら、何を伝えるだろうか？
それが、ロゴならば、ロゴをh1にしていい。
そうでなければ、ロゴをh1にすべきではない。
例えば、官公庁で、「このサイトはちゃんとA市ですよ」と伝えることが重要ならばロゴをh1にしていいだろう。
他にも、Appleみたいに、Appleだったら何でも好きという人がたくさんいるならその場合も選択肢としてあり得る。
トップ画面だけロゴをh1にしたいのだけど？
別にかまわない。
ただ、本当にトップ画面でユーザーに伝えたいことがロゴなのであれば。
画像をh1にしてもいいの？
まず、本当にユーザーにはじめに伝えたいのがその画像なのかということだ。
もし、そうなら色々な議論があるけど、かまわないと思う。
h1の中を画像にする方法は何がベスト？
下のリンク先のようにimgを使わず、CSSで画像化する方法もあるけど、気にしすぎだと思う。
Googleもimgがh1になっているページがあるし、普通にimgタグを使えばいい。
Replacing H1 text with a logo image: best method for SEO and accessibility?
ただし、きちんとalt属性を設定する必要がある。
重要な名前、コンテンツ、リンクを表示するときは、画像ではなくテキストを使用します。Google のクローラでは、画像に含まれるテキストは認識されません。テキスト コンテンツの代わりに画像を使用する必要がある場合は、ALT 属性を使用して簡単な説明テキストを組み込みます。
ちなみに、h1の中のテキストを非表示したりするのはよくない。
Hiding text or links in your content to manipulate Google’s search rankings can be seen as deceptive and is a violation of Google’s Webmaster Guidelines. Text (such as excessive keywords) can be hidden in several ways, including:
- Using white text on a white background
- Locating text behind an image
- Using CSS to position text off-screen
- Setting the font size to 0
- Hiding a link by only linking one small character—for example, a * hyphen in the middle of a paragraph
h1を正しく使うときに考えるとよいこと
アクセシビリティ対策を何度もやってきて、実際に目が不自由な方にテストをしてもらったこともある。
そのときに、目の不自由な方は見出しジャンプ機能を使いこなしていた。
HTML5 Outlinerなんかをつかって、アウトラインをみてみる。
そして、自分が目が不自由だったとして、見出しジャンプで画面全体のことがよくわかるか（画像はaltが読まれる前提で）を考えてみるといいと思う。
文法を正しく使うことは大前提として、ユーザーに素早くその画面の情報を伝えられるか、そのために有効にh1を使えているかが一番重要。
それを無視して、変なテクニックを適用したり、自社の事情で変なルールにしてしまうのは絶対にダメだと思う。