ブログ見出しの正しい書き方は?HTMLタグから画像の入れ方まで解説

ブログに見出しがあると、SEO対策にもなり、読者にもブログを読んでもらいやすくなります。

とはいえ、次のような悩みを抱えている人もいるのではないでしょうか。

  • ブログの見出しの書き方が分からない
  • ブログの見出しのつけ方にルールがあるって本当?
  • 読者にブログを読んでもらえる魅力的な見出しをつけたい

ブログの見出しの書き方はコツをつかめば簡単です。さらに、ルールを守って魅力的な見出しを書くとSEO対策にもなり、読まれるブログを書くことができます。

ひがし
元鍼灸整体師のWebライターのひがしです。
僕は現在、Webライターの資格を持ち、過去に納品した記事も多数のクライアントから「読みやすい」と好評をいただいています。
今回は僕がライター講座で学んだことや過去のブログ執筆の経験から、見出しの書き方をお伝えします。どうぞ、ご期待ください!
  • ブログの見出しを付けるメリット
  • HTMLにおける見出しタグのルール
  • 魅力的な見出しのつけ方や見出し下の画像の挿入方法

この記事の見出しの付け方をマスターすると、多くの人に読んでもらえるブログを書けるようになります。ぜひ参考にしてください。

大中小の見出しをうまく並べてブログを分かりやすくする

見出しをうまく使うと、読みやすいブログになります。見出しの種類は以下の通りです。

  • 大見出し
  • 中見出し
  • 小見出し

見出しを並べてみると、次のようになります。

タイトル

大見出しA

中見出しA

中見出しB

小見出しA

小見出しB

中見出しC

大見出しB


なお、ブログのタイトルが大見出しだとする意見もありますが、今回は大見出しはタイトルとは別にしております。

見出しを大中小に区別して使うことで、ブログの内容を区分けしたり、まとめたりするのが可能です。

なお、中見出しや小見出しは必ず使うわけではなく、必要に応じて利用すると良いです。つまり、「大見出し」だけでブログを仕上げても良いです。ただし、以下の点は注意してください。

  • 「大見出し」がない場合、「中見出し」は使えないこと
  • 「中見出し」がないと「小見出し」は使えないこと

次に見出しのメリットを解説しますので、どうぞご覧ください。

ブログで見出しを付ける5つのメリット

ブログで見出しを付けるメリットを5つお伝えします。

ひがし
見出しのメリットを理解して、ブログの中に盛り込むことで、読者にとっても魅力的なブログになります。ぜひ参考にしてください。

文章が読みやすくなる

内容を要約した見出しを付けると、文章が読みやすくなります。たとえば、以下の例文をご覧ください。

見出しがない文章

見出しがない文章

改段落がされているものの、文章が羅列されて読みにくい印象です。

これを、見出しを入れて書き直してみましょう。

見出しがある文章

見出しがある文章

大きく目立つ見出しを付けることで、全体的に読みやすい印象に変わったのではないでしょうか。見出しがあった方が、内容の大筋を知ったうえで文章が読めますので、文章も理解しやすいのです。

見出しを目次にすることで文章の内容がひと目で分かる

ブログの場合、見出しは目次にすることができます。本のようにブログにも目次があると、どこに何が書いてあるか一目瞭然ですよね。

最近のブログは、一番目の見出しの上に目次を表示させて、ブログの内容が簡単に把握できるようにしてある場合が多いです。

ワードプレスやはてなブログ、アメブロといったツールでブログを書く際も、目次が自動で表示される機能が付いています。さらに、目次をクリックすると目的の見出しまでジャンプできるようになっていて便利です。

見出しを目次にしてブログの内容がまとめられていると、読者にとって読みやすいブログになります。

ひがし
目次だけでブログの内容が分かれば、最高ですよね!

飛ばし読みされても情報を伝えることができる

見出しは飛ばし読み対策になります。

インターネット上の文章は飛ばし読みされることが多いです。文章を飛ばし読みされると、ブログの内容をまったく伝わらないことも。

そこで、目立つように装飾された見出し文字があると、飛ばし読みしている読者でも、気になる見出しで止まってくれる可能性があります。

忙しい読者が気になる部分だけでも、ブログを読んでもらうのに見出しが有効です。

ひがし
携帯は、スクロールでサクッと飛ばし読みすること多いですよね。

見出しを並べて構成を作ることができる

構成を作る際に見出しがあると、とても便利。なぜなら、文章を要約する見出しは、情報を整理するのに役立つからです。

構成とは、情報を整理して伝える順番を決めることです。つまり、情報を要約する見出しを考えて、並び方を決めるとそれがそのまま構成になります。

見出しを考え構成を作ることで、整理された情報を分かりやすい順番で読者に伝えることができます。結果的に、読者に伝わりやすいブログになります。

SEO対策でブログが上位表示されやすくなる

見出しを考えることは、SEO対策になります。ブログや記事の検索の表示順位を決めているのは、クローラーと呼ばれるネット内を回遊するロボットです。

クローラーは、記事の表示順位を決める判断材料のひとつとして、見出しを重視しています。クローラーが読み取る見出しは、<h1>~<h6>といったHTMLタグで囲われた文章です。

<h1>~<h6>は見出しタグと言われ、番号が若いほどクローラーが上位表示の判断基準として重要視しています。

つまり、見出しタグをルールに従って作ることは、SEO対策にもなるのです。

ひがし
次に、見出しタグについて解説します。

【HTML】見出しタグ<h1>~<h6>を使いこなそう

ここでは、見出しタグの説明と使い方のルールを解説します。SEO対策でも大切なことなので、ぜひご覧ください。

タイトル及び大中小の見出しが<h1>~<h6>のタグに対応する

はじめに解説した大中小の見出しとは、次の通りに対応します。

  • タイトル:<h1>タグ
  • 大見出し:<h2>タグ
  • 中見出し:<h3>タグ
  • 小見出し:<h4>~<h6>タグ

一般的に使われる見出しタグは<h4>までだと言われています。そのため、<h5>以下を使う機会はほとんどないでしょう。また、見出しの内容が長くなりそうな時は、細かく栗れないかを検討するのも読みやすいブログにするためのコツです。

ひがし
ちなみに、僕も<h5>以下の見出しタグを使ったことがないです。

次に見出しタグのルールについて解説します。検索で上位表示させるためにも重要なポイントなので、ぜひご覧ください。

見出しタグを使う際に大切な4つのルール

ここでは、見出しタグのルールを解説します。ルールは絶対ではありませんが、SEOで有利になるメリットがあるので、参考にしてください。

<h1>タグはタイトルに使って本文には使わない

<h1>タグはタイトルに使われるため、本文中に使うことはありません。ワードプレスで見出しの設定をする際に、本文中で<h1>タグを使わないように注意してください。

番号が若い見出しから使う

本文で見出しタグを使う際は、<h2>~<h4>の若い番号の見出しタグから使いましょう。つまり、<h2>を使っていないのに、いきなり<h3>から使わないようにしてください。

番号順に従属させること

番号が若い見出しタグの方が、上位の見出しになります。そのため、次のような見出しタグの並べ方は誤りです。

間違った見出しタグの使い方

<h3>誤った見出しタグのつけ方とは</h3>

<h2>なんとなく見出しを付ける</h2>

<h2>見出しのルールを無視する</h2>

対して、見出しタグを正しく使うと次のようになります。

正しい見出しタグの使い方

<h2>誤った見出しタグのつけ方とは</h2>

<h3>なんとなく見出しを付ける</h3>

<h3>見出しのルールを無視する</h3>

<h3>見出しは、<h2>見出しの下に従属する形になりました。

下位の見出しは2つ以上にする

上位の見出し一つに対して、下位の見出しは2つ以上にしましょう。もし、下位の見出しが2つ以上ない場合は、下位の見出しを付けないようにしてください。たとえば、以下の通りです。

間違った見出しのつけ方

<h2>誤った見出しタグのつけ方とは</h2>

<h3>なんとなく見出しを付ける</h3>

<h2>見出しの下に<h3>見出しが一つしかないので、次のように修正します。

正しい見出しのつけ方

<h2>誤った見出しタグのつけ方とは</h2>

(<h3></h3>の見出しは消して、文章のみを書く)

次に魅力的な見出しのつけ方について、お伝えします。

ひがし
見出しが魅力的だと、読者が読みたくなるブログになるので、ぜひ参考にしてください。

読者を惹きつける魅力的な見出しのつけ方5選

ここでは、魅力的な見出しのつけ方を5つ解説します。見出しの善し悪しは、読者がブログを読むのかどうかに大きく影響しますので、ぜひ参考にしてください。

上位見出しと下位見出しの内容は一致させる

上位見出しと下位見出しの内容が一致しているかどうかを、見出し作成後に確認するようにしましょう。上位見出しと下位見出しが一致していない例は、次の通りです。

<h2>おいしい卵かけご飯の作り方の手順</h2>

<h3>卵かけごはんとは</h3>

<h3>新鮮な生卵を準備する</h3>

<h3>茶碗に200g程度のアツアツのご飯を盛る</h3>

<h3>ごはんの上に生卵を載せる</h3>

一番はじめの<h3>見出しが、上位の<h2>見出しと内容が一致していません。手順を説明するはずなのに、卵かけご飯の説明になっています。

見出しの不一致を見つけるには、構成段階で一度すべての見出しを通して読んでみるのがおすすめです。

ひがし
意外とやらかしますので、必ずチェックするといいですよ。

見出しでブログの内容をネタバレする

見出しでブログの内容をネタバレしていくのも、おすすめです。

たとえば、「スキップを上達させる方法」という見出しがあったとします。これを、ネタバレすると次のようになります。

スキップがうまい人に達に挟まれてスキップすると上達が早い

以上のように見出しで結論を述べると読者に伝わりやすくなるのです。

そして、見出しのしたの文章には理由や具体例を書くようにすると、読者に見出しの内容が伝わりやすくなります。

見出しの中にメリットを入れる

見出しの中に読者が喜ぶようなメリットを入れるのもおすすめです。たとえば、本項目の<h2>見出しにはメリットを加えています。本項目の<h2>見出しは以下の通りです。

読者を惹きつける魅力的な見出しのつけ方5選」

ただ単に「魅力的な見出しのつけ方」とするだけでなく、「読者を惹きつける」を加えています。つまり、魅力的なことで起こる嬉しいメリットも添えて読者の興味を惹いているのです。

読者にとって分かりやすいメリットをアピールすると、読者が文章を読んでくれやすくなるので、メリットを見出しに加えるのはおすすめです。

見出しだけでブログの内容が分かるようにする

.ブログの見出しは、目次にもなります。そのため、目次で見出しだけを並べた際に、ブログの内容が理解できるようにすると良いです。読者も、ブログの内容を把握しやすくなり、結果的にブログを読んでもらいやすくなります。

ひがし
これは、僕が参加したとあるライティング講座でも話されていたことです。実践してみると、確かに効果がありましたよ。

見出しの粒度をそろえる

見出しの粒度とは、物事のくくりの大きさのことです。たとえば、動物だと以下の順に粒度が小さくなります。

(粒度が大きい)
動物

日本犬
日本種の中の小型犬
豆シバ
(粒度が小さい)

粒度をそろえて見出しを付けると、情報が整っている印象を読者に与えて読みやすいブログになります。

次に、見出し下に画像を入れて見た目で分かりやすいブログにする方法をお伝えします。見た目が良いと、読者のブログを読むモチベーションアップになりますので、参考にしてください。

見出し下に画像を入れると読みやすいブログになる

見出しのメリットのイメージ

ここでは、見出しの下に画像を挿入して魅力的なブログに仕上げる方法をお伝えします。ブログにおける画像の使い方が分かりますので、ぜひ参考にしてください。

ひがし
ちなみに、僕の場合は、画像のほかに吹き出しも使っています。

<h2>見出しの下に画像を入れると良い

まずは、<h2>見出しの下に画像を挿入してみましょう。使う画像は見出しのイメージにあった画像を入れると良いでしょう。

見出し下に画像を入れると、その画像から読者が文章をイメージするのに役立ったり、読者に対する文字の圧迫感を軽減したりする効果があります。

ひがし
こんな吹き出しもオッケーですよ。きれいな画像でブログの世界観を出すのもいいですね。

文章が続く場合は<h3>見出しの下に画像を入れる

<h3>文章が続く場合は、<h3>の下にも画像を入れると良いでしょう。画像を入れるタイミングは、携帯でブログを読んだ際に、一画面上に文章以外の要素がないときです。

たとえば、<h3>が三回続いた際に、3つめの<h3>の下に写真を入れると良いです。

<h2>~~~~~~~</h2>
(画像)
文章~
<h3>~~~~~~~</h3>
文章~
<h3>~~~~~~~</h3>
文章~
<h3>~~~~~~~</h3>
(画像)
文章~
<h3>~~~~~~~</h3>
文章~

ブログの読者にもよりますが、携帯でスクロールした際に、画面中が文字のみになるとストレスを感じるようです。

そのため、携帯画面が文字だらけにならないような画像の配置すると良いです。

ひがし
記事を公開後に携帯で確認してみると、画像の入れどころも分かりますよ。

見出し下には著作権フリー画像を入れると良い

見出しの下に画像を入れる場合は、著作権フリーの画像を使うと良いです。有料から無料までありますので、予算に応じて使うと良いでしょう。いくつか紹介しますので、参考にしてみてください。

AC写真とACイラスト

著作権フリーの写真やイラストを提供するサイトとして、もっとも有名だといっても過言ではないでしょう。豊富な写真やイラストがそろっています。画像の検索機能があるので、見出しのイメージにあった画像も見つけやすいです。

AC写真はこちら

ACイラストはこちら

O-DAN

O-DANは、外国のフリー画像を集めたい時におすすめ。無料で使える商用利用可の写真も豊富です。世界中の写真から検索できるので、多様な画像が手に入りますよ。

O-DANはこちら

Envato Elements

こちらは有料限定ですが、ブログの画像に統一感を出したい場合におすすめ。世界のクリエイターが作成したイラストが豊富にそろっています。本ブログの画像は、Envato Elementの画像を使っています。

Envato Elementsはこちら

まとめ;正しい見出しで読みやすいブログにしよう

ブログ内に正しく見出しを設置すると、次のようなメリットがあります。

  • 文章が読みやすくなる
  • 見出しを目次にすることで文章の内容がひと目で分かる
  • 飛ばし読みされても情報を伝えることができる
  • 見出しを並べて構成をつくることができる
  • SEO対策になりブログが上位表示されやすくなる

そして、SEO対策のために見出しを使うには、見出しタグのルールを守って見出しを付けると良いです。ルールには、次の通りです。

  • <h1>タグはタイトルに使って本文には使わない
  • 番号が若い見出しから使う
  • 番号順に従属させること
  • 下位の見出しは2つ以上にする

また、本記事でも紹介したような見出しを魅力的にするテクニックを駆使したり、見出しの下に画像を挿入したりすると、読者にとって読みやすいブログになります。

ひがし
見出しを正しくつけて、ぜひ読者に読まれるブログを作ってくださいね。

ひがしライティング事務所では、以下のお仕事を受け付けています。

  • SEOブログ記事の作成【有料】
  • SEOブログ記事の個別レクチャー【無料】
  • サーチコンソールを使ったブログ記事のSEOリライトのコンサル【無料】

SEOに強い検索ユーザーに読まれる記事を作成したい人は、ぜひご相談ください。

お申し込みやお問い合わせはこちら