/*サーチコンソール*/ /*google adcense*/

見出しを表す方法【HTML】

2020年1月22日

こんにちは、Kosei(https://twitter.com/pompom_stk)です。

今回はHTMLにおいて、見出しを表す「h要素」について解説していきます。見出しは「その中にどんな情報があるのか」を表すのに、とても重要な要素です。

この記事の要点まとめ
h要素って何?
h要素はheadingの略称で、見出しを表す。
見出しの役割
人に対する役割
見出しとは内容を要約したもので、どんなことが書いてあるかを表す。
検索エンジンに対する役割
h要素はSEOにも効果がある。
見出しの書き方と種類
見出しは<h1>〜<h6>まである。
大見出し(h1)とtitle
h1はbody要素に入り、titleはhead要素に入る。
中見出しと小見出し
h1の中に中見出し(h2)や小見出し(h3)などが入る。
見出しのデザイン
見出しはCSSを使ってデザインを変更できる。
見出しは正しく書こう
見出しは凝って不自然なものにせず、シンプルでわかりやすいものにする。

h要素って何?

ハリボー
ハリボー

<h>と</h>で挟んだら見出しになるのかな?

惜しい!見出しの中にも種類があるんだよ。

ヒナ
ヒナ

h要素はheadingの略称で、HTMLにおいて見出しを表します。見出しはWebサイトやブログおいて重要な役割を持っています。headerと名前が似ていますが、別物なので注意しましょう。

見出しの役割

人に対する役割

見出しは読者に対して、「この記事を読むとこんなことがわかりますよ、こんなことが書いていますよ」ということを一言で要約したものです。ブログ以外にも本や新聞などにも見出しが書かれています。

本を例にすると、見出しを数ページかけてまとめたものを「もくじ」としており、ここを読めば「この本に書かれていること」がざっくりとわかります。このブログも同じで上の方にもくじを置いており、そこを見ればこの記事についてざっくりとわかるようになっています。本にしてもブログにしても見出し(もくじ)を見て、気になる項目があれば読んでみるということが多いと思います。

項目ごとのタイトルを見出しとし、人が「見たい、気になる」と思うような見出しを付けることが大切です。

検索エンジンに対する役割

見出しは検索エンジンに対しても大きな役割を持っています。いわゆるSEOっていうやつです。SEOに関してこの記事では詳しく説明しませんが、「Googleなどの検索サイトで検索した時に出てくる検索結果に影響するもの」と思っていてください。

SEOを知らない人にとってはよくわからない内容かもしれませんので、この項目は飛ばしてもらって大丈夫です。

見出しを表すh要素は、Googleでの検索結果として表示されます。これを見て「この記事見てみようかな」となり、ページを開いてもらえます。人に対する役割の項目でも説明した通り、人が見たい、気になると思う見出しを付けることで人の目に入り、たくさんのアクセスが期待できます。アクセスが増えるとSEOにもよく、検索上位に表示されます。そうするとさらにアクセス数が増えることになります。

このように「人の目に止まりやすい見出し」はSEOにも良いです。ですが見出しを意識しすぎて、内容とあまり関係のないような見出しを付けたり、一つの見出しに対してキーワードを詰め込みすぎて不自然な見出しを付けることやめましょう。シンプルでわかりやすいかつ魅力的な見出しを付けることを意識しましょう。

見出しの役割
クリックで拡大

見出しの書き方と種類

見出しを表すh要素は、Webサイトにおいて重要な役割を持っていることがわかりました。p要素は開始タグ(<p>)と終了タグ(</p>)に囲まれた部分が段落となります。なら見出しは<h>と</h>で囲めばいいのかと思ってしまいそうですが、そうではありません。

見出しはh1〜h6まで指定することができます。数字が小さいほど大きな見出しになります。h1なら<h1>見出し</h1>、h2なら<h2>見出し</h2>というように囲みます。とても簡単です。見出しは基本的に数字が小さい(大きな見出し)ほど太字で表示されます。ここからはこの記事を例に説明していきます。

大見出し(h1)とtitle

一番大きなh1は大見出しと呼ばれ、記事全体の見出しを表します。h1はそれぞれの記事のタイトルになるものなので、必ず1記事1つにしましょう。この記事でいうと、「見出しを表すh要素/HTMLの基本」がh1です。

よく勘違いしてしまうものとしてtitle要素があります。title要素は<title>と</title>の間で囲む要素ですが、名前が「タイトル要素」なため、h1ではなくtitleが記事のタイトルなのでは?と勘違いしてしまいがちです。title要素はhead要素に書くもので記事内には表示されず、h1はbody要素に書くので記事内に表示されます。title要素はh要素以上にSEOに対して関わってくるものなので、記事内に表示されなくても必ず指定しましょう。

head要素とbody要素の違いについてはこちらの記事の「head要素とbody要素の役割」という見出しの部分を見てください。

中見出しと小見出し

h1要素の次に大きな見出しh2は中見出しと呼ばれます。この記事でいうと「h要素って何?」などがh2です。

h3以降の小さな見出しは、小見出しと呼ばれます。この記事の「h要素って何?」という中見出しの中にある「見出しの役割」がh3です。さらにその中にある「人に対する役割」と「検索エンジンに対する役割」がh4となります。

僕はあまり使いませんが、さらに小さなh5とh6もあります。

h1は一記事につき一つまでと説明しましたが、h2以降の見出しは記事中に何個あっても問題ありません。不要にわけすぎる必要はありませんが、記事の内容がわかりやすいように、いくつかの見出しを作りましょう。

記事全体の内容を一言で説明したものがh1、その中に書かれてあるものをいくつかの項目にわけたものがh2、さらにその中をわかりやすく小分けにするものがh3以降です。小さな見出しは必ず大きな見出しと関係のあるものにしましょう。

1記事中の見出し例
クリックで拡大

見出しのデザイン

見出しは何も設定していないと、大きな見出しになるほど太字で表示されます。ですがそれだけでは、どこが中見出しでどこが小見出しなのかがわかりにくくなることもあります。それを解消するため、見出しにはCSSを使ってデザインを変更するようにしましょう。CSSについてここでは詳しく説明しませんが、例としてこのブログで使っている見出しを紹介します。

自分で言うのもあれですが、あまりいい見出しではないと思っています(笑)特にh3の見出しがあまり気に入っていないので、また余裕ができたら考えてみようと思っています。下のコードをそのまま使ってもらっても構いませんが、「見出し デザイン CSS」と検索するとおしゃれな見出しがたくさんでてきます。そちらを参考にする方がいいと思います。

HTMLの<div~>と、CSSの.contentsと書かれたものは背景色を設定するためのものです。見出しとは関係がないので、それ以降のコードを参考にしてください。

※CodePenの使い方がわからない方はこちら

See the Pen NWPjoRg by Kosei@SplaTech (@pompom_stk) on CodePen.

見出しは正しく書こう

見出しはそれぞれの記事の顔になります。いくら内容が良くても、見出しがないと読みにくい記事になってしまいます。また、悪い言い方をすると内容に合っていない「人を釣る」ような見出しを付けることはやめましょう。アクセス数は上がるかもしれませんが、読者がすぐにサイトから離れたり不適切なコンテンツと見なされたりなど、サイト自体の評価を下げてしまいます。

見出しを正しく配置すると、読みやすい記事になる他SEOの効果も期待できます。慣れるまでは見出しを考えることが難しいかもしれませんが、何度もやっているうちに慣れます。

検索エンジンを過剰に意識したり、人に見てもらいやすくするために凝ったような見出しをつけてしまうと、不自然な見出しになってしまうことがあります。それよりはシンプルでわかりやすい見出しを付けることを意識しましょう。