Web制作の際には、SEOを意識したページ作りが重要とされますが、中でも忘れてはいけないのが「見出し要素」です。
文章を作成する時に、目次要素となるテキストを見出しとして「hタグ」で囲んで指定する「見出し要素」ですが、間違った使い方をしてしまうとSEOに悪影響を与えてしまうだけでなく、ユーザビリティ面でも下がってしまうため、正しく使うことが推奨されています。
今回はこの「見出し要素」について効果的な使い方をご紹介いたします。もくじ
◆見出し要素とは
「見出し」とは、新聞や雑誌など、一目で記事全体の内容が分かるように文章の前につける「表題（タイトル）」のことです。
また、書籍などにおける「目次・索引」も「見出し」にあたります。
Web制作の際もコンテンツの内容を一目みて分かるように「見出しタグ」を付けて文書に意味のある構造を持たせます。
見出しタグは、英語で「heading tags」という意味で、頭文字のhをとって「hタグ」と言われます。
◆見出しタグの記述方法
hタグは<h1>から<h6>まで存在し、数字の小さい<h1>が最も重要な見出しになります。
<h>に囲まれたテキストは太字になり、<h1>から順に文字の太さと大きさが小さくなります。
見出しタグの前後には改行が入ります。
見出しタグで囲んだ画像も「見出し」として指定することができます。
・見出しタグのサンプル
<!DOCTYPE html>
<html>
<head>
<title>見出しタグ</title>
</head>
<body>
<h1>見出しレベル１</h1>
<h2>見出しレベル２</h2>
<h3>見出しレベル３</h3>
<h4>見出しレベル４</h4>
<h5>見出しレベル５</h5>
<h6>見出しレベル６</h6>
</body>
</html>
◆見出しタグの効果的な使い方
・コンテンツの内容が見出しだけで分かるようにする
見出しとはその下に続くコンテンツの内容を要約する役割を担っているので、見出しを見て内容がある程度分かるように、必ずコンテンツと意味の通じるテキストや画像を見出しに設定しましょう。
・1ページにh1要素は1つ
見出しタグは、数字が小さい方が重要度が高くなるので、h1は最も重要度が高い見出しを意味します。
同じページに複数のh1を使うとどれが最も重要な見出しなのかわからなくなってしまうため、1ページにh1要素は1つだけ使うようにしましょう。
h2以下の見出しタグは1ページ内で何回使ってもOKです。
・h1～h6順番に使う
基本的には、見出し要素はh1から順番に使っていきます。
順番通りでない場合でも致命的な事態にはなりませんが、SEO上、h1から順番に使用した方が良いのはもちろん見た目もよくなるので、適切な記述方法で使うように心がけましょう。
・見出しタグを強調文字などに多用しない
見出しタグを使うと文字が大きくなりますが、タイトルやサブタイトルのように、そのページにとって重要な項目を表現する意味で文字を大きくし目立たせているので、装飾目的で、文字サイズの変更や文字を太く、強調するためだけに見出しタグを使うのはやめましょう。
無理に多用すると、そのページで重要なことが埋れてしまいます。
装飾目的で文字を目立たせたい時は、テキストを太字にする<b>タグや強調する<strong>タグなどの強調要素を使いましょう。
◆まとめ
使用の際のルールも多く、一見難しそうな見出し要素ですが、きちんと記述することで検索エンジンにページの内容を伝えやすくなり、SEOにも効果的です。
またユーザーにとってわかりやすいWebページを作るためには欠かせない要素といえるでしょう。
正しい使い方を覚えて積極的に見出しタグを使うようにしましょう。