この記事ではHTMLの見出しタグについて解説していきます。
見出しタグとは、html文書内に見出しを挿入するためのタグで、HTMLのタグの中でも頻繁に使われます。とても重要なタグなので必ず覚えておきましょう。
読みやすいサイトを作るために重要なタグだから覚えておこう
この記事を読むことで、下記のポイントについて理解できると思います。
- 見出しタグについて概要がわかる
- 見出しタグの使い分け方がわかる
ひとつずつわかりやすく解説していくよ！
見出しタグはなぜ必要なのか？
そもそも見出しタグはなんで必要なんだ？
よりわかりやすく、正確に内容を伝えるために見出しタグが必要なんだ！
なぜ見出しタグが必要なのでしょうか？
その答えは非常に単純で、見出しタグがあった方がわかりやすいからです。
見出しタグを使うことで、ユーザーや検索エンジンに対して、文章の内容を格段にわかりやすく伝えることができます。
見出しタグがあるとユーザーにわかりやすい
見出しのあるなしでどれくらい分かりやすさが変わるか実験してみましょう。まずは全く見出しのない文章を見てください。
見出しのない文章
ある程度長い文章になると、見出しがなければメリハリがなく非常に読みづらくなります。
一方、見出しを入れた例を見てください。
見出しのある文章
見出しが入ることで何が書いてあるかがひと目で分かるようになりますし、段落が別れることで、読むことについての心理的なハードルを下げることが出来ます。
見出しがあった方が内容がわかりやすい！
そうなんだ！見出しがある方がわかりやすい！とユーザーは感じるものなんだ
「わかりづらい！」とユーザーが感じてしまうと読むのを諦めてしまうかもしれません。適切な見出しは文章をわかりやすくするためにも、また、多くの人に読んでもらうためにも必須の対応と言えます。
検索エンジンにわかりやすい
見出しを使うことで、googleなどの検索エンジンに対して、何についての文章なのか、何が重要なのかを正確に伝えることが出来ます。
検索エンジンに正確に文章を伝えることで、適切なキーワードでの検索順位の向上などを見込むことが出来ます。
検索エンジンなどの機械にとっても見出しは目印になるから重要なんだね
このように見出しタグは、ユーザーに対しても、検索エンジンに対しても、文章を正確にわかりやすく伝えるために重要な効果があるんですね。
見出しタグの基本
見出しタグは重要度に応じ<h1>～<h6>までの6種類用意されています。
6種類もあるのか！
そうなんだ！でもみたらわかると思うけど、数字が変わるだけだから簡単だよ
見出しタグの種類には下記のようなものがあります。
- <h1>～～</h1>：１番重要な見出し
- <h2>～～</h2>：２番目に重要な見出し
- <h3>～～</h3>：３番目に重要な見出し
- <h4>～～</h4>：４番目に重要な見出し
- <h5>～～</h5>：５番目に重要な見出し
- <h6>～～</h6>：６番目に重要な見出し
見出しタグは重要な順に使う
html文書内に見出しが必要な場合は、重要な順にh1から使います。
文書内にh1ほど重要でない見出しが必要な場合h2を使い、それよりさらに重要でない見出しが必要であればh3を使う。という風に、重要度が下がるごとに数字を1ずつ増やして使います。
重要度が下がるほど、数字が上がっていくんだね！
見出しタグの例
実際に見出しタグを使った例を見てみましょう。
<h1>団子</h1>
<p>内容が入ります。</p>
<h2>概要</h2>
<p>内容が入ります。</p>
<h2>主な串団子</h2>
<p>内容が入ります。</p>
<h3>その他の団子</h3>
<p>内容が入ります。</p>
<h2>歴史</h2>
<ul>
<li>内容が入ります</li>
<li>内容が入ります</li>
<li>内容が入ります</li>
<ul>見出しの付け方は、本の段落を想像してもらうとわかりやすいと思います。本にも大見出し、中見出し、小見出しのように見出しのレベルがありますよね。
htmlの見出しも考え方は同じです。
まずは文章の一番大きな見出しをh1にします。その後は段落で分けて、適切な見出しを記述していきます。
段落の中でさらに小さな見出しが欲しい場合は、もう一段重要度の低い見出しを使います。(上記の例でいう、<h3>その他の団子</h3>の部分です。)
見出しタグ使い方詳細
h1タグは1ぺージに1つだけ
h1タグは最も重要な見出しを表すタグです。そのため同じページ内にいくつも存在するべきではありません。ページ内で1度だけ使うのが理想的な使い方です。
SEOに関してはアルゴリズムが公表されていないので断言はできませんが、一般的には、h1が複数あるとどれがメインになるh1タグなのかがGoogleには判断できなくなる可能性があります。できるだけ１ページに1つだけ使うようにしましょう。
h1を使うべき場所
h1タグはページ内の一番重要な場所に使います。
一般的に多いのは、トップページはサイト名をh1にし、各記事ページは記事タイトルをh1にする方法です。
- トップページ…サイト名をh1にする
- 記事ページ…記事タイトルをh1にする
現在、多くのサイトではこの方法が主流になっているので、この方法を使っていれば問題ないでしょう。
よくあるブログサービスや、wordpresssの多くテーマではすでにこのような対応がされているよ！気になったらどこがh1か調べてみよう！
h2〜h6は何回でも使用可能
h2~h6のタグは基本的に回数制限はありません。何回でも使うことができます。
ブログや記事を書く場合は、h2~h4くらいまでを使うことが多いです。
h5、h6を使っても問題はありませんが、文章の構造があまりに複雑になりすぎても読みづらくなってしまうので、h4くらいまでにまとめられるように考えながら書くのがおすすめです。
見出しタグの注意点
デザインを変える目的で見出しタグを使わないこと
見出しタグを使うと、文字が大きく表示されます。
これを利用して、「この部分は大きくしたいからh2を使おう」という見た目の理由で見出しタグを使うのは間違った使い方になります。
見出しタグは、あくまでの文章中の「見出し」を表すもので、それ以外の部分には使うべきではありません。
見た目はいくらでもCSSで変えられますので、純粋に見出しであるかどうかで判断しましょう。
見出しは、何についての文章か？が伝わる言葉を選ぶこと
見出しはユーザーにとって、そのブロックが自分が読みたい情報かどうかを判断させるための重要なキーワードになります。
もちろんSEOにとっても適切なキーワードである方が、正確なインデックスが期待できます。
そのためには見出しを読んだだけで、その後には何が書かれているのか？がしっかり伝わるものであることが望ましいです。
より短い言葉で一目で頭に入り、より的確に内容を言い表していることが大切になります。
例えば下記のような例を見てみましょう。
- HTMLについて
- HTMLはなぜ生まれたのか？
- HTMLが誕生した理由
タイトルが3つ並んでいますが、1つ目より2つ目と3つ目の方が具体的に内容を言い表せていますね。1つ目の「HTMLについて」では漠然としすぎていて何が書いてあるのかわかりません。
2つ目と3つ目を比べてみると、3つ目の方がより短く言い表せているので、若干良いと言えるでしょう。
ただし、ターゲットによっては、あえて噛み砕いた言葉を使った方が伝わるケースもあるので、ケースバイケースで使い分けるとよいでしょう。
見出しにキーワードを詰めこまないこと
SEO的には見出しのキーワードが重要視されると言われています。確かに今でも、タイトルのキーワードで検索順位が上がることが多いです。
しかしながら、無理にキーワードを入れ込むのはやめた方が良いでしょう。今や検索エンジンの解析技術も上がり、無理やりキーワードを入れ込みすぎると、逆に評価が下がることもあります。
あくまでもキーワードは続く文章に何が書かれているかを伝えるためのものです。不自然にキーワードを繰り返すのはやめましょう。
見出しには画像をなるべく使わないこと
見出しタグに画像を使うことはできますが、重要な情報の部分はなるべくテキストを使う方が良いです。
なぜなら、見出しが画像のだと検索エンジンにうまく伝えられないですし、ユーザーの環境によっては画像を表示できない場合もあるからです。
googleの公式ガイドラインでも下記のような記述があります。
重要なテキストを画像に埋め込まない:
画像にテキストを埋め込むことは避けてください。特に、ページ見出しやメニュー項目などの重要なテキスト要素は埋め込まないでください。これは、すべてのユーザーがアクセスできるわけではないためです（また、ページ翻訳ツールも画像では動作しません）。ユーザーがコンテンツに最大限アクセスできるよう、テキストは HTML 形式で作成し、画像に代替テキストを設定してください。
※引用元：画像 – Search Console ヘルプ https://support.google.com/webmasters/answer/114016?hl=ja
サイトのロゴなどのように、どうしても画像をh1にしたい場合は、必ずaltにテキストを設定するようにしましょう。
そうすることで、検索エンジンにh1の画像が何を表しているのかを伝えることができます。例えば下記のように記述します。
<h1><img src="logo.jpg" alt="h1のテキスト" /></h1>
まとめ
- 見出しタグはユーザーと検索エンジンに内容をわかりやすく伝えるためにある
- 見出しタグはh1〜h6まであり、重要度に応じてh1から使っていく
- h1タグは1ぺージに1つだけ
- デザインを変える目的で見出しタグを使わないこと
- 見出しは、何についての文章か？が伝わる言葉を選ぶこと
- 見出しには画像をなるべく使わないこと
