見出しタグ(hタグ)とは?意味と役割、SEO効果の高い書き方

  • 更新
見出しタグ(h1、h2、h3など)のSEO

HTMLはセクションやアウトラインなど文書の論理構造を伝えることに適した文法を持っています。中でも特徴的なのが、段階的な見出しレベルを示す<h1>〜<h6>タグ(見出しタグ)です。本稿はこの見出しタグについて、その役割やSEOに効果的な書き方を解説します。

見出しタグ(h1〜h6)とは

HTMLにおける見出しタグは、ページ内のセクションのタイトルを示すためのタグです1。HTML文書の見出しはニュースの見出しと同じように、それに続くコンテンツを説明します。また論文のアウトラインや目次と同じように、ページのアウトラインを構成します。このようにHTMLの見出しタグは、ページの論理構造を定義する役割を持っています。2

見出しタグは<h1>、<h2>、<h3>、<h4>、<h5>、<h6>で表現され、タグの名前に含まれる数字は見出しのレベルを示しています。見出しのレベルはセクションのレベルに対応しており、<h1>要素はトップレベルのセクション、<h2>要素はサブセクション、<h3>要素はサブサブセクションに対応します。3

見出しレベル、セクション、アウトラインの例

見出しタグの役割とは

見出しを使うことで文書内のセクションやコンテンツの階層構造が明確になり、読者や検索エンジンが文書の内容を理解しやすくなります。以下はウェブコンテント・アクセシビリティガイドライン(WCAG)2.14のセクション2.4.10「セクション見出し(レベルAAA)」の解説です。見出しが利用者の理解を助けることが示されています。

長い文書は多くの場合、さまざまな章に分けられ、章にはサブトピックがあり、サブトピックはさまざまなセクションに分けられ、セクションはパラグラフに分けられます。

そのようなセクションが存在する場合、それらを紹介する見出しが必要です。これにより、コンテンツの構成が明確に示され、コンテンツ内のナビゲーションが容易になり、コンテンツの理解を助ける精神的な「手がかり」が得られます。

Understanding Success Criterion 2.4.10: Section Headings | WAI | W3C5

見出しは読み手の理解を促進する重要な役割を果たします。まず、内容を一目で読み手に伝える役割を担っています。さらに、興味を引き、読み手が本文を読む気にさせる効果も持ちます。また、記事全体のストーリーを伝える役割も果たします。適切な見出しは読み手の理解を促進し、全容を把握しやすくし、興味を喚起します。6

適切な見出しが重要な役割を果たすのは、読み手に対してだけでなく、検索エンジンにとっても同様です。利用者の体験を優れたものにする取り組みはSEO効果を高めるからです。適切な見出しによって内容を理解しやすくし、全体を把握しやすくし、興味を喚起することでユーザーエクスペリエンスが向上すれば、ユーザー行動が良好なシグナルとなって検索エンジンにフィードバックされます。

内容を一目で読み手に伝える

見出しの役割の一つは、本文の内容を的確に表現した短い言葉で内容を一目で伝えることです。適切な見出しはそれに続くセクションの概要を端的に表現し、読み手が記事の主題や要点を素早く把握できるようにします。見出しは読み手にとって情報を選ぶ基準となるとともに、内容を理解するための指針となります。

内容を理解しやすくなるのは、人間の読者だけでなく検索エンジンも同様です。検索エンジンは見出しを重要なヒントにしてコンテンツの構造や内容を理解します。このため見出しはSEOにとっても重要です。いたずらにキーワードを詰め込むのではなく、続くセクションの内容を端的に表す文字列にするのが見出しタグのSEOのコツです。

全体のストーリーを伝える

見出しの役割の一つは、全体のストーリーを伝えることです。適切に構成された見出しは読み手のガイド役として、記事の流れや展開を示し、全体の概要を提供します。読み手は見出しを追っていくことで、記事の中でどのような話題が扱われているのか、どの順序で進んでいくのかを的確に把握することができます。

説明的な見出しが階層構造に沿って配置されていれば、検索エンジンもまたコンテンツの全体像を把握しやすくなります。話題やその展開、前提や結論やその根拠などが、見出しを追うだけである程度わかるようになっていれば、読み手だけでなく検索エンジンの理解も助けることにつながり、結果としてSEO効果を高めます。

興味を引き本文を読む気にさせる

見出しの役割の一つは、興味を引き本文を読む気にさせることです。魅力的で関心を引く見出しは、読み手の注意を引きつけ、続きを読む欲求を刺激します。どんなに素晴らしい内容でも、読み手が本文に進まなければその価値を提供することはできません。見出しはキャッチコピーのような役割を果たすこともできます。

読者の興味を喚起することは、滞在時間の延長のような良好なユーザー行動を引き出し、これがシグナルとなってSEO効果を高めます。適切に配置された見出しによって読者の注意や興味を維持し、読了して情報探索行動を完了してもらえれば、つまり検索意図を充足してもらえれば、それは強力にSEOを後押しします。

見出しタグの書き方

適切な見出しはページの読みやすさや読者の理解、アクセシビリティ、そしてSEOに影響を与えるため、注意深く作成することが重要です。見出しを適切に使って、ページの構造を明確にするとともにわかりやすく興味をひくものにし、読み手に良好な閲覧体験を提供しましょう。

見出しタグを階層的に使う

複数の見出しタグを使って階層を構成し、ページの構造を明確に示すようにします。ページ全体のタイトルとして<h1>タグを使用し、その下層のサブセクションに<h2>タグ、さらに細かい内容には<h3>タグや<h4>タグを使います。このようにアウトラインを作ることで、読み手や検索エンジンはページの内容を理解しやすくなります。7

見出しタグは常にアウトラインを意識して、文書の構造を表現するために使います。見出しタグはユーザーや検索エンジンが構造を理解しやすくすることが第一義であり、強調や装飾のためには使いません。強調の目的では<strong>タグや<em>タグを使い、目をひくビジュアル的な装飾が必要な場合には適切なタグにCSSを適用して装飾します。8

h1タグは1つだけ使う

先述したように<h1>タグはそのページのトップレベルのセクションを定義します。トップレベルのセクションがページ内に複数あれば、ユーザーも検索エンジンも混乱します。このため<h1>タグはページに1つだけか、少なくとも1つの<article>要素内では<h1>タグも1つだけ使用するようにします。<h1>タグにはタイトルタグと同じ文字列を使うことが推奨です。

HTMLの文法上は、<h1>タグの複数使用は許容されています。またGoogleなどの検索エンジンもこれを許容します。しかし文書のアウトライン構造を適切に保つというSEOやアクセシビリティの観点からは、トップレベルの見出しがページ内に複数個ある状態は好ましくありません。

要点を短くまとめる

Yahoo!ニュースの見出し文字数は、サービススタート当初は11文字で、2001年に半角スペース0.5文字を含む最大13.5文字になり、2021年に最大14.5文字となり、2022年には最大15.5文字となっています。これは見出しの内容について、認識する速さと理解の正確さのバランスをとりながら、データに基づいて決められているそうです。9

このことから、見出しの理想は「素早く認識できる」ことと「内容を正確に理解できる」ことだとわかります。読みやすく理解しやすい見出しはユーザーと検索エンジンを助けます。的確に要点をまとめて短く、しかも具体的に書くことで、読みやすく理解しやすい理想の見出しに近づけることができます。

興味をひく見出しにする

見出しを構造化して不要部分を読み飛ばせるようにし、ユーザーの流し読みをサポートするのは有効ですが、その一方で、目を留めて本文を読みたくなるような魅力もまた必要です。どんなに素晴らしい情報でも読んでもらえなければその価値は伝わりませんから、読んでもらうための工夫もまた重要なものです。

ユーザーの興味をひき、「そのセクションを熟読したい」または「その先を読みたい」と思わせることが必要です。そのときキーになるのがユーザーの検索意図です。ユーザーがそのページを訪れた目的に立ち返り、その目的を達成するために役立つ情報があることを、短い見出しの中で表現する工夫をしましょう。10

見出しにキーワードを入れる

SEOのターゲットキーワードだけではなく、そのセクションを理解するためのキーになる言葉を入れることが重要です。SEOのターゲットキーワードを入れ込むのに適切な場所はタイトルや本文など他の場所にあります。見出しで優先すべきは、そのセクションの理解を促進するとともに、ページ全体の中でのそのセクションの役割を示すことです。

2000年代前半までは見出しタグにSEOのキーワードを含めることは有効でしたが、現在では違います。むしろユーザーと検索エンジンがそのセクションの内容を理解しやすくなるように、そのセクションのキーワードを入れることがSEOにとって有効です。SEOのターゲットキーワードを詰め込むことは逆効果になり得ることに注意しましょう。

検索順位への影響

先述のように、見出しタグにSEOのターゲットキーワードを含めることによる直接的な効果はほとんどありません。現在ではユーザーに対するときと同様に、検索エンジンに対しても内容への理解を促進するのために使うことがベストプラクティスとされ、間接的にSEOにもプラスに働くと考えられています11

見出し構成の例。Wikipediaの「検索」のページから。

上の画像はWikipediaの「検索」のページ12の目次です。見出しの構成はアウトラインを示すことに特化しており、要点をまとめたり興味をひいたりする工夫はされていません。これはWikipediaでよく見かける形式ですが、このようにアウトラインを意識して見出しタグを階層的に使うことが現在のSEOにおける見出しの使い方では最重要となっています。

用語の説明

アウトライン

アウトラインとは、文書内のすべての見出しをツリー構造(木構造13)で表示したものです。アウトラインは、例えば目次を作成する際など、文書の概要を生成するために利用されます。

セクション

セクションとは、章、節、項のような「関連するトピックや考えを扱うコンテンツのまとまり」のことを言います。セクションは1つ以上のパラグラフで構成され、画像、表、リスト、サブセクションが含まれます。14

まとめ

人間のユーザーにとって読みやすく理解しやすい文書は、検索エンジンにとっても内容を理解しやすく、正確に評価することが可能になります。ユーザーにとっていいことは、検索エンジンにとってもいいことなのです。見出しの作成では、個々のセクションや全体のアウトラインを意識し、より理解しやすいように書いていきましょう。

SEOにおける見出しタグの適切な書き方は、単にキーワードを含めればよかった過去からは変わりました。現在の適切な書き方は、検索エンジンがコンテンツを理解しやすくすることです15。現在の検索エンジンにとって見出しタグは、ユーザーにとってそうであるのと同じように、コンテンツやコンテクストをより良く理解するための手がかりなのです。

脚注

  1. 4.3.11 Headings and outlines | HTML Standard ↩︎
  2. WebAIM: Semantic Structure: Regions, Headings, and Lists ↩︎
  3. 4.3.6 The h1, h2, h3, h4, h5, and h6 elements | HTML Standard ↩︎
  4. Web Content Accessibility Guidelines (WCAG) 2.1 ↩︎
  5. Understanding Success Criterion 2.4.10: Section Headings | WAI | W3C ↩︎
  6. 「説得できる文章・表現200の鉄則 第4版」永山 嘉昭ほか著、日経BP社出版局監修 ↩︎
  7. Web Accessibility Criteria – Headings and Titles | California State University, Northridge ↩︎
  8. 見出しタグを使用して重要なテキストを強調する | Google 公式 SEO スターター ガイド | Google 検索セントラル ↩︎
  9. 11→13.5→14.5→15.5 変わりゆく「ヤフトピ」見出しの文字数…最適な“タイトルの長さ”はあるのか | 神戸新聞NEXT ↩︎
  10. How To Use Header Tags: SEO Best Practices ↩︎
  11. English Google Webmaster Central office-hours from December 27, 2019 – YouTube ↩︎
  12. 検索 – Wikipedia ↩︎
  13. 木構造 (データ構造) – Wikipedia ↩︎
  14. Key Terms | Understanding Success Criterion 2.4.10: Section Headings | WAI | W3C ↩︎
  15. Google Explains How to Use Headings for SEO ↩︎