h1タグに画像を設定しても良い？タグの役割や設定する際の注意点について解説

2022年11月16日

h1タグと呼ばれるタグをご存知ですか？

ITに関連するお仕事をされている場合やWebサイトやコンテンツを運営、作成している場合は聞いたことがある方が多いと思いますが、初心者であればh1の他にもh3やh6等いくつか種類のあるhタグについて、違いや使い方をよく知らないという方もいらっしゃるかと思います。

そこで今回はh1タグとは何か、その役割や使い方のポイント、そして画像を設定することができるのか？についてまとめ、紹介させていただきます。サイトに訪問した方が読み進めるか離脱するかの大きな要素を担っているh1タグですので、この情報が皆様に役立ちますと幸いです。

h1タグって何？

h1タグとはhtmlタグで見出しを設定するhタグの一つ。hタグのhとはheadingの略で見出しという意味を持ち、h1～h6までの6つがあります。h1はその中で最も重要度が高いタグになります。

h1タグはそのページごとの全体を要約した内容を示し、タイトルと同じ意味で記載されることも一般的です。そのためh1タグはtitleタグの次に重要なタグとも言えます。

h1タグの役割とは？

h1タグには主に以下の2つの役割があります。

ユーザーと検索エンジンに向け分かりやすく内容を伝える

先述した通り、h1タグはページの要約を示すテキスト内容とし、訪れたユーザーとGoogle等の検索エンジンに対し記事の内容を簡潔に、分かりやすく伝える役割と目的があります。

h1タグはコンテンツの上部、言わば一番目立つ場所に配置されますので、ユーザーはh1タグを見てその先を読み進めていくかどうかを判断すると言っても過言ではありません。

SEO

h1タグに検索ユーザーに役立ち、適切なキーワードを入れ込むことで、SEOを行うことも出来ます。

SEOはユーザーが検索エンジンで検索を行った結果、掲載される順位が上の位置であるほどクリックする可能性が高いため、検索されやすいキーワードをblogなどの文章やコンテンツの中に入れ込み上位の表示を狙うための施策です。

Googleのアルゴリズムによってh1タグの内容が直接的に上位表示に影響を与えるわけではありませんが、ターゲットとなるキーワードを含めることは少なくともSEOの効果を高めることが期待できるのです。

h1タグとtitleタグとの違いとは？

h1タグとtitleタグは同じテキストにしても問題はありません。ではそれぞれのタグの違いは何でしょうか？

それはh1タグはサイトを訪れ既にそのページを”見ている人”に対する物であるのに対し、titleタグはそのページを”見る前の人”に対する物であるということです。

そのためどちらも同じ内容で構いませんが、いずれにせよサイトを閲覧してもらえるかどうかが判断される重要な場所ですので、正しくキーワードを記載して的確に内容を伝えられるように活用することが大切です。

h1タグに画像を設置することは可能！注意点は？

h1タグはテキストで表すことが一般的ですが、中にはサイトの構成やWebデザイン上アイキャッチとして画像（imgタグ）を登録して表示させたいという方もいらっしゃるかと思います。

結論から言うと、h1タグに画像を設置することは可能です。ただし、画像にキーワードを含めたとしても、検索エンジンがすべてを理解、認識するかどうかは難しいためSEOとして考えるとやはり画像よりもテキストの方がよいでしょう。

それでもh1タグに画像を使いたい場合は、以下の点に注意しましょう。

h1タグに画像を設定する場合はaltを必ず設定すること

alt属性とはimgタグの中に設定するテキスト情報で、画像の代替テキストとして画像情報の補足として使われます。

画像が表示できなくなってしまった際、ユーザーに対しここに何の画像が表示されていたのかを示したり、検索エンジンに向けても分かりやすく伝えるという役割があります。

この時、画像とaltの内容が合致していないとSEOの評価は逆に低くなってしまいますので、あまりキーワードを詰め込み過ぎず画像の内容に沿った正しい説明を記載をするようにしましょう。

テキスト>alt

h1として記載する場合、テキストで記載するよりもaltで記載する方が効果が弱くなる可能性があります。なぜならaltは代替テキストで画像が表示されない場合の画像の説明であり、通常ではユーザーには見えないからです。

Googleはユーザーがブラウザで見るものとGoogleに見せるものは同じにするように推奨しています。つまりaltにすることによって、h1に記載されているページの要約はユーザーには見えなくなるのです。

h1はページの要約、altは画像の説明

画像にh1タグを設置することは理論上問題はありませんが、画像の代替テキストであるaltは画像の説明を記載するのが正しい記載で、検索エンジンに画像を理解してもらうために記載するものです。このaltにページの要約を記載するのは正しくないとも言えます。

画像にh1を設置する場合、altにページの要約を記載すると、alt本来の使い方では無くなります。

h1は本来テキストで記載すべきで、画像に設置することはお勧め出来ません。

他のページと同じ画像を使いまわさない

h1タグはコンテンツのテーマを伝える部分であるため、同じ画像が複数のページで設定してしまうとおかしな状況になってしまいますよね。

ユーザーが混乱したり検索エンジンのクローラーに伝わりにくくなるため、他のページに同じ画像を使用することは避け、制作の際は「h1＝ページの要約」を意識しましょう。

h1タグをヘッダーロゴに設定するのは文法上不自然

h1タグをヘッダーロゴに設定してaltを記載する例も多くの制作会社でありますが、ヘッダーロゴにh1タグを設置すると、通常、全ページが同じh1タグになってしまいます。

先述したようにh1タグはページの要約で、大見出しなので、全ページが同じh1の記述になるのは、本に例えると、ページをめくる度に同じ大見出しが表示されることになります。

このような記載はどう考えても不自然で、文法上有り得ない記載です。

また、Googleはヘッダーやフッターのような共通部分をほぼ無視すると発表しているので、ヘッダーロゴにh1を記載すると、h1本来の大見出しの価値が無くなる可能性もありSEOに大きく影響する可能性がありますので避ける方が良いでしょう。

h1タグをSEO上有効に設置するには、サイトの上部に表示されるロゴにh1を記載せずに、ページ個別の大見出しをテキストで記載するのが最も有効な使用方法です。

h1タグを使うポイント

h1タグを使う際、以下のポイントを抑えましょう。

hタグの順番を守る

hタグは1～6まで小さい数字ほど大き見出しとして表示されます。その為、順番を守って記述しないとコンテンツの構造をクローラーに把握してもらえません。数字の順番を守って使うようにしましょう。

デザインはh1ではなくCSSで行う

h1はユーザーに伝わりやすいよう目立つデザインになっていることが多く、たまにフォントサイズやデザインの変更として使っていらっしゃるケースがあります。しかしこのような不要なh1タグが存在しているとクローラーに伝わらずSEOとしても有効ではありません。デザインの変更はCSSで設定し、h1タグとは切り離して考えて下さい。

キーワードは簡潔に

h1タグには、その情報を必要とするユーザーが”検索しうるキーワード”を選定し、簡潔に記述することでSEOの効果を高めます。

h1タグに文字数制限はありませんが、長すぎると入力したキーワードの重要度が薄まりますし、ユーザーも読みづらく要点が伝わりにくくなるため、50文字以内で記述することがおすすめです。

また、ヘッダーロゴにh1が記載されていて、全ページ同じh1になっていないか確認しましょう。

The following two tabs change content below.

清水　康次

過去にインターネット受注で100%稼動する縫製工場を経営しており、平成17年度に経済産業省「IT経営百選」で優秀賞を受賞、翌18年には、最優秀賞を受賞するまでになりましたが、その後縫製工場の経営を止め、飲食店のインターネット担当として勤務いたしました。平成28年11月より独立してSEO対策とWEBコンサルタントとして多くのサイトの検索流入やコンバージョンの改善実績があります。

SEO対策とは?

Posted by 清水　康次