HTML/CSS

[HTML] 見出しタグ(h1~h6)を正しく扱う-保存版-

こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

今回はHTMLにおける見出しタグの使い方について解説します。
Webデザイナーだけでなく、Webライターやブロガーの方は必ずおさえておくべき項目になるのでしっかりと覚えておきましょう。

HTMLの見出しタグとは?

そもそもHTMLの見出しタグとは、その名前の通り「見出しを作るためのタグ」のことです。

見出しタグには、<h1>、<h2>、<h3>…というように全部で6種類あります。
数字が小さいほど大きな見出しを表しています。

<h1>... 1番大きな見出し
<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的にマイナス評価になることは無いようですが、記事のテーマが読み手にも検索エンジンにも伝わりづらくなります。

基本的には1ページ(1記事)につき一度だけ使うようにしましょう。

h2〜h6は何回使ってもOK!

h2以下の見出しタグは何回使ってもOKです。
基本的に記事本文ではh2〜h6を使うことになるでしょう。

見出しタグだけでは記事を作らない

見出しタグだけで記事を書かないようにしましょう。

h2〜h6タグを使ったらその後にはpタグで本文をきちんと書くのがルールとなっています。
なぜなら「見出しだから」です。見出しの後には本文が来るので、pタグは使うようにしましょう。

基本的に画像に見出しを使わない

見出しタグ内には基本的に文字を入れます。

重要な画像であっても、h2〜h6タグではさむのはNGです。
ただし、1つだけ例外もあります。
それは、「サイトタイトル画像にh1タグを使う場合」です。
例えば、トップページのサイトタイトルにh1見出しを使うとします。
もしサイトやブログのタイトルに画像が使われていた場合、下のサンプルコードのようにimgタグのalt属性内にサイトタイトルを入れるようにしましょう。
<h1><img src="example.png" alt="FUNA BLOG" /></h1>

キーワードを無理に詰め込みすぎない

「見出しにキーワードを入れることがSEOに効果的」

とよく言われます。
たしかにキーワードと記事内容の関連性を高めるためにGoogleが見ているというのは間違いなさそうなのですが、あまりにも多くのウェブサイトで意図的にキーワードを詰め込んでいて、最近ではGoogleもその対策をしてきているようです。

今や見出しにキーワードを詰め込むことで検索順位を上げようとするのは、かなり危険な手法です。スパムまでとは見なされなくとも、「ユーザービリティの低いページ」とみなされてしまう可能性があるので、不自然にキーワードを繰り返し使わないように注意しましょう。

デザインを決めるために見出しタグは使わない

「この部分の文字を大きくしたい!」「h3タグの見た目が気に入っている」という理由で、見出しタグを使えば記事の論理構成が崩れてしまいかねません。h1〜h6タグは強調のためではなく「見出し」のために使いましょう。

まとめ

冒頭でも少しお話ししましたが、Webデザイナーだけでなく、Webライターやブロガーの方は必ずおさえておくべき、HTMLにおける見出しタグの使い方について解説しました。

サイトを構築するうえで必須となるので、しっかりと覚えておきましょう。

[HTML] divとspanタグの違いは?誰にでもわかりやすく解説


最近の投稿

「ワーケーション」とは?環境省が推している理由やメリットを解説

「ワーケーション」とは?2020年7月に、菅官房長官が「ワーケーション」の普及について表明してSNSやニュースで「ワーケーション」が話題になりました。環境省が推進している理由や導入メリット・デメリットを解説します。

レバテックキャリアは未経験でも転職できるのか?リアルな口コミで検証します

IT特化型転職エージェントの「レバテックキャリア 」は未経験でも転職することができるのか?について実際に利用した方のクチコミを元に調査しました。

レバテックキャリアの悪い評判は本当なのか?利用者から聞く実態と噂の真偽

【2020年10月更新】IT系の転職エージェントで有名な「レバテックキャリア」ですが、なぜ悪い評判や悪い口コミが多いのか?その理由について説明します。また、是非登録すべき他の転職エージェントもご紹介していますので、参考にしてみてください。

その会社は大丈夫?知っておきたいブラック企業の特徴

就職先がブラック企業ではないか不安… 転職を考えているけど、ブラックな会社だったらどうしよう… こういった悩みや不安を抱えている方も多くいると思います。 就職や転職をした際に「この会社、ブラックだった ...

【2020年最新保存版】副業と複業の違いやそれぞれの意味について徹底解説!

こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 今、話題になっている「テレワーク」という働き方を利用して「 ...

Copyright© FUNA BLOG , 2020 All Rights Reserved.