MENU

無料相談

  1. HOME
  2.  > 
  3. サイト職人スタッフブログ
  4.  > 
  5. h1やh2の正しい使い方とは?hタグのルールと使い方を解説

サイト職人スタッフブログ

h1やh2の正しい使い方とは?hタグのルールと使い方を解説

ホームページを更新する際、知識として必要になるのがHTMLに対する正しい理解です。

 

特に、見出しタグは、サイトの更新において重要な意味をもっており、マーケティング担当者であるなら意味を理解した上で使っていく必要があります。

 

もしかしたら、見出しタグを正しく使えていない方も多いのではないでしょうか。

今回は、基本に立ち返って見出しタグの使い方について確認していきましょう。

 

hタグ(見出しタグ)とは

見出しを作るためのタグのことを見出しタグといいます。見出しタグは、h1~h6まで存在しており、文書に応じて適切に選ぶ必要があります。基本的に、数字が小さい見出しタグほど、検索エンジン上での優位性が高くなります。まずは、見出しタグの基本についてご説明します。

titleタグとh1タグの違い

titleタグとh1タグは、非常に役割が似ているため、同じようなものだと思われがちですが、次のように明確な違いがあります。

 

項目 titleタグ h1タグ
記載場所 <head></head>の間 <body></body>の間
記述方法 <title>タイトルを記述する</title> <h1>h1情報を記述する</h1>
表示場所 ・検索エンジンの検索結果
SNSに共有された際のタイトルエリア
SEO対策を実施したいページ
ユーザーに表示されるタイミング 検索結果の一覧など特定のページへアクセスする前 特定のページへをアクセスした際

 

titleタグとh1タグが同一文章でも問題にはならないため、多くのホームページでは同一の情報が記述されています。しかし、titleタグに【20XX年最新】【20XX年版】など、目立たせたい文章を【】で囲い、h1タグとは別で設定する手法をとることで検索結果で目立つようになり、アクセス数を増やすことも期待できます。

SEOにおける影響について

そもそも、見出しタグにはどの程度の影響力があるのでしょうか。もし、見出しタグの影響が高ければ、次のようなことが起きる可能性があります。

 

・見出しタグの設定が完璧であれば、内容が今ひとつでも上位表示できるかもしれない?
・誤ってh1タグなどを2回使用して、非常に悪い評価を受けてしまうかもしれない?

 

現状のGoogleのアルゴリズムによれば、見出しタグを乱用される可能性を防ぐため、一般的なタグと何ら変わらない位置づけにしていると発表されています。つまり、見出しタグだけが他のタグと比べて評価が高くなっているわけではないということです。

 

このようなGoogleの評価の仕方であるなら、どこにどんな見出しをつけようが構わないようにもみえますが、そんなことはありません。見出しと本文要素の親子関係を明確化することは、SEO対策の基本なので正しく構造化していきましょう。

 

なので、間違った見出しのつけかたをしたからといって、すぐにマイナス評価が与えられてしまうということはありません。しかし、SEO対策を実施するWeb担当者なら正しい文章構成でコンテンツを作成することが基本となるため、読みやすい見出しタグの扱い方を学んでいきましょう。

 

SEOにおける効果について

見出しタグをGoogleのルールに従って設置することで次のような効果があります。

 

・どこに何が書いてあるかわかりやすくなる
・クローラーが記事の内容を認識しやすくなる

 

それぞれの影響についてご説明します。

 

【どこに何が書いてあるかわかりやすくなる】
見出しを設定すれば、どこに何が記載されているのかがわかりやすくなり、ユーザーにとって読みやすい文章構造になります。これによって、ユーザーは知りたい情報にすぐに見つけられるようになります。

 

ユーザーの多くは知りたい情報を拾い読みするケースが多く、知りたいことをわかりやすく伝えることで、検索エンジンへ良い影響を与えやすくなります。

 

【クローラーが記事の内容を認識しやすくなる】
見出しを設定すれば検索エンジンのクローラーが記事の内容を認識しやすくなります。検索エンジン内を巡回するクローラーは、HTML、文章や画像、動画など、様々な情報をチェックしながらどのような記事なのか理解しようとしています。

 

このとき、クローラーが文書構造を理解するのに参考にしているのがHTMLの見出しタグです。たとえば、h1に情報を記述しておくと、検索エンジンからページの主題として認識してもらうことができます。ユーザーの検索キーワードとの関係性を高めるためにも、見出しタグは正しく扱いましょう。

 

hタグ(見出しタグ)の役割と使い方

見出しタグには、基本的な役割と使い方があります。次に、それぞれの役割や使い方の具体例についてご説明します。

h1の役割

h1タグの役割は、ページの中心情報を伝えることです。1ページにつき1つ設定され、記事タイトルと同一であることが多いです。SEO対策をする記事の場合、検索上位になりたいキーワードとページの主題は関連性が高いため、基本的にはh1に集客したいキーワードを含めます。

 

h2の役割

h2タグの役割は、書籍で例えるのなら各章の見出しとなります。h1タグをタイトルと同一のものを設定する場合、記事の本文において、一番大きな見出しとなるのはh2タグです。書籍の各章の見出しのようなものであるため、ユーザーは全体を眺めてh2タグで自分が読むべき場所を決めていきます。

 

Webライターのお仕事をしていると、基本的な見出しを設定するかと思いますが、その多くはh2タグです。SEO対策において最も基本的なタグとなるため、正しく扱うようにしましょう。

 

h3の役割

h3タグの役割は、h2タグの情報をわかりやすく整理することです。h2タグを「~使い方のポイント」にした場合、h3タグでは複数の使い方のポイントを1つずつ分けて紹介していきます。

 

【参考例】

<h2>~の使い方のポイント</h2>

<h3>ポイント1:〇〇〇</h3>

<h3>ポイント2:〇〇〇</h3>

<h3>ポイント3:〇〇〇</h3>

<h3>ポイント4:〇〇〇</h3>

 

h4~h6の役割

h3タグの役割は、上位見出しの情報を整理することです。h2タグを「SEO対策の施策」、h3タグを「メディア運用」とした場合、h4タグは「キーワード集客を目的としたホームページ」や「自社商品を紹介するホームページ」といったものを設定します。

 

【参考例】

<h2>SEO対策の施策</h2>

<h3>メディア運用</h3>

<h4>キーワード集客を目的としたホームページ</h4>

<h4>自社商品を紹介するホームページ</h4>

 

hタグ(見出しタグ)の基本的なルール

見出しタグには、基本的なルールがあります。それぞれの使い分けについて解説します。タグの使い方については、会社によって考え方が異なりますが、ホームページ制作会社では、このように考えております。

 

ウェブアクセシビリティ向上のため適切な設定を行う

画像2_hタグ(見出しタグ)の基本的なルール見出しタグは、ウェブアクセシビリティを向上させるために、正しく設定する必要があります。ウェブアクセシビリティとは、高齢者や障がい者など、体の機能や特徴、条件に関係なくホームページで提供される情報にアクセスできることです。

 

正しく見出しタグが設定されていないと、ユーザーは自分が必要としている情報を見つけられずに、離脱することになります。そのため、だれにとっても見やすい見出し設定を行い、ウェブアクセシビリティを向上させる努力をしていきましょう。

h1は1記事に1回まで使用する

h1は、ホームページのヘッドタイトル部分に用います。基本的に、何度も利用するものではなく、1回だけの利用が基本だと考えておきましょう。最も重要な見出しであり、アピールしたい部分に使用します。これによって、検索エンジンに対してページの主題が何かを明確に伝えられるようになります。
h1を複数回使ってもSEOにおけるペナルティの対象にはならないとされています。しかし、h1が複数個あるとクローラーが、そのページで最もアピールしたいことを判別しづらくなるリスクも存在します。

h2~h6までを順番に利用する

h1の場所が決定したら、h2~h6までを順番に利用していきます。なぜ順番に記載するのかというと、ユーザーが文章を読みやすくなり、検索エンジンに評価されやすい記事を書くことに繋がるからです。

 

そこで、大きさ的にちょうど良いからと、h2を使うべきテキストにh6を使ってみたり、h3を使ったりしてはいけないということです。見出しタグの役割を正しく理解できていないと、誤った順序で使ってしまう可能性が高いので注意が必要です。

h2~h6は、何度使っても問題はない

h1タグは、1度しか使用することができませんでしたが、h2~h6タグなら、何度でも文章中に利用することができます。だからといって、h2ばかり連続的に使い過ぎると、訪問者が読みづらいと感じるかもしれませんので、コンテンツの親子関係について明確にして見出しをつけてあげましょう。

h6まで使うことは一般的なのか?

まず、大前提としてお伝えしておくべきことは、見出しタグはh6まで存在しており、インターネット上では機能するということです。しかし、h6タグがインターネット上で機能することと、使うことは別問題です。

 

多くのホームページでは、h3タグまでしか利用しません。そのため、記事作成の際は、h2タグとh3タグを意識して、進めていきます。仮に、h4タグを使いたいと思ったとしても、システム上、見出しの見た目が変わらないケースが多いです。つまり、使わないことが前提となっているということです。

 

hタグは見出しであると分かるフォントサイズを設定する

見出しタグは、見出しだとわかるフォントサイズを設定してください。この点については、フォントサイズを自分で設定しなくても、h2タグを設定すれば、システム上のフォントサイズが呼び出されて、自動的に文字の大きさが変わるはずです。

 

もし変わらない場合は、自動的にフォントサイズが変更されるようにシステム担当者に相談しましょう。

 

hタグ(見出しタグ)を使う際の注意点

hタグ(見出しタグ)を使う場合は、使い方にいくつか注意点があります。次に、見出しタグを使う際の注意点についてご説明します。

hタグにキーワードを詰め過ぎない

画像3_hタグ(見出しタグ)を使う際の注意点見出しタグは、SEOで強調できる部分であるからと、hタグ内にキーワードを大量に含める方がいます。あまりにも不自然に、キーワードを入れてしまうと、Googleも対策をとってきているため、もしかするとペナルティを受けてしまう可能性があります。伝えたいキーワードを選択して見出しを一読した時、不自然だと感じた場合は、内容の見直しを検討してください。

 

【悪い参考例】

<h2>キーボードの使い方のポイント〇〇〇</h2>

<h3>キーボードの使い方のポイント1:〇〇〇</h3>

<h3>キーボードの使い方のポイント2:〇〇〇</h3>

<h3>キーボードの使い方のポイント3:〇〇〇</h3>

<h3>キーボードの使い方のポイント4:〇〇〇</h3>

 

【良い参考例】

<h2>キーボードの使い方のポイント〇〇〇</h2>

<h3>ポイント1:〇〇〇</h3>

<h3>ポイント2:〇〇〇</h3>

<h3>ポイント3:〇〇〇</h3>

<h3>ポイント4:〇〇〇</h3>

 

実際に、見出し要素に大量のキーワードをhタグに含めたホームページは、検索エンジンからペナルティが与えられて圏外に飛ばされたりもしています。無理にキーワードを不自然に使っていると検索ユーザーも読みづらいと感じてしまいますので、ユーザビリティを下げる原因となってしまいます。

記事の内容をhタグだけにするなど、過度に使いすぎない

ホームページを更新するためには、見出し以外にも本文にも要素を与えなければいけません。本文には、pタグというものを与えます。このpタグも、ただ与えれば良いというわけではなくて、文章が長くなりそうであれば、改行タグを入れて読みやすいように工夫しなければいけません。

 

他にも、文章が長くなりそうなときは、下記のようなリストタグが非常に有効です。

 

<ul>
  <li>1つめの項目</li>
  <li>2つめの項目</li>
  <li>3つめの項目</li>
</ul>

 

SEO対策の手順の説明を文章で長く説明していると、何が記載されているのかわかりづらくなってしまいます。そんなときに、次のようにリストタグを使います。

 

【SEO対策の手順】

<ul>
  <li>ステップ1:キーワードを見直す</li>
  <li>ステップ2:文章構成を見直す</li>
  <li>ステップ3:正しい画像を選ぶ</li>
  <li>ステップ4:表でわかりやすくデータを表示する</li>
</ul>

 

このようにpタグやリストタグ以外にも本文を構成するタグはたくさんありますので、少しずつで構いませんので、利用できるようになりましょう。

 

hタグに画像を使うことは評価されづらい

HTMLの文法としては画像に見出しタグを使うことは可能です。しかしリッチな見た目にするためだけに画像を使うことは推奨されません。画像を設定するimgタグにはalt属性として画像の説明を設定できますが、このalt属性に書かれたテキストがあったとしても、通常のテキストよりも評価が低いとされております。

 

たとえ、強調したい画像であったとしても、普通の画像に見出しタグを振ることはせず、テキストを使うようにしましょう。

 

ユーザ目線を意識にしたhタグ(見出しタグ)の使い方

見出しタグは、検索エンジンへのアピールとして対策が必要となりますが、ユーザー目線の対策も忘れてはいけません。次に、ユーザ目線を意識にした見出しタグの使い方についてご説明します。

文字数を短めにしてなるべく改行は避ける

見出しタグの文章は、なるべく短くして、改行しないようにしましょう。見出しタグの文章には文字数による制限がないため、何文字でも設定できますが、長くすればするほど、内容が理解しづらくなってしまいます。たとえば、次のような見出しを見比べてみましょう。

 

・SEO対策の始め方や手順、方法を実例で管理画面の画像付きで紹介
・【実例付き】SEO対策の方法

 

ちょっとした工夫で、文字が読みやすくなります。また、見出しの文章が長くなってしまう場合、改行するという方法があります。改行することで文章を短く見せられると説明しているホームページがありますが、基本的には、使わないものと思ってください。

 

実際に、改行したいと思っても、システム上で反映されないようになっているという事も多いので、そもそも改行は使わないと思っておくと考えを整理しやすいです。

専門的な言いまわしは避ける

見出しタグは、ユーザに対して文書の内容を正しく理解しやすい形で伝えるために存在しています。そのため、専門的な表現や難解な言葉を使っては、ユーザーに意図が伝わらず、本来の見出しタグの機能を果たすことができません。

 

そのため、ユーザーが一目で理解しやすく、数字などを有効に利用しながら具体的な表現を選びましょう。もし、その言葉を使うべきなのか迷ったときは、「ユーザーはこの言葉を日常的に使っているだろうか」と考えてみると良いでしょう。

 

専門的な用語が絶対にだめと言っているわけではありません。ホームページの運用目的によっては、専門的な用語を使った方が集客効果は高まりやすいということもあります。そのため、ユーザーがいつも使っている言葉は何かを意識して、その場の状況に応じた正しい言葉を選びましょう。

 

同じような見出しを繰り返す場合は数字を利用する

文章構成によっては、同じような見出しを使いたくなることもあるでしょう。たとえば、いくつもポイントを表現する場合やステップ形式で何か説明する必要がある場合などは、どうしても見出しが同じような形式になってしまいがちです。

 

その際は、事前に次のようなパーツを準備しておくと、わかりやすい見出しを簡単に設定できます。具体的な手順を説明する場合は、ステップを利用し、商品やサービスの魅力を伝えたい場合はポイントを利用します。これらは何度も利用するものですので、メモ帳に記録しておき、必要な時に呼び出せるようにしておきましょう。

 

・ステップ1:
・ステップ2:
・ステップ3:
・ステップ4:
・ステップ5:

 

・ポイント1:
・ポイント2:
・ポイント3:
・ポイント4:
・ポイント5:

 

注意してほしい見出しでは【記号】を利用する

SEO記事を作成していると、他の記事と見出しがどうしても似てしまうことがあります。その際は、次のように記号を有効に利用しましょう。

 

・【20XX年最新】SEO対策の施策
20XX年完全版】SEO対策の施策
【実例あり】SEO対策の施策
【参考例付き】SEO対策の施策

 

情報が最新であることが価値につながる場合は、【20XX年最新】を使って、最新情報が表示されていることを伝えます。他にも、全体的に広く情報がまとまっていることを伝えたい場合は、【20XX年完全版】といった表現を使います。

 

このような表現を使う以上は、情報が最新であるのはもちろん、しっかりと情報を揃えておく必要があるので、表現を使えばいいというわけではない点に注意しましょう。

 

まとめ

見出しタグ自体は、検索エンジンで高い影響力を持っているわけではありませんが、構造を正しく理解して使用することが大切です。見出しタグを正しく設定しておけば、文章構造を正しくクローラーが読み取って理解してくれます。

ユーザーにとってもクローラーにとっても読みやすいホームページを作成することが、検索エンジンのSEO対策に繋がります。最初は、見出しを付ける作業に苦労するかもしれませんが、回数を重ねていくことで文章を書きながら見出し構造がイメージできるようになりますので、文章の表現方法を工夫していきましょう。

PAGETOP