hタグに画像を使用するSEO上の影響を解説！hタグ設定で意識すべきポイントは？alt属性の役割と設定時の注意点もご紹介！

hタグ最適化によるSEOの影響

hタグには6種類あり、「h1」～「h6」まで存在しています。

検索エンジンには数字が小さいほうが重要度が高いと認識されます。

コンテンツの大見出しは「h1」中見出しは「h2」小見出しは「h3」というように、文章構成に合ったhタグを使用しましょう。

正しくhタグを使用すると検索エンジンがコンテンツの内容を理解できるので、その情報を必要としているユーザーにページを表示させることができます。

その結果SEO効果が高まる仕組みです。

数字が小さいものの前に大きいものを使用すると、検索エンジンが混乱するだけでなくユーザーにも読みにくいページになるため、注意が必要です。

hタグは適切に使用しなければ効果を発揮しないため、使い方やコツをしっかりと身に付けましょう。

hタグに画像を使用するSEO上の影響

hタグにはテキストが推奨されていますが画像を使用することも可能と先述しました。

では、画像を使用することでSEOにはどのような影響があるのでしょうか。

検索エンジンとユーザーの観点から見ていきます。

画像を使用しても問題はない

まずは検索エンジン側からです。

テキストでの作成が推奨されている理由は、検索エンジンがコンテンツ内容を理解しやすいためです。

検索エンジンは、使用されている画像がどのようなものなのかを認識することができません。

そのため画像を使用する場合は、検索エンジンに画像がどのようなものなのかを理解してもらうためにポイントがあります。

このポイントは後で説明します。

ユーザーにとって分かりやすい

ユーザー側から見たメリットはコンテンツが見やすく・読みやすくなることです。

テキストばかり使用されているコンテンツは、長時間見ていると疲れます。

コンテンツの一部分に画像が使用されるとデザインに幅が広がり、ユーザーが読みやすいページになります。

またインパクトのある画像を <h1>に使用することで、ユーザーに強く印象づけることも可能です。

ただし画像を使用する際には、必ずalt属性を設定しなければなりません。

alt属性を設定する

alt属性(オルト属性)とは、使用される画像の代わりになるテキスト情報のことです。

このalt属性を設定することで、検索エンジンは画像がどのようなものなのかを認識することができます。

何らかの理由によって画像が表示されない場合にも、このalt属性は便利です。

代替テキストとも呼ばれ、画像の代わりに設定されたテキストが表示されることになります。

検索エンジンに画像内容を適切に伝えることでSEO効果が高まり、検索結果で上位表示が見込めます。

hタグに画像を設定することで考えられる弊害

ここで、hタグに画像を使用することで生じる弊害を確認します。

• 検索エンジンがコンテンツの構造を理解できない
• SEOへの影響がある

この2点です。2つある弊害は、どちらもクローラーに起こるものです。

クローラーとは検索エンジン内のプログラムのことで、ページ内のテキストや画像をデータ化することができます。

1つずつ、解説していきましょう。

クローラーにコンテンツの構造が伝わらない

クローラーは検索エンジンが順位を決めるデータを、サイトを巡回して集めます。

当然のことながらクローラーにサイトを訪れてもらわなければ、検索結果に表示されることはありません。

クローラーに検索されやすいページを作成することが、検索結果で上位表示させるための第1歩です。

ページのデータを収集されて終わり、ということではありません。

ページを訪問してもらい正しく情報を認識してもらうことで、SEO効果が高まります。

問題点はこのクローラーが、画像の全てを認識できるほど万能ではないことです。

コンテンツ作成者がポイントとして設置した画像を、スルーしたり間違って解釈したりする可能性があります。

hタグで画像を使用することで起こる弊害の1つ目は、コンテンツの内容が正しく認識されないことです。

検索順位へ影響する

2つ目の弊害は、検索結果に影響がでることです。

コンテンツの内容を正しく認識してもらえないと、検索順位がどんどん下がります。

最悪の場合、検索結果に表示されない可能性も考えられます。

画像内に代替テキストを設定することである程度の回避はできますが、クローラーが全てを認識できるとは限らないからです。

弊害を覚悟した上で、画像を使用してください。

alt属性の役割と設定時の注意点

hタグに画像は使用できますが、その際に必要となってくるのがalt属性の設定です。

このalt属性の役割と、設定時の注意点を解説していきます。

画像の代わりとなるテキスト

alt属性とは画像の中に設定するテキストのことです。

alt属性を設定することで、クローラーは画像がどのようなものなのかを認識することが可能になります。

また何らかの理由で画像が表示されない場合、alt属性を設定しておけばテキストで表示されます。

alt属性はユーザーにも検索エンジンにもわかりやすいページを作成する際に、必要となるテキストです。

設定時の注意点

alt属性は単に画像の情報を入力すれば良いということではありません。

情報量が多いほうが良いのではないかと思われがちですが、長すぎると検索エンジンにスパムだと認識されてしまいます。

alt属性は画像の代わりとなるテキストなので、重要なことを簡潔に記述しましょう。

また、SEO効果を高めるためにキーワードとなる言葉を使用することが推奨されますが、alt属性については無理に使用する必要はありません。

先程の説明にもあるように、alt属性は画像の代わりとなるテキストです。

画像に関係のないキーワードを詰め込むと、alt属性の役割を果たしません。

alt属性には画像の情報のみを設定するようにしましょう。

h1タグに画像を設定する際の注意点

テキストの使用が推奨されているhタグですが、ページのデザイン性向上のために画像の使用も可能です。

h1タグに画像を使用するには、いくつかの注意点があります。

• 使用する画像は使い回さない
• テーマに合った画像を使用する
• text-indentに注意する

ここでは3つのポイントに絞って解説します。

コンテンツのデザイン性を高めたり、ユーザーに読みやすいページを作成するときに、画像は大変便利です。

注意点を守って、適切に使用しましょう。

画像を使い回さない

h1タグに使用する画像は、コンテンツ内で使い回すのは避けましょう。

h1タグは大見出しのことです。

大見出しが何度も登場してしまうと、ユーザーも検索エンジンもどこが1番重要な場所なのか理解できません。

混乱を招く可能性があるため、h1タグの画像は1種類にしましょう。

ページテーマに合わせた画像を設定する

例えば、服飾関連のサイトを作成しているとします。

トップスの流行についてのページを作成する時にボトムスの画像を使用してしまうと、ユーザーは混乱してしまいます。

トップスのコンテンツにも関わらず、ボトムスの画像があることでページの内容が間違っているのではないかと勘違いされかねません。

テーマが「トップス」であるなら、関係のない画像を使用するのは避けましょう。

ページのテーマにふさわしい画像を選定して、使用することが望まれます。

text-indentの使用に注意

text-indentとはインデント(字下げ)を行うことです。

効果的に使用することで、サイト全体が見やすいものになります。

h1タグに画像を設定する場合、このtext-indentに注意しなければなりません。

サイトのレイアウトやデザインを指定するCSSというものがあります。

h1のテキストをCSSを使用して、text-indentで隠すことはスパム行為になってしまいます。

画面の外に飛ばすのも同様の行為です。

h1タグに画像を設定する場合は、以上の3つの点に注意しましょう。

hタグ設定で意識すべきポイント

hタグに画像を使用する注意点について解説しましたが、他に意識するポイントはあるのでしょうか。

• キーワード
• 数
• 順番

について詳しく見ていきましょう。

キーワードの場所

hタグでSEO効果を高めるためにポイントとなるのは、キーワードをどこで使用するかです。

h1タグはタイトルと同じものと認識されるため、検索結果に表示されません。

つまり、キーワードを使用する必要があるのはh2タグ以降ということです。

検索エンジンはh2の見出しとその後の文章を参考にしており、その中でキーワードとコンテンツ内容の整合性を判断しています。

キーワードの使用しすぎはスパムと認識されるため注意が必要ですが、少なくともh2タグにはキーワードを使用するのが良いと考えられます。

h1タグは複数設置しても良いのか

先程も軽く触れましたが、h1タグは大見出しのことです。

大見出しが複数ある方がユーザーが読みやすい場合は、複数設置しても問題ありません。

しかし、検索エンジンがコンテンツを正しく認識しない可能性があることを忘れないようにしましょう。

ユーザーに読みやすいコンテンツを作成することも大切ですが、検索結果で表示されるように工夫することも必要です。

双方にわかりやすい見出しの作成を心がけましょう。

適切な順番で設定する

hタグには順番があります。6種類ある数字の小さいものから順に重要度が高いと判断されます。

大見出しの前に小見出しが設置していたり全てを中見出しで表示していたりと、使用方法や順番を間違うと大変読みづらくなってしまいます。

数字の小さいものの前に大きいものを使わないようにしましょう。

hタグに画像を使用せずにデザイン性を高める方法

画像を使用しなくとも、サイトのデザイン性を高める方法があります。

それは、CSSと呼ばれるデザインシートを使用することです。

CSSを使用すると、テキストに見栄えを付けることができます。

下線を引いたり背景色をつけたりと、コンテンツを読みやすいものにします。

デザイン性を高める方法は画像を使用することだけとは限りません。