こんにちは。橋と申します。
@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～h6のタグには記述する際のルールがあるので覚えておきましょう。
- hタグは文中で使うのはh3又はh4まででOK
- H１タグ以外は繰り返し使ってOK
- Hタグの順序を守ろう！良い例・ダメな例
１．hタグは文中で使うのはh3又はh4まででOK
hタグはh1～h6までです。
ただし、全部使う必要はないし
記事の文中にh5やh6を使うことはないでしょう。
（というか使っているサイトを見たことない。）
トップページや下層ページやブログの記事内はh2とh3、構成によってはh4までと覚えておくと良いです。
２．h1タグ以外は繰り返し使ってOK
見出しタグは記事中で繰り返し使ってOKですが、
大見出しとなるh1タグは1回です。
h1タグがwebサイトのページ全体の大見出しとなるからです。
３．Hタグの順序を守ろう！良い例・ダメな例
見出しタグは順番を守りましょう。
下記に良い例とダメな例をご紹介します。
良い例
ダメな例
良い例とダメな例。違い分かりましたか？
h1以外は繰り返し使ってもOKですが、
ダメな例はh1→h3→h2→h3というようにh1の次にh2を飛ばしてh3になっています。
見出しタグの書き方。3つのポイント
続いて、見出しタグの基本的な書き方についても触れておきましょう。
- 見出しタグには「検索キーワード」を入れる
- 見出しは重要なキーワードを左に
- キーワードの詰め込み過ぎはペナルティの対象。自然な文章で
一つひとつ解説していきます。
１．見出しタグには「検索キーワード」を入れる
見出しタグは、検索エンジンに対して「どのキーワードで表示したいか」を教える役割もあります。
特にそのページの大見出しとなるH1タグには、
- そのページに何が書いてあるか
- 検索キーワードは何か
この2点を意識して書く必要があります。
とくに大見出しとなるh1は、そのページの大見出しになりますので、検索キーワードを入れて下さい。
２．見出しは重要なキーワードを左に
重要視したいキーワードほど左に持ってきた方が良いです。
文章の最初に記述されるキーワードほど、そのページにとって重要なワードとGoogleが認識してくれます。
３．キーワードの詰め込み過ぎはペナルティの対象。自然な文章で
とはいえ、キーワードを過度に詰め込むのはNGです。
やり過ぎはペナルティの対象になったり、頑張り過ぎると逆に順位を下げる原因になりますので、あくまで自然にです。
どれくらいが丁度良いかは、他のホームページを参考にしながら掴んでいきましょう。
見出しタグの文章。具体的な考え方
ここまで、見出しタグの基本構造と書き方のルールを解説してきましたが、
SEO対策と実際の読みやすさを両立するために、抑えておくべきポイントがあります。
ここを忘れると、実際に書いてみたけど読みにくい。話がつながらないなど違和感が出る文章になってしまう恐れがありますので合わせて参考にどうそ。
Hタグの文章はツリー構造で書く
h1➡h2➡h3はツリー構造で書くのが良いです。
- ホームページとは
- ホームページの作り方
- 各種設定
というような流れです。
この順序がバラバラだと読みにくくなったり、検索エンジンからの評価が下がる恐れもあります。
見出しは飛ばし読みでも理解できるように
現代人は忙しいので、ほとんどの人は記事を全部読みません。
なので、まずは見出しを見たときに何が書いているのか大体わかるように書くと良いです。
たとえ飛ばし読みでも大体わかるようにです。
因みに、このページの構成はこのようになっています。
大まかな流れや、言いたいことが分かると最後までスクロールして見てくれる確率が高まりますし、最初は飛ばし読みしていたけど、気になる部分は読んでくれる可能性も高まります。
一般的に良いとされている文章構造を2つご紹介します。
文章は基本的に
- 結論から話す
- わかりやすい
- 知りたいことが書いている
という順序が読みやすいと言われています。
文章の書き方に関しては、
一般的な記事なら
PREP（プレップ）法
- 「Point」：文章の要点。まずは結論を述べる
- 「Reason」：結論の理由を説明する
- 「Example」：具体例・事例を説明する
- 「Point」：最後にもう一度結論を述べる
この４つの頭文字をとってPREP（プレップ）法と言います。
ブログの記事など一般的なコンテンツに適している構成です。
LP（ランディングページ）やトップページなど販売につなげるなら
クエストフォーミュラ
- Qualify（絞り込む）
- Understand（共感する）
- Educate（啓発する）
- Stimulate（興奮させる）
- Transition（変化させる）
の頭文字をとってQUEST、フォーミュラとは公式、決まり文句などの意味です。
大まかな流れとして覚えておくと便利です。
見出しタグに関してありそうな質問について
見出しタグに関して、ありそうな質問にお答えしておきます。
トップページと下層ページで違い
トップページと下層ページでの違いは、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. ユーザーに焦点を絞れば、他のものはみな後からついてくる。
まぁ、これが基本でありながらシンプル過ぎて最も難しいとも言えるのですが…汗
タイトルでユーザーの興味を引いたり、読みたいと感じさせることで精読率をあげるのも大事です。
ユーザーの視点に立って役立つコンテンツを作っていきたいですね。
この記事を読んだ方のコメント