見出し1が複数ある
ページの最上位見出しはページ全体の内容を説明するものなので、通常、各ページには1つだけ設置します。Silktideは、最上位見出しが重複しているページを報告します。
では、最上位見出しは<h1>要素です。ページの見出しとして機能し、その下のコンテンツを<h2>から<h6>で構造化します。
<!-- 競合する最上位見出しが2つある -->
<h1>サービス</h1>
<h1>お問い合わせ</h1>
<!-- h1を1つにして、次のトピックにはh2を使用する -->
<h1>サービス</h1>
<h2>お問い合わせ</h2>
重要な理由
検索エンジンは、ページの内容や検索結果に表示する見出しを判断する際、<h1>を特に重視します。最上位見出しが複数あると、そのシグナルが分散し、検索結果でページのタイトルとして誤ったテキストが使用される可能性があります。
明確な<h1>を1つだけ設置することは、見出しを使ってページ内を移動することが多いの利用者にも役立ちます。最上位見出しが1つだけなら、ページの開始地点が明確になるためです。
修正方法
- ページ全体を説明する
<h1>を1つ残し、その他の見出しを<h2>(またはコンテンツ内での位置に合わせて、それより下位の見出し)に変更します。 - 大きな見出しとしてスタイル設定されているものの、ページの主なトピックではない要素(スローガンやプロモーションバナーなど)には、下位の見出しレベルを使用するか、スタイル設定した段落を使用します。
- テンプレートを確認します。サイトのロゴやセクションの見出し部分が、すべてのページで
<h1>に囲まれていることが、よくある原因です。
Silktideによるテスト方法
- ページのコンテンツを順番に確認し、
<h1>要素を探します。 - HTML5のセクショニング要素(
<section>、<article>、<aside>、<details>、<header>、<footer>、<nav>)をそれぞれ独立した範囲として扱います。それぞれの範囲内では、ページの他の部分とは独立して<h1>を1つ使用できます。 - 同じ範囲内で、最初の
<h1>の後に見つかった追加の<h1>をすべて問題として報告します。
トラブルシューティング
セクションごとにh1を1つ使用しています。これは誤りですか?
HTML5では、各セクショニング要素内に<h1>を1つ配置できます。Silktideもこのパターンを許容します。ただし、検索エンジンやは、セクション内の<h1>を入れ子になった見出しレベルとして確実に扱うわけではありません。そのため、ページ全体の<h1>を1つにし、<h2>から<h6>までのレベルを明示するほうが、より堅牢な選択です。