見出しタグ(h1~h6)の書き方。見出しタグを正しく使ってコンテンツの質を高めよう

見出しタグの使い方。見出しタグの使い方/構成で文章が変わる

こんにちは。橋と申します。
@hattsshi

見出しタグはホームページを作り始めた初心者の方は学んでおくべきですが、記事を更新するだけの方にとっても抑えておきたいポイントです。

見出しタグは使い方を間違えるとSEOでも悪影響を及ぼす恐れがあるだけでなく、ユーザーに読みやすい記事を書く上でも大切です。

このページでは、htmlの記述に重要な役割をするh1~h6までの見出しタグについて

  • 見出しタグの役割
  • 見出しタグの使い方
  • 見出しタグの書き方

をそれぞれ詳しくご紹介しますので参考にしてみて下さい。

見出しタグの役割とは

デジタル情報

見出しタグとはhtml内にh1~h6で記述するタグのことで「hタグ」とか「タイトルタグ」と言われることもあります。

hタグは、そのページの文章における見出しの役割で、

見出しタグの役割
h1=大見出し
h2=中見出し
h3=小見出し
h4=さらに小見出し
…と続きます。
書籍に例えると
h1が本のタイトル
h2が見出し
h3がh2の中の小見出し
h4がh3の中の小見出し
というようになります。

html内には下記のように記述します。

<h1>タイトル</h1>
<h2>タイトル</h2>
<h3>タイトル</h3>
<h4>タイトル</h4>
<h5>タイトル</h5>
<h6>タイトル</h6>

 

h1~h6タグの記述例

図解で説明するとこのようになります。

「h1大見出し、h2中見出し、h3小見出し」書き方の例

最低覚えておきたい見出しタグの使い方3つのルール

3を示す女性

タイトルタグの役割と記述例をお伝えしましたが、

このh1~h6のタグには記述する際のルールがあるので覚えておきましょう。

3つのルール
  1. hタグは文中で使うのはh3又はh4まででOK
  2. H1タグ以外は繰り返し使ってOK
  3. Hタグの順序を守ろう!良い例・ダメな例

1.hタグは文中で使うのはh3又はh4まででOK

hタグはh1~h6までです。

ただし、全部使う必要はないし
記事の文中にh5やh6を使うことはないでしょう。
(というか使っているサイトを見たことない。)

トップページや下層ページやブログの記事内はh2とh3、構成によってはh4までと覚えておくと良いです。

2.h1タグ以外は繰り返し使ってOK

見出しタグは記事中で繰り返し使ってOKですが、
大見出しとなるh1タグは1回です。

h1タグがwebサイトのページ全体の大見出しとなるからです。

3.Hタグの順序を守ろう!良い例・ダメな例

見出しタグは順番を守りましょう。

下記に良い例とダメな例をご紹介します。

良い例

「h1大見出し、h2中見出し、h3小見出し」書き方サンプル。良い例

ダメな例

「h1大見出し、h2中見出し、h3小見出し」書き方サンプル。悪い例

良い例とダメな例。違い分かりましたか?

h1以外は繰り返し使ってもOKですが、

ダメな例はh1→h3→h2→h3というようにh1の次にh2を飛ばしてh3になっています

見出しタグの書き方。3つのポイント

123

続いて、見出しタグの基本的な書き方についても触れておきましょう。

見出し書き方3つのポイント
  1. 見出しタグには「検索キーワード」を入れる
  2. 見出しは重要なキーワードを左に
  3. キーワードの詰め込み過ぎはペナルティの対象。自然な文章で

一つひとつ解説していきます。

1.見出しタグには「検索キーワード」を入れる

見出しタグは、検索エンジンに対して「どのキーワードで表示したいか」を教える役割もあります。

特にそのページの大見出しとなるH1タグには、

  • そのページに何が書いてあるか
  • 検索キーワードは何か

この2点を意識して書く必要があります。

とくに大見出しとなるh1は、そのページの大見出しになりますので、検索キーワードを入れて下さい。

例外があります。
企業ホームページのトップページは「社名」のみでも大丈夫です。

2.見出しは重要なキーワードを左に

重要視したいキーワードほど左に持ってきた方が良いです。

文章の最初に記述されるキーワードほど、そのページにとって重要なワードとGoogleが認識してくれます。

3.キーワードの詰め込み過ぎはペナルティの対象。自然な文章で

とはいえ、キーワードを過度に詰め込むのはNGです。

やり過ぎはペナルティの対象になったり、頑張り過ぎると逆に順位を下げる原因になりますので、あくまで自然にです。

どれくらいが丁度良いかは、他のホームページを参考にしながら掴んでいきましょう。

見出しタグの文章。具体的な考え方

資格取得

ここまで、見出しタグの基本構造と書き方のルールを解説してきましたが、

SEO対策と実際の読みやすさを両立するために、抑えておくべきポイントがあります。

ここを忘れると、実際に書いてみたけど読みにくい。話がつながらないなど違和感が出る文章になってしまう恐れがありますので合わせて参考にどうそ。

Hタグの文章はツリー構造で書く

h1➡h2➡h3はツリー構造で書くのが良いです。

 

  1. ホームページとは
  2. ホームページの作り方
  3. 各種設定

というような流れです。

この順序がバラバラだと読みにくくなったり、検索エンジンからの評価が下がる恐れもあります。

 

見出しは飛ばし読みでも理解できるように

現代人は忙しいので、ほとんどの人は記事を全部読みません。

なので、まずは見出しを見たときに何が書いているのか大体わかるように書くと良いです。

たとえ飛ばし読みでも大体わかるようにです。

因みに、このページの構成はこのようになっています。

記事の見出しサンプル

大まかな流れや、言いたいことが分かると最後までスクロールして見てくれる確率が高まりますし、最初は飛ばし読みしていたけど、気になる部分は読んでくれる可能性も高まります。

目次は「Table of Contents Plus」というプラグインを利用して表示させています。
Table of Contents Plus・設定方法・カスタマイズ

SEOに有利な目次プラグイン『Table of Contents Plus』設定方法とカスタマイズ

2020年4月18日

一般的に良いとされている文章構造を2つご紹介します。

文章は基本的に

  • 結論から話す
  • わかりやすい
  • 知りたいことが書いている

という順序が読みやすいと言われています。

文章の書き方に関しては、

一般的な記事なら
PREP(プレップ)法

PREP(プレップ)法
  1. 「Point」:文章の要点。まずは結論を述べる
  2. 「Reason」:結論の理由を説明する
  3. 「Example」:具体例・事例を説明する
  4. 「Point」:最後にもう一度結論を述べる

この4つの頭文字をとってPREP(プレップ)法と言います。
ブログの記事など一般的なコンテンツに適している構成です。

 

LP(ランディングページ)やトップページなど販売につなげるなら
クエストフォーミュラ

クエストフォーミュラとは
  1. Qualify(絞り込む)
  2. Understand(共感する)
  3. Educate(啓発する)
  4. Stimulate(興奮させる)
  5. Transition(変化させる)

の頭文字をとってQUEST、フォーミュラとは公式、決まり文句などの意味です。

大まかな流れとして覚えておくと便利です。

 

見出しタグに関してありそうな質問について

箱から飛び出した「?」

見出しタグに関して、ありそうな質問にお答えしておきます。

この3点について
  1. トップページと下層ページで違い
  2. hタグは画像でもいい。「altタグ」を書こう
  3. サイドバーの見出しタグはどうしたらいい?

一つひとつ紹介していきます。

トップページと下層ページで違い

トップページと下層ページでの違いは、h1タグの使い方に少し違いがあって、h2~h6タグは考え方は同じです。

トップページは「ホームページの名前」になっているケースが一般的。
会社なら会社名。
ブログや一般的なウエブサイトならブログやサイト名で、

下層ページはそのページのコラムやコンテンツのタイトルになっている場合が多いでしょう。

これは、ルールというよりテンプレートの仕様に関わりますので、Wordpressならテンプレートによっても変わりますし、ホームページビルダーやシリウスなどのツールで作っているかなどでも違ってきますが、概ねお伝えした通りです。

hタグは画像でもいい。「altタグ」を書こう

タイトルを装飾して見やすくするために、.jpgや.gifなど画像を使いたい場合もあると思います。

見出しタグに画像を使うのもOKです。

その際は、altタグを使ってその画像に書かれている内容を記述しましょう。

<img src="https://〇〇〇.com/../sample1.jpg" alt="【ココに記述】" width="300" height="300" />

altタグを書く目的は、
Google先生にその画像に何が書いてあるかを知らせる
通信環境などで画像が読み込まれなかったときの代替えテキストです。

サイドバーの見出しタグはどうしたらいい?

ホームページを自分でカスタマイズしていると、「SEO対策になるならサイドバーのhタグも変更したい。」と考える方もいるでしょう。

昔私も手を付けました。笑

ほとんどの場合サイドバーの「カテゴリ」や「新着記事」などは、テンプレートによって違いはあれどh3~h6の間で使われているケースが多いと思います。

その場合は、わざわざ変更する必要はありません。

ただし、カテゴリ・新着記事、メニューなどにh2が使われている場合は、h3~h5あたりに変更しても良いでしょう。

SEO的に意味のないサイドバーの見出しタグを強調しても仕方ありませんから。

 

他のwebサイトの見出しタグをチェックする方法

自社のホームページはどうなっているんだろう?
とか、
他のホームページを見てどういう構造になっているんだろう?
と気になったときは、ブラウザ上で右クリックして「ソースの表示」または「ページのソース」をクリックしてみるとhtmlの記述が表示されます。

ソースの表示。サンプル画像"

初めて見たら分かりにくいかもしれませんが、
日本語の文章はそのままですから、順序や構造の確認は理解でいると思います。

htmlの記述もルールがあるので、少し勉強するとすぐに理解できると思います。
(自分で書けるかどうかはまた別ですが…)

さいごに

ホームページを立ち上げて検索順位が気になり始めると、「何かできる事はないか?」と思い見出しタグのカスタマイズにたどり着くと思います。

SEO対策の施策はやり始めるとキリがありません。

Googleは検索エンジンの評価は200以上のアルゴリズムでおこなわれていると言われています。
(公式には発表していません)

SEO対策はやり過ぎ禁物です。

 

また、Googleが掲げる10の事実の一つにはこのようなことが書かれています。

1. ユーザーに焦点を絞れば、他のものはみな後からついてくる。

まぁ、これが基本でありながらシンプル過ぎて最も難しいとも言えるのですが…汗

タイトルでユーザーの興味を引いたり、読みたいと感じさせることで精読率をあげるのも大事です。

ユーザーの視点に立って役立つコンテンツを作っていきたいですね。

タイトルタグで差をつけよう

タイトルタグの書き方。設定方法

2020年3月24日
メタディスクリプション、役割と書き方

メタディスクリプションの書き方。SEO対策を意識した設定方法

2020年3月25日
Wordpressおすすめプラグイン

WordPressのプラグインおすすめ9選とあったら便利な3選

2020年4月20日
コーポレートサイトにおすすめ。ワードプレステンプレート

SEO内部対策済みの企業ホームページ向けワードプレステンプレート無料&有料おすすめ9選

2020年3月7日

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)