こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。
今回はHTMLにおける見出しタグの使い方について解説します。
Webデザイナーだけでなく、Webライターやブロガーの方は必ずおさえておくべき項目になるのでしっかりと覚えておきましょう。
目次
HTMLの見出しタグとは?
そもそもHTMLの見出しタグとは、その名前の通り「見出しを作るためのタグ」のことです。
見出しタグには、<h1>、<h2>、<h3>…というように全部で6種類あります。
数字が小さいほど大きな見出しを表しています。
<h2>... 2番目に大きな見出し
<h3>... 3番目に大きな見出し
<h4>... 4番目に大きな見出し
<h5>... 5番目に大きな見出し
<h6>... 6番目に大きな見出し
HTMLコードの例
では実際にコードを書いていきましょう。
<h1>h1は1番大きい見出し</h1>
<h2>h2は2番目に大きい見出し</h2>
<h3>h3は3番目に大きい見出し</h3>
<h4>h4は4番目に大きい見出し</h4>
<h5>h5は5番目に大きい見出し</h5>
<h6>h6は6番小さい見出し</h6>
このように記述し実際にブラウザに表示してみましょう!
このように表示されるはずです。
この例では見出しタグに対してCSSなどでデザインなどは一切指定していません。
それでもブラウザがh1やh2を読み取って大きめに表示してくれるのです。
h1〜h6タグの使い分け
見出しの使い方にはいくつかルールがあります。
これを守ることで読み手が理解しやすく、検索エンジンにも評価されやすい記事を書くことができるので守るようにしましょう。
- h1〜h6を使う順番を守る
- h1タグの使用は1回だけ!
- h2〜h6は何回使ってもOK!
- 見出しタグだけでは記事を作らない
- 基本的に画像に見出しを使わない
- キーワードを無理に詰め込みすぎない
- デザインを決めるために見出しタグは使わない
基本的にはこの項目のルールを守れば間違いないでしょう。
順番に見ていきます。
h1〜h6を使う順番を守る
基本的にh1見出しから順番に使っていきます。「デザイン的に都合が良いから」といきなりh4見出しを使ったりするのはNGです。
h1タグの使用は1回だけ!
h1タグは最も大きな見出しで、ウェブページのタイトル(題名)を表すのに一度だけ使うのが理想的です。複数回使用自体がSEO的にマイナス評価になることは無いようですが、記事のテーマが読み手にも検索エンジンにも伝わりづらくなります。
h2〜h6は何回使ってもOK!
h2以下の見出しタグは何回使ってもOKです。
基本的に記事本文ではh2〜h6を使うことになるでしょう。
見出しタグだけでは記事を作らない
見出しタグだけで記事を書かないようにしましょう。
h2〜h6タグを使ったらその後にはpタグで本文をきちんと書くのがルールとなっています。
なぜなら「見出しだから」です。見出しの後には本文が来るので、pタグは使うようにしましょう。
基本的に画像に見出しを使わない
見出しタグ内には基本的に文字を入れます。
それは、「サイトタイトル画像にh1タグを使う場合」です。
もしサイトやブログのタイトルに画像が使われていた場合、下のサンプルコードのようにimgタグのalt属性内にサイトタイトルを入れるようにしましょう。
<h1><img src="example.png" alt="FUNA BLOG" /></h1>
キーワードを無理に詰め込みすぎない
とよく言われます。
たしかにキーワードと記事内容の関連性を高めるためにGoogleが見ているというのは間違いなさそうなのですが、あまりにも多くのウェブサイトで意図的にキーワードを詰め込んでいて、最近ではGoogleもその対策をしてきているようです。
今や見出しにキーワードを詰め込むことで検索順位を上げようとするのは、かなり危険な手法です。スパムまでとは見なされなくとも、「ユーザービリティの低いページ」とみなされてしまう可能性があるので、不自然にキーワードを繰り返し使わないように注意しましょう。
デザインを決めるために見出しタグは使わない
「この部分の文字を大きくしたい!」「h3タグの見た目が気に入っている」という理由で、見出しタグを使えば記事の論理構成が崩れてしまいかねません。h1〜h6タグは強調のためではなく「見出し」のために使いましょう。
まとめ
冒頭でも少しお話ししましたが、Webデザイナーだけでなく、Webライターやブロガーの方は必ずおさえておくべき、HTMLにおける見出しタグの使い方について解説しました。
サイトを構築するうえで必須となるので、しっかりと覚えておきましょう。
[HTML] divとspanタグの違いは?誰にでもわかりやすく解説