ホームページを作成する上で度々、使用されるhタグですが、本来の役割から逸脱して使用するとユーザーにとって使いづらいホームページになってしまう場合や、SEO効果を損なってしまう場合があります。今回は、頻繁に使用するからこそ、誤った方法で設置して機会損失しないようhタグを設置する上で気をつけるべき４つのポイントをご紹介いたします。

ホームページにおけるhタグの役割

ホームページを構築するソースコードのうち、hタグは見出しを表すタグであり、重要度に応じてh1〜h6までの６段階に分けられ、以下のように記述します。

ホームページの文章に限らず、見出しのない文章は、ユーザーに読みづらい印象を与えてしまいます。そこで、ホームページでは、hタグにより見出しを設置することで、文章内のいくつかのまとまりを可視化させ、ユーザーにとって読みやすい体裁に整えることが可能です。また、Googleのクローラーがホームページを評価する際も、hタグに含まれるキーワードを優先的に読み取ることで判断します。
以上のことから、hタグによる見出しの設置は、ユーザーの理解を促し、SEO効果も得られるため、非常に重要な要素であると言えます。

ホームページにhタグを設置する際に気をつけるべき４つのポイント

ユーザーにとってわかりやすいホームページを作成する上でも、ホームページにSEO対策を施す上でも重要な役割を担っているhタグですが、やみくもに設置するだけでは十分な効果を得ることはできません。次の４つのポイントを押さえてhタグを適切に設置しましょう。

スタイルを整えるためのhタグの使用は避けましょう

hタグは、文章それぞれのまとまりを示す見出しとしてのみ使用しましょう。ついホームページのデザインを整えるためにhタグを記述してしまいがちですが、文字のサイズや太さを変更するなどの装飾を加える際には、cssを使って調整しましょう。htmlの最新版であるhtml5においても、htmlとcssの役割が完全に分けられているため、装飾は、cssのみで施すようになりました。
hタグは、文章の見出しとして強調したいときのみ記述し、その他の装飾は、cssに記述しましょう。

階層構造を守ってhタグを設置しましょう

hタグの数字は、文章の階層構造を示しています。そのため、h1の次は2、3…と記述されるべきものであり、h2が抜けてh3が使用されたり、初めのh2より先にh3が記述されることは文法上、違和感があります。
なお、Googleは、「順不同でhタグが記述されたとしても、評価を下げることはない」と公言していますが、ホームページの内容を音声により読み上げるシステムでは、hタグは、順序通りに認識されるため読み上げる内容に影響が出てしまいます。また、htmlを編集する際にhタグが順序どおりに設置されていないと混乱を招くため、hタグはホームページの文章の階層構造に沿って、順番に記述しましよう。

hタグの乱用は避けましょう

hタグを必要以上に設置した場合、多くの文が強調されてしまうため、ユーザーにとっては見づらい上、Googleのクローラーにとっても、どちらの文から優先してキーワードを読み込むべきか判断しづらいホームページと評価されかねません。しかし、Googleのクローラーがhタグのキーワードを優先して読み込むという情報を逆手に取り、誤ったSEO対策として hタグを乱用しているホームページが多く存在しています。現在、hタグの多用はペナルティの対象ではありませんが、Googleは、h要素の多用は避けるよう公言していることから将来的に対象となる可能性があるため、hタグの乱用は避けましょう。

各ページごとにh1をユニークに記述しましょう

ホームページの下層ページはそれぞれ内容が異なるため、ページの大見出しを示す h1が同一になることはあり得ません。しかし、実際には、一律の見出しを設置しているホームページが多く見られ、ユーザーは、見出しからページの内容を想定しづらくなってしまいます。また、Googleのクローラーもキーワードを読み取る上で混乱してしまうため、各ページごとに内容に沿ったh1タグを設置するよう心がけましょう。
なお、トップページだけは、h1タグに画像を設置することは問題ありませんが、Googleのクローラーが読み取れるようalt属性に大見出しを記述しましょう。

今回のまとめ

hタグは、ユーザーがホームページの内容を理解する上でも、Googleのクローラーがホームページを評価する上でも非常に重要な役割を果たしています。hタグを設置する上で大切な４つのポイント「スタイルを整えるためだけにhタグを設置しない」「文章の階層構造に沿ってhタグを設置する」「hタグを乱用しない」「各ページでh1をユニークに記述する」を意識しながら、ホームページを作成することを心がけましょう。