SEO 画像
スポンサーリンク

あらすじ

みなさん自分のwebサイトやブログを作る際に、何も考えずとりあえず画像を挿入していませんか。

 

画像をwebサイトに入れることは確かに重要ですが、正しい方法でなければ、逆にSEOでは不利に働いてしまいます。

 

今回はSEOにおける正しい画像の使い方を中心に、

  • SEOにおける画像
  • 画像を検索エンジンに認識させる方法
  • SEO対策には欠かせないalt属性
  • alt属性に代わる方法
  • おすすめ無料画像サイト

といった項目をご紹介していきたいと思います。

 

スポンサーリンク

SEOにおける画像

 

SEOにおける画像

 

画像をサイト内に用いることは、実際のところ検索エンジンからすると全く意味がありません。

なぜかというと、検索エンジンは画像そのものを認識することができないからです。

 

しかし、だからと言って画像をなくしたサイトは見づらく、わかりづらいものになってしまいます。

 

画像を入れることで視聴者にとってわかりやすく、見やすいサイトになり、結果的に集客を増やすことができるため、非常に効果的です。

 

スポンサーリンク

画像を検索エンジンに認識させる方法

 

認識

 

検索エンジンは画像を認識できないとすでにお話ししましたが、その具体的な理由として、検索エンジンは全てテキストベースでwebサイトを認識していることが挙げられます。

 

memo
テキストベースとはHTMLやXML、CSSといったコードや文字をメインに認識しているということです。

 

そこで、検索エンジンのために画像に代わる文字を付加してあげることが重要になってきます。

そうすることで、画像は認識できないけれど、画像の代わりに文字を読み込み、どのような画像なのかを文字を通して理解することができるのです。

 

その具体的な方法は下記で紹介するalt属性で解説します。

 

SEO対策には欠かせないalt属性

 

alt属性

 

alt属性とはimgタグの属性で使われるHTMLタグのことです。

 

すでにHTMLの知識がある方はわかると思いますが、このalt属性とはalternate attributeの略で、日本語にすると「代わり」「代役」といった意味になります。

 

HTML内での具体的な記載方法は

<img src="画像のパスやURL" alt="">

といったようにimgタグ内に記載するのが基本となっています。

 

このalt属性内に画像の代替のタイトルを入れることで、検索エンジンは画像を文字として認識することができるようになります。

 

そして結果的にSEO対策になり、サイト運営が有利に働きます。

 

 alt属性内にむやみにキーワードを書き込むと、Googleよりキーワードを乱用してるとみなされ、ペナルティを受けてしまうことがあるので注意しましょう。

悪い例

<img src="" alt="ペット犬 猫 動物 飼う方法 エサ 大変">

 

良い例

<img src="" alt="ペットとして犬を飼う方法">

 

また、実はこのalt属性に代替テキストを入れるメリットは他にもあります。

 

その他のメリットとしてあげられるのが

  • 画像の代わりにテキスト表示をしてくれる
  • 目の不自由な方用の音声テキスト
  • 画像検索で引っかかる

の3つです。

 

画像の代わりにテキスト表示をしてくれる

 

みなさんも一度は目にしたことがあるのではないでしょうか、ブラウザの画像読み込みが遅かったり、インターネットが思いがけないタイミングで切れてしまった際に、画像ではなくテキストが表示されるのを。

実はこの際に表示されているテキストはalt属性で記載したテキストなのです。

 

目の不自由な方用の音声テキスト

 

目の不自由な方に向けて、画像の代わりに音声で読み上げる際のテキストがこのalt属性で記載された内容になります。

 

画像検索で引っかかる

 

GoogleYahoo!で画像検索をする際に、このalt属性内のテキストが検索キーワードとして利用されることになります。

 

alt属性に代わる方法

 

html

 

検索エンジンに画像をテキストとして読み込ませたい場合に、alt属性に記載する方法だけしかないわけではありません。

 

alt属性以外の方法として

  • figCaption
  • title属性

の2つに記載する方法があります。

 

figcaption

 

figcaptionタグとはHTMLのタグの一つで、figureタグ内に記載します。

 

具体的な記載の仕方は

<figure>
  <img src=”画像のパスやURL” alt=””>
  <figcaption>ここに画像の説明文を記載</figcaption>
</figure>

となります。

 

figureタグで画像(img)を囲い、その画像タグの下にfigcaptureタグを記載します。

 

figcaptureタグ内に、その画像のタイトルや説明文を記載することで、検索エンジンにもテキストとして伝わる構造になります。

 

title属性

 

title属性とはimgだけでなく、全てのHTMLタグで利用することが可能な属性です。

基本的にalt属性と同時に使うこともできますし、title属性単独でも使うことができます。

 

title属性の大きな特徴としては、属性内に記載した内容が、カーソルを合わせると表示されることです。

 

このtitle属性内にもタイトルを記載することで、検索エンジンにも認識されることができます。

 

おすすめ無料画像サイト

 

画像検索

 

画像を利用する際に無料で使用できるサイトをご紹介したいと思います。

 

 

これらのサイトは無料で使える上に商用としても使用できます。

ぜひ活用してみてください。

 

まとめ

結論として画像はあった方がいいですが、なるべく画像サイズは小さいものが理想的です。

 

あまりにも画像サイズが大きすぎると、見栄えはよくなるかもしれませんがサイト自体のスピードを下げてしまう恐れがあり、結果としてSEOに不利に働いてしまいます。

 

これらのことにも気をつけながら画像のalt属性には必ずテキストを記載し、検索エンジンにとって最適な画像になるようにしていきましょう。

 

スポンサーリンク

Twitterでフォローしよう