見出しタグ
見出しタグは、ページ内容のタイトルや階層構造を示すHTML要素 <h1> から <h6> のいずれかです。可読性とアクセシビリティを向上させ、検索エンジンがページのトピックや構成を理解するのに役立ちます。
Heading tags は、<h1>から<h6>までの6つのHTMLタイトル要素であり、コンテンツのトピックと階層を示します。
ページの主要トピックは、単一の<h1>によって示し、その下のセクションは <h2>、その次は <h3> というように、階層を飛ばさずに論理的に配置するべきです。
Google は、見出しの意味的な順序はランキングにほとんど影響しないこと、またページに <h1> が複数あっても問題ないことを明言しています。
見出しの階層は、ページを素早く移動するスクリーンリーダー利用者にとって重要なため、アクセシビリティの観点から正しい順序を保つことが大切です。
文字を大きく見せるためだけに heading tags を使うのは誤用です。見た目のサイズは CSS で制御すべきです。
概要
Heading tags とは、HTML においてコンテンツのタイトルと階層構造を表す<h1>–<h6>要素を指します。“h” は heading の略で、数字が小さいほど上位レベルを示します。<h1> は最も重要な最上位タイトルであり、<h6> は最下位です。見出しは、文書を人が読みやすいまとまりに分けるだけでなく、スクリーンリーダーなどの支援技術や検索エンジンがコンテンツの構造や主題を把握するための意味的な目印としても機能します。
MDN のドキュメントによると、見出し要素は既定でブロックレベルのボックスを生成し、ページのタイトル階層を表現するために設計されています。フォントの太さやサイズを調整するための要素ではありません。
階層とベストプラクティス
見出しは文書の目次のように機能します。ページ全体を表すタイトルには単一の <h1> を置き、その下位セクションは <h2>、さらにその内側の細かな項目は <h3> で示し、論理的な深さに沿って下っていきます。基本原則は次のようにまとめられます。
ページのトピックは単一の <h1> で表す。文書の <title> と同様に、<h1> はページ全体の内容を要約します。
レベルを飛ばさない。<h2> からいきなり <h4> に飛ばず、途中で <h3> を挟みます。1つのレベルを飛ばすと、スクリーンリーダー利用者には中間レベルが欠けているように見えます。
各見出しは、そのセクションを正確に反映するようにし、関連キーワードは詰め込みすぎず、自然に含めてください。
視覚的なサイズ調整にはCSSを使用してください。文字を大きく見せるためだけに見出しタグを乱用しないでください。
<h1>見出しタグ完全ガイド</h1>
<h2>見出しタグとは何か</h2>
<h2>階層構造</h2>
<h3>h1の役割</h3>
<h3>h2からh6の役割</h3>
<h2>SEOとアクセシビリティ</h2>根拠
見出しに関する2つのよくある誤解は、各ソースによって明確にされています。
意味論的な順序とランキング。2024年のSEO Office Hoursで、GoogleのGary Illyes氏は、見出しの意味論的な順序はアクセシビリティ、特にスクリーンリーダーにとって非常に有用だが、Googleの検索ランキングアルゴリズムへの影響はほとんどないと述べました。Search Engine Journalが要約しているように、見出しの順序を修正してもランキングは変わりません。これは「順序は重要ではないので、見出しは好きなように使ってよい」という意味ではありません。むしろ、アクセシビリティと読みやすさのために、適切な順序は依然として推奨されるということです。
複数の<h1>は許可される。Googleは、ページ内に<h1>が複数あっても問題なく、Web上では一般的なパターンであると説明しています。SEO監査一方で、Ahrefs、Semrush、Screaming Frogなどのツールは「複数のH1」を問題としてフラグ付けしますが、これはGoogleが実際に許可しているかどうかではなく、ベストプラクティス基準に照らしているためです。要するに、Googleの基準では複数の<h1>タグはペナルティ要因ではありませんが、明確なコンテンツ構造のためには、1ページにつき1つの<h1>にしておく方が安全です。
実装チェックリスト
各ページには、コアとなるトピックを示す明確な<h1>を1つだけ設定してください。
セクション構造は、レベルを飛ばさずに<h2> → <h3> → <h4>の順で組み立ててください。
各見出しが、その直下の本文内容を正確に要約していることを確認してください。
タイトルは簡潔に保ち（おおむね4〜8語）、関連キーワードを自然に含めてください。
フォントサイズと太さの調整は、見出しタグではなくCSSで行ってください。
スクリーンリーダーで見出しだけをたどったときに、ページ構造が自然に理解できることを確認してください。