皆さんはHTMLの見出しタグ、h1~h6タグをどのように使っていますか？実は見出しタグは記事の読みやすさだけでなく、SEOにおいても非常に重要な要素となっているのです。
今回は、見出しタグの中からh3タグの
・h3タグはどこで使用するのか？
・SEOを意識した見出しタグの使い方
について説明します。
目次
h3タグとは
h3タグの読み方
h3タグは「エイチスリータグ」と読みます。先頭のhは英語で見出しという意味を持つ、Headingという単語の頭文字です。
h3タグの説明
h3タグは、3番目に重要な情報を格納するブロックの見出しとして使用するタグです。見出しタグには1から6までの数字が割り振られていますが、数字が大きくなるにつれて情報の重要性が薄れていきます。
h3タグで利用できる属性
h3タグではHTMLの全てのタグに使用可能な、グローバル属性のみが使用可能です。
| 属性 | 説明 |
|---|---|
| accesskey属性 | キーボードのショートカットの生成し、簡易なアクセスを可能にする |
| class属性 | 要素に任意の名称を与える（同じclass名を複数の要素に与えられる） |
| dir属性 | テキストの書字方向を示す ・ltr：「left to right」左から右 ・rtl：「rght to left」右から左 ・auto：自動的に書字方向を決定する |
| hidden属性 | 要素に関連性がないことを示す |
| id属性 | 要素に任意の名称を与える（同じidは使用できない：一意性） |
| lang属性 | 要素の言語を定義する |
| style属性 | 要素にCSSスタイル宣言を適用する |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 12 |
| Firefox | 1 |
| nternet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 4 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
h3タグの基本的な使い方
h3タグの使い方
h3タグの使い方はとてもシンプル！h3以降のタグになると、どこでどう使うかの判断が非常にシビアになりますが、h1~h3タグまではサイト内で特に使用される見出しタグなので、簡単に見出しを構成することができるのです。実際にサンプルコードを見ながら、確認していきましょう。
See the Pen
h3タグ基本 by rabbittyu (@rabbittyu)
on CodePen.
多くのサイトが上記のような構成になっています。まずh1タグでサイトのタイトルなどを表示します。h1タグは基本的にページ内で1度だけ使用することが推奨されています。
そしてサイトの中で一番に伝えたい情報のメインタイトルを、h2タグに記載します。h2タグ～h6タグは何回使用しても構いませんが、ブロックごとに対象になるように構成すると、より美しいWebサイトが作成できます。
そしてh2タグの中には、サブタイトルとなる情報をh3タグに記載します。もうお気づきの方もいると思いますが、見出しタグは数字順に使うようにしましょう。h2タグからいきなりh4タグに飛ぶのは、あまり推奨されません。
SEOを意識した見出しタグの使い方
SEOとは？SEOを意識することで何が変わる？
まずは「SEO」の意味をしっかり把握しておきましょう。SEOは、”Search Engine Optimization”の頭文字をとった単語で、日本語では検索エンジン最適化として周知されています。
GoogleやYahoo!、Firefoxなど、一般的な検索エンジンでは利用者に有益な情報を提供できるように、表示する記事の順番をこのSEOという機能によって変えています。
Googleでは検索者を第一に考えているため、とにかく有益な情報を検索者に提供しなければなりません。そのためSEO対策が取れていない、可読性（読みやすさ）の低い記事は検索結果の下位に回されてしまうのです。
SEO対策が施された見出しタグの設置方法
では見出しタグはどう設置すればよいのか？しっかりポイントを押さえSEO対策を施してきましょう。このポイントを押さえることで、SEO対策になるだけでなく圧倒的に可読性が向上する効果も。積極的に取り入れたい要素ですね！
- 見出しタグは順番に使用する（例：h1→h2）
- 見出しタグは使用しすぎない
- 適度に見出しタグを使用する
- 見出しは要点をわかりやすくまとめる
- 見出しタグには画像を入れない
ひとまず以上5つのポイントを押さえておきましょう。先ほども紹介しましたが、見出しタグは順番に使うのが鉄則。また見出しタグを使いすぎたり、逆に使わな過ぎたりするのもNGです。
ここで一番大事なのが、見出しはあくまでも要点を摘出した概要であると言う事。見出しは本文そのものではないため、長すぎてはいけません。慣れるまでは難しいかもしれませんが、見出しの中の情報の大まかな要点が理解できつつ、簡潔な文章を見出しにするよう心がけましょう。
以下のコードはSEOを意識して見出しタグを設置したサンプルです。HTMLを記述しただけで、CSSは特に設定していません。
See the Pen
見出しタグSEO by rabbittyu (@rabbittyu)
on CodePen.
今度はタイトルに使用したh1タグを除き、h2タグとh3タグをpタグに置き換えました。pタグとpタグの間に余白が入るため、文章がまとまってしまうことはありませんが、段落として意識することはできません。見出しタグはWebサイト制作において、必ず必要な要素なのです。
See the Pen
見出しタグ SEOなし by rabbittyu (@rabbittyu)
on CodePen.
まとめ
今回はh3タグの基本の使い方を確認するとともに、正しい見出しタグの使い方についても学びました。見出しタグを上手く使うことで、最低限の装飾でも十分に読みやすいサイトを制作することができます。
実際にサイトを作成する際は、常に読者に目線を合わせ、このサイトは有益か？読みたくなるか？を意識するようにしましょう。
参考文献：
SEOラボ
MDN web docks <h1>-<h6>: HTMLの見出し要素
Search Engine Optimization (SEO) Starter Guide（日本語）
