h1タグはSEOにおいて重要な意味があるといわれています。しかし、具体的に、どの程度のSEO効果が期待できるのでしょうか。そもそもh1タグを意識せずに記事をアップしているサイト運営者も多く、h1タグの重要性が広く理解されているとは言い難い状況です。今回は、h1タグの基礎知識から設定方法、注意点を解説し、h1タグの活用例も紹介します。
h1タグとは
hタグはコンテンツを階層的に構築するのに使用するものです。hタグにはh1からh6までの6種類がありますが、h1タグにはどのような機能が与えられているのでしょうか。ここでは、h1タグの役割のほか、適切な記述方法やタイトルタグとの違いを説明します。
h1タグの役割
h1タグは、そのWebページのコンテンツを端的に表現するHTMLタグです。hタグは見出し(heading)を表しますが、数字が小さいものほど重要度が高いことを意味します。従って、h1が記事内の最上位となる見出しであり、すべてのhタグの中で最も重要なテキストであると検索エンジンから見なされます。Web記事においては、h1タグにタイトル(表題)と同一のテキストを設定するケースが多いようです。
h1タグの適切な記述方法
h1タグは、<h1>と</h1>でh1見出しを挟むように記述します。
たとえば、この記事の場合は以下のようになります。
h1タグは、ユーザーや検索エンジンが理解・認識しやすい文字数にすることが大切です。タイトルタグと一致させる場合は、検索結果である程度表示される30文字前後に収めることをおすすめします。h1タグに設定できる文字数に制限はありませんが、検索結果上のタイトル表示は30文字程度で途切れてしまうためです。
h1タグとタイトルタグの違い
上述した通り、h1タグにはタイトルタグ(title)と同一のテキストを設定するのが一般的です。このことから、両者に大きな違いはないように思われていますが両者には以下のような相違点があります。
- h1タグは記事ページ内に表示され、タイトルタグはブラウザのタイトルバーに表示される
- 検索結果で表示されるのはタイトルタグ(h1タグが採用されるケースもある)
- h1タグはhタグであり、タイトルタグはメタタグである(記述場所も異なる)
h1タグとタイトルタグの表示場所、役割記述場所をまとめると以下の通りです。
h1タグ | タイトルタグ | |
表示場所 | 記事ページ内 (検索結果ページ) |
ブラウザのタイトルバー 検索結果ページ |
役割 | 記事階層の最上位の見出し | 記事の表題を示すメタ情報 |
記述場所 | HTMLのbodyタグ内 | HTMLのheadタグ内 |
h1タグのSEO効果
結論から言うと、h1タグに直接的なSEO効果があるわけではありません。しかし、検索エンジンやユーザーに情報を提供するタグの一つですから、SEOにおける重要性は小さくないといえるでしょう。SEOを考慮してh1タグを書くことで、コンテンツの価値を高めることにもつながります
SEOにおけるh1タグの重要性
h1タグは検索エンジンがWebサイトの内容を把握するために用いられます。h1タグはhタグの最上位であり、該当記事の要約文にもなることから、検索エンジンが優先して取得・評価する情報です。h1タグに適切なテキストを設定しておけば、検索エンジンのクローラーがコンテンツのテーマを理解しやすくなります。
Google Search Central Blogにおいても、以下のような記述があります。
「The lower the number on your heading tag, the more important the text, in the eyes of Google and your users.
引用:Holiday source code maintenance: Website clinic for non-profits
「見出しタグの数字が小さいほど、Googleとユーザーの目には重要なテキストとなる」と言及しています。つまり、記事の内容に沿ったh1タグを記述すれば適正なSEO評価につながり、結果として検索順位の向上が期待できます。
また、h1タグによってユーザーがコンテンツの内容を正しく予想できれば検索結果ページでのクリック率が向上します。実際にユーザーが求めている記事内容であるなら、ページ滞在率も上昇するでしょう。このように間接的であるとはいえ、h1タグがSEOに与える影響を見過ごすことはできません。
SEOを考慮したh1タグの書き方
h1タグに、記事が想定する対策キーワードを含めるのは大前提です。ただし、意味をなさないような形で詰め込むのは逆効果となります。どのようなコンテンツなのか読者に伝わるよう、簡潔かつ魅力的な文言で記述するのが望ましいでしょう。
さらに、hタグは入れ子構造になっているのが基本です。h1タグが記事内全てのh2をまとめる形になっていなければなりません。hタグのテキストや並びが不適切で、文章構造が理解しにくいものになってしまうと、検索エンジンがコンテンツを適正に評価できなくなるためです。
<hタグの使い方>
- h1からh6までサポートされていて、6階層の文章構造を作れる
- ページの最も大きな見出しにh1を付与し、以降h2、h3と段階的に小さいhタグを付けていく
- 厳密な定義はないが、以下のようにサイト内で運用ルールを統一するのが一般的
<hタグの運用ルールの例>
- h1タグ = 記事見出し(記事タイトルと同等)
- h2タグ = 大見出し
- h3タグ = 中見出し
- h4タグ = 小見出し
- h5タグ、h6タグ = 小見出し以下の見出し
h1タグの設定方法
h1タグはHTMLタグとして記述しますが、正しく設定しなければ機能しない可能性があります。ここでは、h1タグを記述する場所のほか、画像の使用や文字数の最適化といったh1の設定方法について解説します。
h1タグを適切な場所に記述する
h1タグはHTMLの本文部分(bodyタグ内)に記述します。通常、記述する場所は記事本文の冒頭です。メタタグであるタイトルタグと混同して、headタグ内にh1タグを書かないように注意しましょう。また、hタグ同士は入れ子構造を守る必要があります。h1タグがh2以下のhタグ内に含まれないよう、順番通りに記述されているかチェックしてください。
CMSの中には記事タイトルが自動的にh1となり、自分で本文内にh1タグを設定する必要がないものも多くあります。
h1タグに画像を使用する
h1タグには画像を使用することもできます。以下のようにalt属性を付与して、画像の説明を添えます。
<h1タグに画像を使用する場合の記述例>
検索エンジンは画像そのものを認識できないとされているため、文字情報であるalt属性で内容を伝えることが重要です。同じ画像をページ間で使い回さないこと、テキストと無関係な画像にしないことにも留意してください。SEOで不利になる恐れがあります。
h1タグの活用ポイント
h1タグを上手に活用すれば、記事の見やすさや読みやすさ、分かりやすさが向上します。特に以下のポイントを重視するとよいでしょう。
h1タグは画像よりテキストがベター
h1タグに画像を使用しても構いませんが、hタグが記事の構造を表すことを考えれば、テキストにしたほうが有利です。最上部にh1テキストがあった方がタイトルとして認識しやすく、記事のテーマもすぐに理解できます。
h1タグに画像を設定する際は、必ずimgタグのalt属性に適切な代替テキストを設定してください。画像に文字を入れたしても、alt属性が空白のままでは検索エンジンに正しく伝わりません。altタグのテキストに対策キーワードを含めると、なおよいでしょう。
h1タグとタイトルタグは同じにする
検索結果では、基本的にタイトルタグが表示されます。ただし、h1タグに書き換えられるケースもあるため、どちらが表示されてもよいようにh1タグとタイトルタグを同じテキストにしておくのがおすすめです。
h1タグとタイトルタグが異なっていると、検索エンジンがアップデートされたときなどに検索結果での見え方が変わる可能性があり、ユーザーを混乱させてしまい流入数が減少するリスクがあります。
h1タグは大きなフォントサイズで目立たせる
h1タグを見た目にも重要な要素と分かるように、大きなフォントサイズで記述します。記事の先頭に配置して、最大サイズで目立たせるのが基本です。
GoogleGoogle 検索セントラルでも以下のように言及されています。
大見出しは、ページ上の他のテキストと区別でき、ページで最も高い視認性を持つ見出しとして目を引くようにすることを検討してください(例: フォントを大きくする、タイトルのテキストをページで最初に目立つ <h1> 要素に配置する)。
hタグのフォントサイズはCSSで設定しておきましょう。
おすすめできないh1タグの使い方
h1タグはタイトルタグと異なる運用も可能ですが、SEOやユーザビリティの面から適切でない使い方があります。もし、以下で挙げられている使い方をしているなら、速やかに修正することをおすすめします。
h1タグをロゴとして使用している
まず、デザインにこだわったコーポレートサイトなどで、企業ロゴにh1タグを使用しているケースです。h1タグに画像を使用すること自体は問題ありませんが、企業ロゴとして表示すると全記事のh1が同じになってしまいます。h1の重複はSEO上のマイナスになり得るため、修正が必要です。
h1タグは記事ごとに固有のものを設定し、検索エンジンに評価されるようにしましょう。また、h1タグに画像を設定する場合も、それぞれに固有のalt属性を付与することをおすすめします。
1ページに複数のh1タグが配置されている
h1は複数あっても、あるいはゼロでも問題ありません。この件に関してはYouTubeに投稿されている「English Google Webmaster Central office-hours from September 27, 2019」で言及されています。
しかし、h1の数が直接的にSEOに影響しないとされていても、不必要に複数のh1を並べて、検索エンジンやユーザーを混乱させることにメリットはありません。理解しやすい構造になっているかどうかは、特に検索エンジンがサイトを適切に評価する上で重要です。特殊な記事構造でない限り、コンテンツをまとめるh1タグは1つにすることをおすすめします。
適切な階層構造になっていない
hタグはコンテンツの構造を分かりやすく表すものです。h2以降は、階層構造が守られていれば複数あっても問題ないですが、
という基本的な入れ子構造が崩れると、検索エンジンとユーザーの双方にとって、分かりにくい文章となってしまいます。整然とした階層構造となるように記事を作成してください。
参考例として、本記事の冒頭部分の階層構造を示します。
<h2>h1タグとは</h2>
<h3>h1タグの役割</h3>
<h3>h1タグの適切な記述方法</h3>
<h3>h1タグとタイトルタグの違い</h3>
<h2>h1タグのSEO効果</h2>
<h3>SEOにおけるh1タグの重要性</h3>
<h3>SEOを考慮したh1タグの書き方</h3>
<h2>h1タグの設定方法</h2>
<h3>h1タグを適切な場所に記述する</h3>
<h3>h1タグに画像を使用する</h3>
・
・
・
アクセシビリティが考慮されていない
アクセシビリティを考慮したhタグの設定が重要です。アクセシビリティとは、すべてのユーザーが個々の利用環境等にかかわらず、Webサイトのコンテンツや機能を利用できることを意味します。
h1タグを正しく活用することで、視覚障害を持つユーザーがスクリーンリーダーを使用する際に、ページの構造を理解しやすくなります。画像を含むhタグには必ずalt属性を設定する、スタイル変更では構造を変えないようにCSSで行う、といった対応も必要です。アクセシビリティはSEOの観点からも重視されています。
アクセシビリティについては、以下の記事もご参考ください。
・Webマーケティングに効くSEOとアクセシビリティ
h1タグの活用例
h1タグの活用ポイントは以下の5つです。SEOでは、特に1~3を意識するとよいでしょう。
- 対策キーワードをテキスト前方に含める
- 文字数は30文字前後にする
- サジェストワード・関連ワードも盛り込む
- 記事を読むメリットを示す
- 分かりやすくキャッチーな表現にする
h1タグの適切な記述方法を知りたい人のために、実際の活用例をいくつか紹介します。
・コーポレートサイトの例:SEデザイン
・オウンドメディア記事の例:コンテンツマーケティングとは?成功事例やメリットも併せて解説
まとめ:SEO対策はh1タグだけでなくコンテンツ制作にも注力しよう
h1タグを適切に活用することで、間接的にではありますがSEO効果を期待できます。ただし、設定方法を間違えるとマイナスに作用するリスクもあるため注意が必要です。本記事のh1タグの活用ポイントや、おすすめできない使い方は必ず押さえておきましょう。
SEOは質の高いコンテンツ制作が基本です。コンテンツそのものが良質でなければ、いくらh1を工夫しても大きな効果は得られません。SEデザインではコンテンツ力を武器にしたSEO記事コンテンツ制作サービスを提供しています。もしSEOに課題を抱えているなら、IT分野のBtoBマーケティング&セールスに35年以上の実績があるSEデザインまでご相談ください。
こんなお悩み、ございませんか?
-
社内で記事制作を行っているが、限界を感じている
-
SEO記事制作を外注したが検索結果に上位表示されない
-
専門性が高く丁寧な記事制作代行会社を探している
SEデザインが提供できるベネフィット
- 戦略策定からサイト構築、制作までサポート可能。外注探しの手間は不要です
- 現状分析やターゲット設定を行い、貴社に最適なコンテンツ戦略をご提案します
- 出版業で培ったコンテンツ企画力・編集力を武器にした記事制作を行います
- 高品質で有益なコンテンツにより、貴社の集客力を高めます
- 費用対効果の高いコンテンツを作成することで、長期的なリード獲得が見込めます
多くの企業様のマーケティングを支援させていただいております。


.png?width=1693&height=325&name=logo_FUTURESPIRITS_transparent%20(1).png)


