SEO向け画像の工夫urlやテキストで有利になる10個のポイント

1.画像名にSEOキーワードを入れる

掲載する画像に「最適なファイル名」をつけることはSEO上しておいた方が良いと思います。

まだ連番数字の画像名（例えば「DSC0001.jpg」など）を付けたままではありませんか？

ファイル名にはなるべく、SEOキーワードの英語表記が入る様にしましょう。

どのページのどこで使われている画像かを画像名で判別

例えば「SEO対策の手順」を説明したページの場合、画像は下の様に銘打つようにしましょう（複数あれば連番で処理します）。

seo_flow_img1.jpg：「ジャンル単語」＋「目的単語」＋「画像番号」が基本形です。

ジャンルと目的・番号以外に優先する項目が入る可能性もありますので、あまり長くならない程度に追加をして良いと思います。

seo_flow_midashi_img1.jpg：「ジャンル単語」＋「目的単語」＋「属性（見出し）」＋「画像番号」など

SEOのためというより、使われている箇所が一目でわかる画像名を目指す

画像名が直接SEO順位に関わる保証がある訳ではないため、この作業は必須ではありません。

あくまでそのページ内のどの部分で使われている画像かがすぐにわかる事を目的としているのですね。

画像名の区切りにはハイフンかアンダーバーを使う

この時、各単語の区切りにはハイフン「-」かアンダーバー「_」を使いましょう。

以前はアンダーバー「_」は使わないようにするべきという話が出回っていました。

検索エンジンがアンダーバーを認識しないとされていたからですね。

Googleはアンダーバーを認識しない？

例えば「seo_flow_img1.jpg」というファイルは「seoflowimg1」と認識されます。

それに対しハイフン「-」はきちんと区切りとして認識されるとしています。

単語の区切りをきちんと認識できる画像やURLの方が、ページ内を把握されやすくSEO的に有利とされていたのだと思います。

今はハイフン必須ではない

しかし今はこの画像名やURL上でページ内容を表現する事はSEO上必須ではないので、どちらかを使えば問題は無いと言えます。

※今はWordpress等のパラメータURLなどページと無関係な記号でも、しっかり上位表示されるためです。

画像検索時のキーにはなる

画像検索ユーザーは、単語と単語の間にスペースを入れて画像検索する事が多い様です。

なので画像検索時に上手く認識してもらうためには、画像のファイル名にきちんと区切りを入れた方が良いでしょう。

こういった場合には「-」を使って単語を区切った方が検索されやすいという面はあると思います。

特に画像検索を気にしないのであれば、アンダーバーも併用して問題はないです。

2.画像サイズと画質を調整する

画像を使う時に注意しなければならないのは画像サイズです。各画像サイズはページの表示速度に影響します。

サイズの大きな画像を1ページにたくさん使えば、その分ページ表示に時間が掛かってしまいますよね。

読込に時間がかかるサイト程ユーザーにストレスを与えるものはありません。

ページが開ききる前に離脱されてしまう可能性が高くなります。

画質は高品質に保つ

そして画像のサイズと一緒に考えなければならないのは画質です。

画質が低く見にくい画像を使ってしまうとサイト自体の印象が悪くなりますが、画質が高ければそれだけ読込に時間が掛かります。

ユーザーにとって見やすい画質を維持しつつ、ファイルサイズを最小化することを目指すべきですね。

表示画像と拡大画像を分ける

画像を拡大表示させるつもりの場合、サイトの表示時点ではサムネイルとして小さく加工したものを別に準備します。

そして拡大時に画質の良く大きい画像を別途表示させるべきです。

加工を面倒がってサムネイルにもそのまま大きいサイズを兼用すると表示が重たくなります。

画像ファイルの圧縮・軽量化

画像はそのファイルサイズを軽量化しておけば読込速度が速くなります。

画質劣化を抑えつつ軽量化できる下記のような軽量化WEBツールを積極的に使いましょう。

見た目のキレイさはそのままに、さらなるファイル量の軽量化ができます。

様々な軽量化WEBサイト

私はよく「TinyPNG」などを使っています。一度に軽量化できる画像数が決まっていますが大変便利です。

3.必ず映る画像形式を使う

一般的なファイル形式としては「GIF、JPEG、PNG」の3種が、多くのブラウザでサポートされてる画像ファイル形式です。

検索エンジンとユーザー（ブラウザ）の両者にとって扱いやすいフォーマットを採用して画像を掲載しましょう。

上記の3つの形式であれば、ユーザー環境によって画像が映らないという事が起こりません。

主な画像形式

おおむね次のような条件で GIF、JPEG、PNG の画像形式を選択します。

PNGは高品質で透明部分を使う際に重宝されますが、ファイルサイズが大きくなるデメリットがあります。

SVGについて

これからさらに普及が期待される画像形式が、SVG（Scalable Vector Graphics）です。

拡大しても画像が荒くならないベクター形式の画像です。

Retina等の高解像度ディスプレイでもキレイに表示する事ができます。

早く全ブラウザで標準で表示する事ができる形式に昇格して欲しいと思います。

4.画像の代替テキスト（alt属性）を設定する

画像の説明に使うのが代替テキストです。代替テキストはimgタグ要素内にalt属性として記述します。

例えば犬が走っている画像の場合、その画像を表示するためのimg要素のalt属性に「写真：犬が公園を駆け回る」といったテキストを入れます。

代替テキストが設定されていれば、画像の情報もテキストで抽出できるようになるので、その分ユーザーの利便性が高まりGoogleに評価されやすくなります。

代替テキストを一枚ずつきちんと記述して、ユーザビリティを考慮した画像にする事がSEOに効果的なポイントとなります。

代替テキストが無いと何の画像かわからない

alt属性を記述していないと、スクリーンリーダーなどのテキストを読み上げブラウザ（音声ブラウザ）に対応できませんよね。

となるとアクセシビリティが低下します、利便性が低下すればSEO評価の下落につながります。

altテキストを書く場合と書かない場合

<img src="images/dog_img1.jpg" alt="写真：犬が公園を走り回っている">
犬が公園を走り回っている写真である事がわかる

<img src="images/dog_img1.jpg" alt="写真">
何の写真か分からない

alt属性へのキーワード盛り込み

alt属性にSEOキーワードを盛り込むのは良く聞く話ですよね。

ですが、altテキストは「画像の説明テキスト」の域を超えませんので、適切な画像の説明文章を入れるようにしましょう。

画像のキャプション

画像のキャプションも画像解析のヒントとして利用され、ユーザー理解の手助けにもなります。

画像に関する説明・補足・注釈などの詳細情報が必要な場合は、利用しましょう。

HTML5からはキャプションのマークアップタグとして「figcaption要素」が利用できます。

<figure> <img src="images/dog_img1.jpg" alt="写真：犬が公園を走り回っている"> <figcaption>犬が公園を走り回っている</figcaption> </figure>

alt属性の評価

(補足)ALT属性評価ツールhttps://seolaboratory.jp/alt/

上記サイトはURLとキーワードを入力することで、altテキストを評価してくれます。

5.テキストと関連性のある画像にする

画像は、設置する前後のテキストに関連したものにすることで、Googleは画像の内容を理解しやすくなります。

最近のブログなどでは、画像はH2タグの下に入る形で挿入されていると思います。

前後の文章と脈略のない画像を掲載せず、できるだけ関連性のあるものを選ぶようにしましょう。

Googleヘルプ

Googleにも以下のような公式ヘルプがあります。

Googleは、画像のキャプションやタイトルなどのページのコンテンツから画像のテーマに関する情報を抽出します。可能な限り、画像のテーマに関連するページの、関連テキストの近くに画像を配置するようにしてください。

関連画像が準備できれば、altテキストにSEOキーワードが入る

先ほどalt属性のところでも述べましたが、SEO対策上このalt属性にもSEOキーワードを入れるべきという話がよく出ます。

altテキストにSEOキーワードを入れるという事は、そのキーワードに関連した画像を入れなければなりません。

画像とalt属性のキーワードテキストとがマッチしていないと意味がない訳です。

ですのできちんと関連画像を準備できれば、自然とaltテキストにSEOキーワードが入れれるのです。

6.オリジナリティのある画像でSEO差別化

画像にオリジナリティを出すには、競合他社で使われてない画像を準備する必要がありますね。

例えば、PhotoshopやIllustratorなどの画像加工専用ソフトを使って、イラスト画像や写真画像を自分なりに加工作成します。

そうすれば、独自性の高いオリジナル画像を掲載する事ができますよね。

コンテンツに挿入するオリジナリティ画像が多ければ、その分Googleに評価されやすくなります。

他が使わない画像を使う事で差別化

仮に競合サイトと同じような画像ばかりを乱用していると、オリジナリティの低下につながります。

その他大勢のサイト群に埋もれてしまうと、大きなSEO効果は見込めないかも知れません。

よく無料素材サイトなどで画像は出回っています。出回っているという事は使っているサイトも山の様にたくさんあるのです。

出回っている同じ画像しか使われていないWEBサイトよりも、他とは違うテイストのオリジナル画像を使っているサイトは、その差別性につながります。

購入する事も

写真を購入するのは費用が掛かりますが、その分オリジナリティある画像にできます

全てではないにしても多少は有料写真購入を検討した方が良いかも知れませんね。

7.メタデータ (EXIF情報)を消す

スマホやデジカメで撮影した写真には、EXIF情報（Exchangeable image file format）のメタデータが含まれています。

EXIFには、撮影場所、位置情報、撮影機器、画素数、ISO感度、色空間、シャッター速度といった様々な情報が保存されています。

画像のプロパティ情報

画像からの個人情報漏えいを防ぐ

それは画像検索時に表示される可能性があります。

位置情報などはこのご時世ですから個人情報の漏洩に繋がりやすいので、安全面を考慮したコントロールが必要です。

Googleは画像のメタデータも取得していますが、現在のところ検索ランキングには利用していないようです。

こういったメタデータを削除すると、情報漏えい防止の面でセキュリティも向上しますしファイルを軽量化できます。

8.画像サイトマップを送信する

ページだけでなく画像もインデックスしやすくするため、画像のサイトマップを作成しましょう。

画像専用のサイトマップを別個に作成しても良いのですが、ページのインデックスに使うXMLサイトマップに「画像情報」を追加することができます。

画像情報を追加したXMLサイトマップのタグ記述例

<url> <loc>http://example.com/aaa.html</loc> <image:image> <image:loc>http://example.com/images/aaa_img1.jpg</image:loc> <image:caption>画像のキャプション</image:caption> </image:image> #以下繰り返し </url>

あわせて読みたい関連記事

9.レスポンシブルデザイン対応をする

WEBサイトはいま「レスポンシブルデザイン」に対応する事が必須ですよね

レスポンシブルデザイン向けに最適化するには、Google Search Consoleの「モバイルユーザビリティ」でチェックをする必要があります。

例えばそこで「コンテンツの幅が画面の幅を超えています」という問題点が指摘された場合、それは掲載している画像の横幅が原因の場合があります。

であれば画像の横幅を調整して、モバイルデバイス端末の横幅に収まるようにしなければなりません。

モバイルフレンドリーを目指す

これを繰り返して修正をしてけば、モバイルフレンドリーなWEBサイトとして完成度の高いものなっていきます。

「コンテンツの幅が画面の幅を超えています」のガイダンス

Googleの求めるモバイルフレンドリーなサイトになれば、SEO評価にもつながります。

基本は画像幅を100％指定

特に画像をレスポンシブルデザインに対応させるためには、そのデバイス端末ごとに常に横幅をレイアウト枠の幅に合わせるようにCSSで制御するのが一般的です。

つまり画像を枠に対して常に100％の幅になる様にしておけば、PCでもスマホでも常にその枠幅に拡大・縮小されます。

画面の外にはみ出したりする事はありません。

CSS記述例：

img.w100{ width: 100%; }

html内imgタグ：

<img class="w100" src="" alt="">

これでどんな枠内でもその幅一杯に拡大・縮小され表示されます。

応用編

スマホ版の場合は縮小されても問題は無いと思いますが、PC版の場合写真によっては拡大されるとぼやけてしまう可能性がありますね。

ですのでPC版ではこの幅100％指定を掛けずに原寸大で表示させ、スマホ版だけ適用させると上手くいきます。

CSS記述例：

@media only screen and (max-width:768px) { img.w100{ width: 100%; } }

これで幅が768px以下の端末、つまりスマホ画面でのみ画像は100％の幅に強制されます。

100％幅強制時の注意

この手法は何にでも必ず通用する万能なものではありません。あくまで一つの画像をPC用・スマホ用に使いまわす場合です。

この100％幅設定をすると画像サイズの影響を受けず、どのようなサイズの画像でも枠幅内に収めてしまいます。

JPEGやPNGは本来必要な縦横サイズを超えていても縮めてしまい、いい意味でも悪い意味でも「荒れ」がわかりにくいです。

GIF画像は荒れる可能性

それに対しGIFファイルはサイズが縮小されると大きく荒れる事があるので、枠サイズピッタリに作った方が良い場合もあります。

特に画像の上にテキストを載せて一体化させている画像などは、縮小時の「荒れ」が顕著に現れますよね。

そんな時は、PCとスマホとで違うサイズ画像を用意する事も検討しましょう。

このあたりは他にもいろいろなやり方が存在します。

あわせて読みたい関連記事

10.Retinaディスプレイ向け画像の切替技

レスポンシブデザインに対応するために常に100％幅に収める様に画像を準備・設置する事を説明してきましたが、これにも問題があります。

それは常に重たい画像を読込しなければならないという事です。画像の読み込みに時間が掛かるのはSEO上好ましくありません。

特にスマホ版は解像度の高いRetinaディスプレイが採用されている事がこの要因です。

Retinaディスプレイ向けに大き目の画像を利用する

Retinaディスプレイは解像度が高く、通常100pxの幅の画像を表示させると50px幅で表示されます。

本来の100px幅に強引に引き延ばすとそれだけ画像が拡大され、荒くなります。

このような環境で例えば幅400pxのjpg画像をPCとスマホとで兼用する場合、通常ならばその2倍となる「800px」サイズの画像を設置しようと考えます。

800px画像を400px画像として高解像度で表示

大は小を兼ねる訳ですから常に2倍サイズの画像を用意しておけば、PCはもちろんRetinaディスプレイ対応のスマホサイトでもきれいに見えます。

PC版では400pxの枠内で100％幅で表示され、スマホなどの高解像度モニターでも800pxが2分の1の400pxに圧縮され鮮明な画像としてに表示されます。

しかしこのルールで画像作成を続けていくと、全て表示幅の2倍のサイズの画像がベースになってしまいますよね。

本来の読込データ量の倍になる訳ですからいくら画像の軽量化を図っても時間が掛かってしまい、SEO上はよくありません。

画像の切替技

それでは1つの重たい画像を使いまわすのではなく、きちんとデバイス事に切り替える方法をご紹介しましょう。

解像度 (サイズ) 違いの画像切り替え

デバイスの解像度や表示サイズに応じて画像を切り替えるには、img要素で srcset属性を利用します。

候補となる複数の画像を用意しますが、最も適切な画像1つのみをブラウザが判断して読み込むので、不要な画像はロードされません。

「srcset」と一緒に使える機能に「sizes」属性があります。「sizes」属性では、メディアクエリを使ってviewport幅（ブラウザ幅）に応じた画像の表示サイズを変更できます。

<img sizes="(min-width: 960px) 75vw, 100vw" srcset="img-1440.png 1440w, img-720.png 720w, img-360.png 360w" src="default-image.png">

JavaScriptを使うことなく、HTMLの記述だけで画像ファイルを切り替えられるので、もはやレスポンシブイメージの実装に不可欠な機能です。

デバイス (ブラウザ幅) ごとの画像切り替え

srcset が解像度の違う複製画像を切り替えるのに対し、内容の異なる画像を切り替えるのに利用するのが「picture」要素です。

例えば、PC用の画像をそのまま縮小してもモバイル端末では内容がわかりづらいため、「モバイルにはモバイル用の画像を表示させたい」と言ったことはよくありますね。

<picture> <source media="(min-width: 960px)" srcset="img-pc.jpg"> <img src="img-sp.jpg"> </picture>

srcset による切り替えも併用できるので、より柔軟なレスポンシブイメージを実装することができます。

その他、フォーマット（拡張子）の違う画像を切り替えることもできます。

背景画像のレスポンシブ対応

従来通り、背景画像はCSSの background-image を使います。

併せて background プロパティを使えば、レスポンシブな表示の調整が行えます。

また、メディアクエリ resolution と -webkit-device-pixel-ratio を利用すれば、背景画像を高解像度ディスプレイに対応させることもできます。

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 959px), only screen and (min-resolution: 192dpi) and (max-width: 959px) { .header { background-image: url("images/bg-sp-2x.jpg"); background-size: cover; background-position: 50% 0; } }

このように、PCとスマホ版とで読込する画像を変えれば、それぞれの画像に対して画質やサイズなどを最適化したものを利用できます。

1枚ものの2倍サイズの画像を用意すれば事足りますが、あえてこの様な工夫の積み重ねが生きてくると思います。

11.背景画像として利用する場合

画像はhtmlタグに直接埋め込む以外に、CSSを使って背景画像として利用する場合もあります。

特にTOPページのメインとなるスライド部分などは、背景に画像を設置してその上にメインテキストなどを掲載するパターンが多いですよね。

スライドに高品質の画像を多用すれば確かに見栄えは良くなりますが、その分容量が多くなるため読込に時間が掛かります。

cssで背景画像を表示する

CSSでは背景画像の枠内への敷き詰め方にもいろいろな方法があります（詳しくは割愛します）。

特にレスポンシブルデザインを考慮する場合、スライドがパソコンでもスマホでも使えるようにしなければなりません。

その場合cssによる画像の敷き詰め方を変更して対応する事が多いです。

画像容量を省エネするスライド設置パターン

PCの場合

例えばパソコンの場合は枠内に対して若干小さめの画像を用意して「contain」などで枠幅まで広げます（拡大するので多少ぼやけます）。

img.slide{ background-size: contain; } 縦横比を維持したまま 背景領域に収まる最大サイズになるよう拡大（縮小）します

そしてその上にPRテキストを置いてメインのアピールはテキスト・背景はあくまで「テキストを目立たせるための装飾」という用途で使います。

場合によっては黒系のoverlayを上に掛けて、広げた画像自体を少し暗くする事がよくあります。暗くする事で画像の拡大による「荒れ」を目立たなくさせるためです。

背景画像を拡大して、その上にhtmlタグでテキストを表示させている例、黒系のoverlayで少し暗くなっています。

スマホの場合

逆にスマホ版では同じ画像を横枠にあわせて固定し、テキストはスライド画像の下に移動させて設置する事があります（もしくは非表示）。

@media only screen and (max-width:768px) { img.slide{ background-size: fixed; } }

スマホ版ではテキストが小さくなるためスライド上に乗せていると見にくくなるためですね。

PC版ではぼやけていた画像もスマホ版の場合はきれいに見えるので、テキストの背景ではなく画像としての役目を果たします。

画像部分とテキスト部分が別れて見やすくなっている例、黒のoverlayは外れています。

まとめ：一つ一つ丁寧な画像への配慮がSEOへの近道

まず画像を使うときはファイル名や代替テキストなどにキーワードを一つ一つ入れて、ユーザーとGoogleへの配慮を意識するべきです。

画像の質とサイズには常に注意して、常に見栄えの良い画像を素早く見せる工夫が必要です。

そしてテキストとの関連性も考慮した上でなるべくオリジナルの画像を選定しましょう。

さらに、レスポンシブルデザインを考慮した巧みな画像のコントロールができるようにしたいものです。

その積み重ねがSEO効果向上に繋がります。

一押し人気コーナー紹介