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タグの違いは?誰にでもわかりやすく解説


 

Kindle Unlimitedで無料で本が読める

 

Kindle Unlimitedを無料で試す

 

なら最初の30日間は無料でコーディング・デザイン・ブログ・英語・Youtubeの参考書・キャリア・副業・マーケティング・漫画・美容知識・雑誌などが読み放題です。

人気の本もあるので是非お試ししてみてください!30日以内に解約すればお金は全くかかりません。

 


最近の投稿

【今すぐ行動しよう】フリーランスエンジニアとブログの相性は抜群!

フリーランスエンジニアがスキルや経験から得たビジネスノウハウを共有する手段として「ブログ」は非常におすすめです。自身のスキルや知識のアウトプットや、実際に自分が経験したことを共有して同じような境遇の人の手助けになるような情報を公開することで自分に帰ってくるメリットは非常に多いです。今回はそのあたりについて紹介していきます。

【経験談】フリーランスのエンジニアは本当に大変なの?安定のコツやポイント

フリーランスのエンジニアは「大変だからやめとけ」という話をよく聞くので、そのことについて現役でフリーランスエンジニアとして生活している私が、その話の実態を解説しようと思います。フリーランスエンジニアの大変なところはもちろんありますが、それ以上にメリットが多いので私個人的には非常におすすめしています。

【幸福度UP】フリーランスエンジニアの「田舎暮らし」実現できます

フリーランスエンジニアとして田舎で暮らす人が増えてるって聞くけど、本当なのかな?どうやったら実現できるのか?今回はフリーランスエンジニアとして田舎で生活をしたいという方向けに、実現可能なのか、実現するにはどうすれば良いのかをご紹介します。

【単価交渉で収入アップ】フリーランスが単価交渉を成功させる4つのポイント

フリーランスが収入をアップさせるための重要な手段のひとつに「単価交渉」があります。今回は、現役でフリーランスとしてエンジニアをしている私が実践して効果のあった単価交渉の方法やコツをご紹介します。

【 今なら無料!】タスク管理ツール「Backlog」を無料で使う方法と手順

今回は、普段のタスク管理からプロジェクトの管理まで幅広く使えるツール「Backlog」を無料で使うための方法とその手段を画像つきで紹介しました。もし気に入らなければ、期間内に解約してしまえば費用はかかりません。また、以外と知られていない「フリープラン」も紹介しているので、是非参考にしてみてください。

Copyright© FUNA BLOG , 2021 All Rights Reserved.