SEDesign

SEOに効果的な画像の使い方とaltタグの適切な設定方法を解説

SEデザイン編集部
2022-04-13
2022-06-10
目次

SEO3画像認識技術の発達した近年では、ウェブマーケティングにおいて画像SEOに対する取り組みが重要視されるようになりました。 SEO対策に効果的な画像の使い方や配置、altタグの設定方法について理解を深めておけば、競合サイトとの差別化が図れます。 自社サイトの品質を向上させて、検索流入の増加を実現させましょう。

SEO対策における画像の役割とは

ウェブサイト内に配置される画像は、SEO対策におけるさまざまな役割があります。自社のイメージを表現するのはもちろん、ユーザーが視覚的に素早く情報を認識するために、画像の掲載は有用です。また、近年のウェブマーケティングでは、SEO対策として画像を活用するケースも増えてきました。

SEOは日本語で「検索エンジン最適化」と訳されます。自社サイトが発信した内容を正しくユーザーの元へ届けるには、Googleをはじめとした検索エンジンが理解しやすいサイトへと最適化しなければなりません。検索エンジンが画像を識別できるようになるまでは、SEO対策として主に効力を発揮するのは文章の内容でした。 しかし、さまざまな検索エンジンが画像の内容を判別してサイトを評価するようになった現在では、SEO対策における画像の重要性が高まってきています。

Googleでは、サイトのテーマや内容に対して適切な画像が配置されているかが評価されるため、テキストに関連してユーザーの理解を深める画像、表や図解などを配置しておくと、評価につながると考えられています。 現在、検索エンジンは、画像のファイル名や設定されたタグの情報だけでなく、画像自体からもコンテンツとの関係性を判断します。

2018年にGoogleレンズが登場したことは記憶に新しいと思います。Googleレンズは、カメラに映ったものを検索するサービスで、撮影したものの名称や似た商品をも教えてくれます。2019年には識別商品は10億を超え、もはやGoogleは画像情報のみで何が写っているのか認識できるようになっています。

Googleレンズで東京タワーを検索した結果

上図のように、Googleレンズで東京タワーの画像を検索すると、Googleは画像を「東京タワー」と認識し、観光名所としての評価と東京タワーが写っている画像を掲載しているサイトをサジェストします。

では、SEOに効果的な画像の使い方には、どのようなものがあるのでしょうか。たとえば、タグに設定する画像の説明文は「alt属性(altタグ/代替テキスト)」と呼ばれ、検索エンジンが画像の内容を正しく理解するための補助として必要なものです。そのほかにどのような方法で、web上での画像の役割をより強化できるのか、ここからは画像の種類別に、SEO対策と期待できる効果について解説します。

サムネイル画像

アートボード 1-2検索結果画面に記事の概要とセットで表示される画像が「サムネイル画像」です。視覚効果でユーザーの関心を惹きつけるサムネイル画像は、ウェブサイト全体の印象を決めるといっても過言ではなく、サイトへの流入増加にも貢献します。

サムネイル画像は、サイトに掲載した画像の中からGoogleのアルゴリズムによって自動的に選ばれます。また、タグを使ってサムネイル画像を任意に指定することもでき、その場合はHTMLページの「PageMapデータ」もしくは「thumbnailメタタグ」を使用します。すでに投稿した記事に追加する場合は、検索上位になっている記事を優先して設定していくと効果的でしょう。

ただし、指定したからといって必ずサムネイルが表示されるわけではありません。検索エンジン側に送る合図という意味合いが強いため、指定した画像が表示されるかどうかを最終的に判断するのは検索エンジン側です。 なお、自動で選定されたサムネイル画像がふさわしくない場合には、削除することも可能です。

画像SEO

Googleの画像検索における評価は、ユーザビリティが最優先されているかどうかがポイントとなります。近年では、画像検索を用いて情報をチェックするユーザーも多く存在するため、掲載する画像一つひとつに丁寧に対応することで、外部からの流入数増加につながる可能性も高くなるはずです。そのためGoogleの画像検索に対して最適化することを、画像SEOといいます。

昨今では、SNSやECサイトにおいて画像の訴求力が強まっている傾向にあるため、テキストのみの情報ではアクセスを集めにくい場合も、画像SEOに力を入れれば高い効果が見込めるでしょう。

SEOに効果的な画像のポイント

SEO1画像にはサイトの印象をよくする効果だけでなく、アクション率をアップさせる効果もあるといわれています。どのような工夫がSEOに貢献するのかを考える際は、ユーザー目線に立って考えることが大切です。 ここでは、SEOに効果的な画像を設定するためのポイントを説明します。

テキストと関連性の高い画像を配置

コンテンツの内容やテーマを表現する画像を使うようにしましょう。ユーザーが画像を見たときに、どのような情報が書かれているかイメージしやすいことが重要です。

記事のテーマと関連性の低い画像を使っている場合、ユーザーの混乱を招く可能性があるだけでなく、Googleからの評価が下がってしまうことも考えられます。検索エンジンは、alt属性と周りのテキストの関連性を調べて、違和感のない画像かどうかを判断するため、画像を配置する位置も評価に影響する要素となってくるのです。

 ユーザー目線で考えても、テキストに関連する画像が近くにあるほうがスムーズに内容を理解できます。 なお、重要な画像はサイトや記事の上部に配置すると効果的です。検索エンジンも同様に、ページ上部にある情報が有益なものかどうかでサイトの価値を判断します。そのため、メインビジュアルとなる画像を選定する際は、SEO効果が見込めるものを意識して選定するとよいでしょう。

オリジナルの画像を使う

Googleが定義する良質なサイトの条件には、オリジナル性が高いかどうかも含まれています。テキスト・画像の双方に高い独自性があれば、ブランディングにも高い効果を発揮してくれるはずです。また、独自性のあるビジュアルは、ユーザーの離脱防止にも効果が見込めます。

完全オリジナルの写真やイラストを用意するのが難しい場合には、フリー画像を加工するのも一つの方法です。 とはいえ、ページ評価においては画像よりもテキストのほうが重要性が高いといわれているため、画像を配置するだけでは検索順位の大幅な向上は期待できません。同等レベルの記事が複数あったとき、画像が最適化されている記事のほうがわずかに高い評価を得られるケースがあるといった程度です。

だからといって、テキストばかりのコンテンツはユーザーの負担になります。SEO対策も重要ですが、新規ファンの獲得やリピーターの増加を目指すのであれば、シンプルな図やイラストなども用いながら、ユーザビリティを意識することが重要です。画像はユーザーの理解を補うために利用するものと捉え、適切に活用しましょう。

alt属性(altタグ/代替テキスト)で画像の内容を適切に設定する

前述したように、alt属性(altタグ/代替テキスト)とは画像の説明文であり、何らかのエラーにより画像が表示されなかった場合に、代替となるテキストを表示させるために設定するものです。

画像認識技術が発達したとはいえ、検索エンジンがすべての画像を正しく理解できるわけではありません。そのため、alt属性や周辺のテキストで情報を補足し、画像の内容を正確に伝えているのです。また、画像にリンクを貼る場合はalt属性がアンカーテキストとして扱われるため、必ず記述しなければなりません。

これまでalt属性はあまり重要視されてきませんでしたが、検索アルゴリズムのアップデートをきっかけに注目されるようになりました。検索エンジンがalt属性から画像の内容を判断し、検索順位に反映している可能性が高くなったため、これまで空欄にしていたalt属性を埋めるべきという流れが強まっているのです。

alt属性の記述は以下です。

<img src="画像のURL" alt="画像の説明文">

画像の説明文がSEO対策になると考え、キーワードを多く羅列しすぎることは適切とは言えません。あくまで補助的な役割なので、画像内容が何であるか端的な内容に設定しましょう。

ファイル名は画像の内容を示した簡潔なものにする

SEO対策では画像のファイル名にも配慮したほうが良いと言えます。検索エンジンは「クローラー」というロボットを定期的に巡回させて情報を収集しています。そのため、画像のファイル名は短くて分かりやすいものが望ましいとされています。また、検索エンジンはアンダーバー(_)を認識できないと言われており、単語の区切りに記号を使う場合にはハイフンを使用することを推奨されています。

これはGoogleが提唱しているURLの付け方「シンプルな URL 構造を維持する」を根拠に広まっている話かと思われます。その証拠に、Googleで「_」と検索すれば、アンダーバーについての検索結果が出てきます。認識ができないわけではありません。ただ先述のサイトで「URL にはアンダースコア(_)ではなくハイフン(-)を使用することをおすすめします。」といわれているので、可能な限りアンダーバーは使用しない方が望ましいでしょう。

これと同じページを根拠に、ファイル名は半角英数字を使用したほうが良いと考えられます。

一般的な画像形式を使う

多くのブラウザで問題なく読み込める画像形式を使うことも大切です。 代表的なものは「.jpg」「.png」「.gif」などで、画像形式の設定はSEO対策にも大きく関わってきます。

Googleでは、2021年にユーザーが快適に検索エンジンを利用するための指標「core web vitals(コアウェブバイタル)」を新設し、検索順位への適用を始めました。この指標により、サイトの読み込み速度やレイアウトなども含め、安定しているウェブサイトが高い評価を得るようになりました。これらの指標に対応するためにも、適切な画像形式を選択することが肝要といえます。

画像の軽量化を実現する「Webp」

画像形式にはそれぞれ異なった特徴がありますが、近年ではGoogleが開発した次世代フォーマット「WebP(ウェッピー)」の注目が高まってきています。 2021年の段階では、すべてのブラウザに対応していないものの、世界的には約95%が「WebP」に対応するブラウザを使用しているため、拡大は進んでいるようです。画像サイズの大幅な軽量化が実現することから、将来的には日本でも「WebP」の活用が広まっていくと考えられています。

WebPについて詳しくはこちらの記事をご確認ください。
WebPとその他画像形式の違いとは?3つのメリットと変換方法解説

細かいグラデーションを表現する「.jpg」

「.jpg」はフルカラー1,670万色に対応しており、高画質で保存すると細かいグラデーションまで美しく表現できるのが特徴です。写真の掲載に適した形式ですが、ファイルサイズが大きくなりやすいため、表示速度を考慮する場合には画質を落としてサイズを小さくする必要があります。 ただし、「.jpg」は非可逆圧縮の画像フォーマットであり、保存し直すたびに画像の劣化を起こすため注意が必要です。

用途で使い分けられる可逆性の「.png」

「.png」には最大250色程度まで表現できる『png-8』のほか、「.jpg」と同等の約1,670万色が表現できる『png-24』、さらに高画質で透過情報を持った『png-32』の3種類が存在します。色数の少ないアイコンやアニメーションには『png-8』、写真など色彩を表現したいときには『png-24』、半透明を扱う際には『png-32』といったように、用途に合わせて使い分けが可能です。 「.png」は可逆性のため、保存したときの劣化は非常に少ないのが特徴といえます。

ユーザーに与える印象はもちろん、ブラウザでの表示速度も考慮しながら、適切なフォーマットを選択しましょう。

速く読み込めるようにデータサイズを適切にする

画像の圧縮もSEO対策に取り組むうえで欠かせない要素です。データサイズを小さくしてウェブサイトの表示速度を少しでも上げれば、利便性のよいサイトとして評価が高くなるでしょう。

実際、ページが重くてなかなか表示されないと、ユーザーの離脱につながるという報告もあります。具体的には、表示速度が1秒から3秒に落ちた場合、ユーザーの離脱率は30%以上に及ぶといわれています。ユーザーが見にくく感じない程度に、画像データは軽量化したほうが望ましいでしょう。

データを小さくする方法としては、画像自体の大きさを縮小したり、圧縮して画質を下げたりする方法があります。適切な画像の大きさは、パソコンの一般的なサイズである1,920ピクセル×1,080ピクセル程度が目安です。データサイズは1枚あたり100〜200KB程度にすると、読み込み速度の最適化につながります。画像を簡単に圧縮できるツールもあるので、活用するとよいでしょう。 

また、画像の枚数が多い場合は、Lazy Load(遅延ロード)という手法を取り入れるのも選択肢の一つです。Lazy Loadを実装すると、画面に表示される領域に限定して画像が読み込まれるようになり、サイト表示を高速化できます。なお、ソースコードに画像サイズを記述しておくことで、あらかじめブラウザがサイズを認識できるので、読み込み時間を短縮でき、SEOにも効果的といわれています。

タグの記述は以下を追加するだけです。

<img src=”画像のURL” alt=”画像の説明文” width="画像の横幅" height="画像の高さ">

モバイルフレンドリーにする

スマートフォンで閲覧しても違和感のない状態にすることを、モバイルフレンドリーといいます。モバイルデバイスからの使いやすさ、見やすさ、表示速度の最適化もSEO対策に有用です。

スマートフォンからの見え方を確認したいときには、Googleが無償提供している「モバイルフレンドリーテスト」を活用するとよいでしょう。ウェブサイトのURLを入力するだけで、モバイルフレンドリー化されているかどうかや、修正すべき点が簡単に確認できます。

さまざまなデバイスが普及した現在では、ユーザーがアクセスする端末ごとに自動でレイアウトや文字のサイズを切り替える、レスポンシブ対応が不可欠となってきました。画像をレスポンシブ対応させる場合は、HTMLとCSSの機能を使って最適化することが可能です。自社サイトがレスポンシブに対応していない場合は、リニューアルを検討してみましょう。

画像のサイトマップを作成する

キーワード対策だけでは期待する成果が出ない場合、画像サイトマップを作成して検索上位を狙うのも有効な手段です。 画像サイトマップとは、検索エンジン向けに画像コンテンツの情報やファイル同士の関係性を伝える構成図です。クローラーにウェブサイトの状態を伝えるXMLサイトマップとは異なり、画像情報に特化している点が特徴といえるでしょう。

画像サイトマップを詳細に記述しておけば、JavaScriptによるアクセス以外で検出が困難な画像でも、検索エンジンに情報を伝えられます。画像サイトマップに登録した画像は、検索エンジンの画像検索対象となるため、画像の評価が高いほど検索上位になる可能性が高まるのです。また、画像検索で上位表示されるようになると、アクセス数の増加にもつながるでしょう。

画像サイトマップを作成する際は、以下の画像タグを使用します。

【必須の画像タグ】
<image:image> …画像に関するすべての情報(最大1,000)
<image:loc> …画像のURL

【任意の画像タグ】
<image:geo_location> …画像のキャプション
<image:geo_location> …画像の地理的位置
<image:title>  …画像タイトル

画像掲載で注意すべきポイント

SEO2ウェブサイトを運用する際に注意したいのが、著作権や肖像権などの侵害による法的なトラブルです。たとえ意図的でなかったとしても、権利を侵害してしまえば信用問題に発展する可能性があります。オリジナルの画像以外をサイトに利用する場合には、それぞれの権利について正しく理解したうえでルールを守らなければなりません。

他人の権利を侵害する画像を使わない

他人が作成・撮影した画像や他サイトに掲載されている画像を無断で使用すると、著作権の侵害になるため注意が必要です。また、検索エンジンが複製コンテンツだと判断した場合にはペナルティの対象となり、検索順位を下げることになってしまいます。

他サイトに掲載されている画像を利用する際は、権利者から直接許可を得るか、引用ルールを守って掲載するようにしましょう。そのほか、画像を無断で加工して掲載することも禁止されています。フリー画像を提供しているサイトによっては加工を許可しているケースもあるため、提供元の規約を確認したうえで適切に使用するようにしてください。

また、画像を引用する際は、提供元のサーバーに負担がかからないよう、直リンクではなく、ダウンロードしてから自社サーバーにアップロードして掲載する必要があります。引用画像の近くに引用であることを記載し、引用元ページへのリンクを記載するなどするとよいでしょう。

画質が悪すぎる画像を使わない

不鮮明な画像はユーザーやGoogleの評価を下げかねません。見づらい画像がサイト内にあるだけで、ページ評価が下がってしまう可能性もあります。 逆に、表示スピードが速くて鮮明な画像は、ユーザーの興味や関心を惹きつけたり、クリックを促したりするのに効果的です。

また、画像検索結果の画面でほかの画像と並んだ際、きれいな画像を選定しているほうがクリックにつながりやすくなるでしょう。

画像だけで完結させない

重要な情報を伝える際は、画像と一緒にテキストも掲載したほうがSEO対策として有利です。画像認識技術は発達しているものの、クローラーは主にテキストから情報収集しているとされているためです。

またGoogleの場合、画像とテキストを一緒に掲載すると検索結果の最上部に「強調スニペット」として表示される機会が増えます。 強調スニペットとは、Googleが検索キーワードから判断したベストアンサーを表示する機能のことです。画面トップに掲載されるためユーザーの目にとまりやすく、アクセスの大幅な増加が期待できます。

ただし、重要な文章の画像化は避けたほうが望ましいでしょう。ウェブサイトにはさまざまな国のユーザーが訪れますが、画像化された文章の翻訳にはアプリケーションなどを使う手間がかかるため、テキストのまま掲載するほうがユーザーにとっては親切でしょう。テキストを画像化したい場合は、理解の補助的な位置として利用するなど、多様なユーザーのニーズを意識してサイトづくりに取り組みましょう。

まとめ

検索エンジンの画像認識技術が進む昨今、画像SEO対策に取り組む企業は増加傾向にあります。これまで重視されていなかったalt属性についても、近年ではSEO対策に欠かせない大切な要素の一つとして認識されています。

また、クローラーに正しい情報を渡すためにファイル名が適切に設定されているか、モバイル環境に最適化されたウェブサイトであるかどうかなども評価の材料として重要な要素です。

今回紹介した内容を参考に、画像SEOに取り組み、ユーザビリティに配慮したサイトづくりを意識することで、SEO効果を最大限に引き出しましょう。

  • facebook
  • mail

関連する記事

新規CTA

カテゴリー

ニュースレター購読

SEデザインからブログの更新情報をお届けします。