SEO対策では、画像処理もポイントの1つとなっています。画像が、何の画像なのかを検索エンジンンに伝えなければいけません。検索エンジンに画像の内容を伝える方法をご紹介します。

HTML 画像を使用

HTML 画像要素＜img>や＜picture>を使用して、コンテンツに画像を埋め込みます。HTML マークアップにより、クローラが簡単に画像を検出して処理します。

HTML5で登場した＜picture＞タグを利用すると、レスポンシブ画像の各ディバイスの画面サイズに対応する複数のオプションが指定できます。

この＜picture＞タグでは、WebP形式の画像に対応していないブラウザなら、PNG画像を表示することも可能です。CSSの「display:none」でも画像の切り替えはできますが、パフォーマンス上の問題があるのでやめておきましょう。また、画像に対して「loading=”lazy”」属性を記載すればページ読込み速度を上げることができます。

「alt」属性を使用

使う画像は、PNGやJPGで大丈夫ですが、最近では、次世代画像フォーマットWebP（Googleが開発している画像フォーマット）がWEBページの表示速度改善が期待できるとして注目されています。

＞＞WebPについて詳しくはこちら

画像のファイル名は英語で分かりやすい短いファイル名にします。

「alt」属性に代替テキストを入れます。ロボットに対してこの画像は何なのかを説明するのに、この「alt」属性に説明文を短く入れると理解してください。

画像のファイル名と alt テキストをキーワード最適化すると、Google 画像検索のような画像検索ロボットが画像を的確に理解しやすくなります。

画像検索結果で画像を表示するには

検索エンジンが画像をみつけやすくするには、画像サイトマップを使えばロボットにサイト上の画像の詳細情報を伝えることができます。これによって画像検索結果でもその画像がピックアップされて表示されるようになります。

ECサイトを運営している場合、各商品画像が画像検索結果に出てくれば商品を売る機会が増えるので見逃せない施策です。

画像サイトマップは、下記のコードでページごとに最大 1,000 件の画像のリストを作成できます。

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>http://example.com/sample.html</loc>
    <image:image>
      <image:loc>http://example.com/image.jpg</image:loc>
    </image:image>
    <image:image>
      <image:loc>http://example.com/photo.jpg</image:loc>
    </image:image>
  </url>
</urlset> 

格安SEOのTOPページへ戻る