＜h1＞見出しタグの使い方、間違っていませんか？＜/h1＞

あなたのWEBサイトは見出しタグを正しく使えていますか？

見出しタグの意味を知らずに、文字サイズ変更のために使っていませんか？

それ、大間違いです。

今回は、見出しタグ（hタグ）の正しい使い方を紹介します。
正しい使い方を覚えましょう！

見出しタグとは

見出しタグについて簡単に説明すると、

WEBページの目次になるタグ　です。

本を読むとき、1ページ目から突然文章が始まるのではなく、必ず目次がついていますよね？それと同じ役割を持っています。

もう少し具体的に説明すると、

「ページを閲覧するユーザー」と「検索エンジン」の両方に、ページ内の構成を正しく伝えるために使用されています。

Google者はこのように説明しています。

見出しタグはタグに囲まれているテキストをページ上の通常のテキストよりも大きく表示するため、ユーザーにとってはそのテキストが重要であるという視覚的な手がかりとなり、見出しテキストの下に続くコンテンツの内容について理解しやすくなります。
https://support.google.com/webmasters/answer/7451184?hl=ja

検索エンジンではなく、ユーザーの利便性を最優先に考慮してページを作成する。
https://support.google.com/webmasters/answer/35769?hl=ja

このことから、ユーザーの利便性を考慮して見出しタグを活用することが、SEOにおいて重要と言えます。

見出しタグを設定すると何が得なの？

ページを読んでもらいやすい

前述したとおり、見出しタグは目次に当たります。

目次が作成されているWEBページ＝記事構成が整っているため、パッと見ただけでどんな内容が記載されているのかがわかりやすく、コンテンツを読んでもらいやすいです。

クリックしたページの構成がわかりづらいと、ユーザーの離脱率は上がってしまいますので、ユーザビリティを上げる1つの対策として活用できます。

SEO効果が上がる

見出しタグの効果は、ユーザーだけではありません！検索エンジンに対しても、同じようにコンテンツの構造を正確に伝える効果があります。

見出しタグを正確に使うことで、コンテンツのインデックスが適切に行われるようになり、検索順位に良い影響を与えます。

見出しタグ使用の注意

大きく三点あります。

h1はページに1つ

<h1>タグは1ページに1つになるよう設定しましょう！

<h1>タグには「このページではつまりなにを説明しているのか」の回答にあたるテキストを設置します。

美容整形のサービスサイトなら、「美容整形の○○クリニック」

税理士事務所のWEBサイトなら、「経営コンサルの税理士○○事務所」などです。

<h1>タグの設置数に制限はありませんが、ページの構成をはっきりさせるためにも、1つに絞りましょう。

使う順番を守る

見出しタグには6つの種類があります。（h1/h2/h3/h4/h5/h6）

まず、<h1>タグはhタグの中で最上部に設置するようにしましょう。

<h1>よりも<h2>が来ることはないからです。（前述したとおり、ページ構成の点から、小さい見出しが大きい見出しより先に来ることはないからです）

また、この6種のタグは、基本的に「隣あう数字のタグ」しか使えません。

例えば、<h1>の次に来るのは<h2>、<h2>の後に来るのは<h3>、<h3>の次に来るのは<h2>か<h4>ということです。

（こちらも、記事構成の観点から<h2>の次に突然<h4>が来ることはないからです。<h4>を使うなら、その前に<h3>があるはずですね）

例外として、下記のような使い方は問題ありません。

<h4>タグのあとに<h2>タグを使用している箇所がありますが、これはページの構成的に問題ありません。

簡潔な一言でまとめる

見出しにつけるテキストは、必ず完結にまとめてください！これも、ページの構成をわかる安くするためです。

ついつい、アピールしたい文章を長く書いてしまいがちですが、ぐっとこらえて完結にしましょう。

おまけ：見出しタグの誤り例

見出しの間違いタグあるあるを1つ紹介します。

こちらは、私が適当に作成した仮WEBサイトです。

こんな形のサイトってよくありますよね。ぱっと見ると、変な部分はないですが、実はこれ、かなり間違っているんです。

この仮サイトのソースコードは、実はこうなっているんです。

hタグの使い方がかなり適当ですね。

パッとサイトを見ただけではわからなかったですが、CSSなどでフォントサイズを書き換えており、

• hタグの順番
• h1を使う数
• hタグに入れる文章

すべてが間違っています！

ちゃんとサイトの内部まで確認しないと気づけないのでわかりづらいですね・・。

見出しタグを整えるとわかりやすいサイトに

見出しタグについて、理解できましたか？少し修正するだけでも、「あれ、わかりやすいサイトになった・・？」と、変化があるのではないでしょうか。

内容は変わってないのに、どのコンテンツがどこにあるのかわかりやすく、ちょっと見やすくなった！という人もいると思います。WEBサイトを閲覧する分には全く影響のない箇所なので、おろそかにしがちですが、細かい点までしっかりと対策しましょう。

筆者紹介

furuichi