見出し画像ってSEO的にどうなの？クローラーに伝わる見出し画像を解説！

記事の内容を分かりやすく伝えるためにも、SEOという観点からも、見出しはとても大切です。

では、デザイン上キレイに見える見出し画像は、SEOの観点からするとどうなのでしょうか。SEO上で特に問題はありませんが、見出しはテキストがベストだとされています。
それは見出しがクローラーにページ内容を伝えるといった役割があるからです。

SEO効果を含めて、改めて見出し画像のメリットデメリットを整理してみましょう。また、見出し画像を設置する際にはいくつかの注意点があります。

Webコンテンツで使用する見出しタグについては下記記事で詳しく紹介していますので、参考にしてみてください。

見出し画像とは？

見出し画像とは、見出しにテキストの代わりに画像を使用することです。画像をしっかりと作り込めば、テキストやcssによる装飾だけでは表現できないデザインを実現できます。

デザインの幅が広がるため、ユーザーにとっての見やすさやオリジナリティのあるデザインなど、使い方によってはメリットの多いWebデザインとなります。ページによってはサイトロゴなどを見出しにしたいこともあるでしょう。

デザイン面においては優れている見出し画像ですが、SEO観点からするとどうなのでしょうか。

見出し画像のSEO効果は？

見出し画像のメリットは、何よりもユーザー目線で分かりやすいということが挙げられます。

もちろん、cssによる装飾だけでも本文と差別化はできます。しかし、見出しデザインによっては本文中の画像と色味が重なって視認性が下がることもあります。

見出し画像であれば、記事内容に関連性の高い画像を採用して何についての話題なのかを明確にしたり、段落ごとの区切りを分かりやすくしたり、ユーザーがコンテンツを読み進める上での助けとなってくれるでしょう。

しかし、ユーザーにとってわかりやすいことがクローラーにとってもわかりやすいとは限りません。ユーザーにとってはわかりやすい見出し画像でも、クローラーにとって画像は＜img src=”http://～〇〇.jpg”＞というタグに過ぎないのです。このままでは、クローラーにこの画像が見出しであることが伝わりません。

テキスト見出しがベストとされるのは、クローラーはテキスト（文字情報）を認識することはできますが、画像に描かれているものがどのような画像なのかを判別することができないからです。そのため、画像が見出しとして認識されないと、クローラーにコンテンツの構造が正しく伝わらないため、テキストの見出しが良いとされています。

その結果、見出しの情報がうまく検索エンジンに伝わらずサイトを正しく評価してもらえず、検索結果にて思うような順位にならないという可能性が出てきてしまいます。
そもそも、Googleは「検索エンジン最適化（SEO）スターター ガイド」において、Google（クローラー）とユーザーがコンテンツを理解できるように見出しタグを設置することを推奨しています。

クローラーに見出しと認識してもらうためには、正しく見出し画像を設置する必要があります。
そして、正しく設置されていれば、見出しが画像であってもSEO上の問題はありません。

クローラーについては下記の記事でも解説しています。

クローラーに認識される見出し画像の設置方法

クローラーに見出し画像を認識してもらうためには、いくつかのポイントを押さえておく必要があります。

1.画像を見出しタグで囲む

まず、画像を表示させるimgタグを見出しタグで囲みましょう。

<h2><img src="http://～〇〇.jpg"></h2>

見出しタグはh1からh6まであります。数字が小さいほど重要な見出しで、一般的にはh1を記事タイトル、h2～h4くらいまでを本文中の大見出し、中見出し、小見出しとして使用することが多いでしょう。設置位置によって該当の見出しタグを使用してください。

見出しタグは小さな数字から順に登場します。使用順がh4、h2、h3のようにバラバラにならないように気を付けてください。見出しタグを正しい順番で使用することで、コンテンツの構造がクローラーに正しく伝わります。

見出し画像だけではコンテンツの構造がクローラーに伝わりませんが、見出しタグで囲むことで、この画像が見出しにあたるということをクローラーが認識できるようになります。

2.見出し画像の代替えテキストを入力する

ただ、見出しタグで画像を囲んだだけでは十分ではありません。
その画像がどういった画像なのかをクローラーが認識できないからです。画像であること、この画像が見出しであることを認識しても、内容が分からなければ適切な見出しとは判断してもらえません。

クローラーに画像の内容を伝えるためには、画像にalt属性を追加します。alt属性は代替えテキストを設定するための属性で、画像の内容を説明するテキストを設定することができます。

<img src="http://～〇〇.jpg" alt="見出し画像">

上記のように画像を表示するimgにalt属性を追加することで、クローラーが画像の内容を理解できるようになります。

alt属性については下記の記事でも解説しています。

alt属性の役割

alt属性は、クローラーに画像の内容を伝えるためだけのものではありません。画像の代わりとなるテキストで、何らかの原因で画像が表示されないときに代わりに表示されます。

上記例では「ペコプラ」のロゴが表示されないときには、alt属性として設定された「SEO対策なら株式会社ペコプラ」というテキストが表示されます。

また、alt属性は視覚障害者などへの配慮といった意味合いもあります。視覚障害者や画面を見るのが困難な事情がある場合には、スクリーンリーダーを使用して画面の文字情報を読み上げます。

画像が表示されないときalt属性が設定されていない画像は読み上げの対象にならないため、画像の使い方によっては意味が通じなくなってしまいます。alt属性を設定することで、どのような画像かを伝えることができます。

alt属性を設定する際の注意

alt画像を設定する際には、が正しく画像を説明するテキストになっているか気を付けましょう。

<img src="http://～〇〇.jpg" alt="SEO対策、リスティング、WEBサイト制作、コンテンツ作成、風評被害対策">

上記例のような、キーワードを羅列したようなテキストは避けてください。キーワードの羅列では、画像の説明とは言えません。

見出し画像であれば、見出しがそのままalt属性になるので迷うことはないでしょう。
alt属性を設定する際には、読み上げたときに意味が通じるかを基準に考えることをおすすめします。

見出し画像を使わずにデザイン性をアップさせる

見出し画像を使用するのは、サイトのデザイン性を高めたい場合がほとんどでしょう。

見出し部分に画像を使用したい場合、見出しそのものを画像にするのではなく背景を画像にする方法もあります。背景を画像にしてその上にテキストで見出しを重ねます。

上記画像は、背景画像の上に「ペコプラSEOは第三世代へ突入」というテキストを重ねています。

見出し画像の場合は、コンテンツ作成の度に画像を作成する必要があります。しかし、背景を画像にすれば、背景画像を何パターンか作っておけば使いまわしが効きます。その都度見出し画像を作成するよりも、画像制作の手間は軽減されるでしょう。同じテイストの画像でデザインイメージを揃えたい場合、背景画像だけを見出し以外のさまざまな箇所に使えるため便利です。

フォントデザインを調整したり、ボーダーをポイントとして表示させたり、cssで実現できるデザインと組み合わせればデザインの幅も広がります。

まとめ

見出し画像は、SEO上で特に不利になることはありません。そのためには、見出しタグで囲むこととalt属性を設定するという見出し画像設置のポイントを押さえることが重要です。この2点が漏れていると、クローラーに正しくコンテンツの構造が伝わらずにサイトが正しく評価されず、検索順位が思うように上昇しないという可能性が発生します。

alt属性はユーザーの立場で考えて設置することが重要です。画像が見えない場合に、画像の内容を正しく説明できるテキストを設定するように心掛けましょう。