SEO対策に有効な画像設定7つのポイント

画像設定のイメージ画像
Pocket

ユーザービリティの向上のために、コンテンツに画像を使用することは重要です。もちろんGoogleも、ユーザービリティ向上のための画像使用の重要性を認識しています。このため、私たちにとっては、ユーザー、クローラー両方に画像内容を適切に伝えることが上位表示するためのカギになるといえます。
 
 
 
ただし、クローラーは画像を客観的に認識することはできません。クローラーに画像の内容を正確に認識させるには、正しい設定が必要になります。そこで今回は、googleの画像に関する品質ガイドラインに準じて、画像に対する考え方や画像の正しい設定方法詳しく解説していきます。
 
 
 

1.画像に対する正しい考え方

 
現在、SEO対策としてコンテンツに画像を使用することは有効な方法だといえます。そこでハコラボとしては、コンテツには、トコトン画像を使い倒してユーザービリティを向上させることをおすすめしています。
 
 
 
ただし、画像だけでコンテンツ内容を説明せず、記事などのテキストを主軸にすることが重要です。画像は、あくまでも補足として使用しましょう。なぜなら、Googleは画像を客観的に認識することができないからです。したがって、重要なテキストを画像に埋め込まないようにしましょう。
 
 
また、画像に重要なテキストを埋め込んでしまうと、画像が表示されなかった場合にユーザーが重要な部分を見落とすことになってしまいます。そうならないために、重要なテキストは画像に埋め込まず、通常のHTML内に記述して確実にユーザーが認識できるようにましょう。
 
 
 

2.画像設定で出来る7つのSEO対策

 
画像に関する情報をいかに多くGoogleに伝えるかが重要なポイントになります。そのためのポイントを7つに分けて詳しく解説していきます。
 
 

2-1.ファイル名の設定方法

 

ファイル名は、Googleが画像の内容を知る為の情報の一つになので、画像の内容が伝わるファイル名を付けましょう。例えば、自分のデジタルカメラの画像なら、「001.jpg」よりも「my-digital-camera.jpg」のほうがわかりやすいファイル名です。また、ファイル名が検索結果の一部として使われることもあるので正確に付けましょう。

 
 
それから、ファイル名を付ける際には英数字表記にしてください。日本語でファイ名をつけると、サーバーの環境によって文字化けしてしまうこともあります。
 
 
 

2-2.画像サイズ(縦横)を指定する

 
画像の縦横サイズ(widthとheight)をあらかじめ指定することで、コンテンツの表示速度が若干早くなります。これにより、ユーザビリティの向上につながり、直帰率の改善やGoogleの評価改善が期待できます。
 
 
 
全ての画像をサイズ指定するのが大変なときは、比較的サイズの大きい画像のみに適応してください。それだけでも、表示速度は改善されます。
 
 
 

2-3.画像で使用するオススメの拡張子

 
画像で使用出来る代表的な拡張子は、JPEG(JPG)、PNG、TIFF、GIF、BMPなどがあります。この中でも、Googleが推奨する拡張子は、JPEG、PNGの2つです。必ずこの2つの拡張を使うようにしましょう。
 
 
 
非常に小さいアニメーションや単純アニメーションを含む画像を使うときは、GIFを使いましょう。Googleのガイドラインにもその様に記述してあります。
 
 

一部の旧バージョンのブラウザでは PNG を部分的にしかサポートしていない場合がありますが、PNG はほとんどの場合、GIF より優れています。 非常に小さなグラフィックや単純なグラフィック(10×10 ピクセル未満、3 色未満のカラー パレットなど)、アニメーションを含む画像には、GIF を使用します。 写真スタイルの画像にはすべて JPG を使用します。 BMP や TIFF は使用しないでください。
 
 
 
 

2-4.画像の品質を落とさずに圧縮する

画像は、軽い方がユーザーからもGoogleからも好かれます。しかし、圧縮したことで画像が荒くなれば、両方から嫌われしまします。このため、Googleは画像の品質を落とさずに圧縮する方法を推奨しています。
 
 
 
画像を圧縮する事で表示速度が高速化ができれば、SEO効果も期待できます。JPEG、PNGで使える圧縮ツールは異なります。Googleが推奨する圧縮ツールは以下のツールです。
 
 
 

JPEG:jpegtran、jpegoptim
PNG:OptiPNG、PNGOUT

 
 
 

2-5.alt属性を正しく設定する

 
alt属性とは、HTMLのimg要素の中に記述される「画像の代わり(代替え)となるテキスト情報」のことです。簡単に言うと、alt属性には画像の説明を記述します。
 
 
 
これを記入しておくことで、画像が表示されない場合は、alt属性に記述した内容がコンテンツに表示されます。また、alt属性は、画像検索にも使用されるので、画像の説明を正しく記述する必要があります。
 
 
ちなみに、HTMLのimg要素にはalt属性以外に、title属性も使用できます。ただし、この方法はSEO効果が低いと考えられてるので、無理に指定する必要は無いのでおすすめしていません。
 
 
 

2-5-1.alt属性を設定するポイント

 
alt属性は、基本的には必ず記述するべきものですが、コンテンツに関係の無い画像のali属性にまで記述する必要はありません。例えばスペーサーGIFのような意味を持たない画像の場合は、alt属性を空にしておきましょう。
 
 
 
<img src=”spacer.gif” alt=””>
 
 
 

2-5-2.alt属性の書き方

alt属性の正しき記述方法をポイントをおさえながら解説します。
 
 
 
ポイント1:
alt属性は、キーワードを詰め込過ぎたり、文章をすべてコピー&ペーストしてはいけません。
ポイント2:
alt属性には、文字数の制限はありませんが極端に長いテキストは書かないようにしましょう。
ポイント3:
alt属性には、画像の状況を詳しく解説した文章を書きましょう。
 
 
 
具体的な設定方法がGoogleガイドラインに記載されているので、ここで例として紹介します。
 
  
 

alt属性の書き方

適切ではない例:
<img src=”puppy.jpg” alt=””/>

適切な例:
<img src=”puppy.jpg” alt=”子犬”/>

最適な例:
<img src=”puppy.jpg” alt=”持ってこいをするダルメシアンの子犬”/>
 
 
 
 

2-5-3.やってはいけないalt属性の設定方法

altのテキストは文字数に制限がありません。しかし、だからといって画像と関係のないキーワードや、関連キーワードを詰め込んではいけません。キーワードを詰め込んだところでGoogleには無視されるだけです。最悪の場合、スパム扱いを受けコンテツの評価が下がる場合があります。
 
 
 
「やってはいけない設定方法」がGoogleガイドラインに記載されているので、ここで例として紹介します。
 
 
例:やっていはいけない設定方法
 
<img src=”puppy.jpg” alt=”子犬 犬の赤ちゃん
小さな子犬 レトリーバー ラブラドール ウルフハウンド
セッター ポインター ジャックラッセル テリヤ
ドッグ フード ドッグフード 安い 子犬の餌”/>
   
 
 
 

2-6.コンテンツと画像の整合性を確保する

 
コンテンツと画像の整合性を確保するようにしましょう。できれば、画像のそばに適切なテキスト(メインキーワード)を自然に配置するように心がけてください。コンテンツの内容と関係のない画像を使用すると、ユーザーからもGoogleから評価が下がり上位表示されません。
 
 
例えば、自宅の猫を紹介するコンテンツにマンゴーの画像(mango.jpg)の画像を貼り付けたとします。そうすると、Googleは「猫のコンテンツなのにマンゴーの画像???」と混乱してしまい、コンテンツの内容を正しく理解いできなくなります。これでは、コンテンツの評価が下がってしまいます。
 
 
そうならないために、コンテンツに合った画像を貼りるようにしましょう。必要であれば、画像の回りにわかりやすいタイトルやキャプションを付けることもおすすめします。
 
 
 

2-7.画像のオリジナル性

 
Googleはオリジナル画像の使用を推奨しています。ただ、これに関しては、無理をする必要は無いと思います。現段階では、オリジナル画像を使うことによるSEO対策の有効性はわかっていません。「もしできるなら、オリジナル画像を作成し使う」程度でよいと思います。一応、Googleのガイドラインを書きに紹介しておきます
 
 
  

ウェブマスターには、サイト内の画像の不正使用に対する心配が付きまといます。サイト内の画像の使用や画像へのリンクを認めない場合、サイトの負荷は減りますが、画像を見にきてくれる人の数や検索エンジンでの検索率も減少します。像の帰属の明記やサイトへのリンクを義務付けたうえで、画像の使用を認めるのも 1つの方法です。

 
 
 
 

3.Wordpressで画像を挿入した場合の設定方法

 
ワードプレスでは、コンテンツのHTMLソースに記述しなくても、下記のような画面で画像の設定画面ができます。この場合の設定方法を解説します。
 
 
 
ワードプレスでの画像設定に関する画像
 
 
 
・タイトル
タイトルは、HTMLのtitle属性のことです。タイトルに記入した内容は、ブラウザ上で画像にマウスオーバー(マウスカーソルを上に重ねる)した際に表示されます。 SEO効果はあまり無いと言われているので、空欄でもかまいません。もし、記入する場合は、タイトルは、Google 画像検索の検索結果に表示されるので、キーワードを入れてタイトルをつけてください。
 
 
 
・キャプション
挿入した画像の下部に、画像の説明文を表示する際に使います。空欄でもかまいませんが、コンテンツ的に説明が必要な場合は記入しましょう。
 
 
 
・代替テキスト
代替テキストはalt属性のことです。画像が表示されない場合に、代替えテキストに記述した文章が表示されます。また、画像の内容をGoogleに伝える部分としても使われているので、SEO効果が期待できます。必ず記述するようにしてください。記述方法は、キーワードを入れて長くなり過ぎない程度に詳しく書きましょう。ただし、キーワードの詰め込み過ぎは、SEOスパムと判断されてしまうので絶対にやめましょう。
 
 
 
・説明
画像を管理する際に必要な情報を入力します。空欄でも構いません。
 
 
 

4.まとめ

 
「画像の設定=ail属性」と考えている人も多くいますが、ail属性だけが画像の設定方法ではありません。ファイル名の付け方や拡張子の付け方、画像のサイズ設定なども画像設定の一つになります。
 
 
 
Googleに好かれる画像設定も大切ですが、重要なのはユーザービリティの向上です。ユーザーが使いやすいコンテンツのための画像設定を心がけることで、自然とGoogleにも好かれる画像設定ができるようになります。ぜひ、参考にしてみてください。
Pocket

 COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

W3 Total Cacheの設定方法と使い方01

W3 Total Cache:設定方法と使い方

優秀なメンターを見つける方法00

優秀なメンターを見つける方法

キーワード出現率がSEO対策に意味がない3つの理由

SEO対策の基本とは?そのたった1つの方法

Lazy Load の設定方法01

Lazy Load :設定方法と使い方

独自ドメインの取得方法イメージ画像01

独自ドメインの取得方法「エックスドメイン編」(画像付き)