SEO初心者がまずやるSEO対策5/画像最適化
今回は超SEO初心者がまずやるSEO対策⑤/画像最適化について解説します。全くの初心者であれば、SEOとは？最新SEO対策ガイド【上位表示の対策を解説】2022年完全版を先に一読してからこのページを読んでください。
画像処理
SEO対策では、画像処理もポイントの1つとなっています。画像が、何の画像なのかを検索エンジンンに伝えなければいけません。検索エンジンに画像の内容を伝える方法をご紹介します。
HTML 画像を使用
HTML 画像要素＜img>や＜picture>を使用して、コンテンツに画像を埋め込みます。HTML マークアップにより、クローラが簡単に画像を検出して処理します。
HTML5で登場した＜picture＞タグを利用すると、レスポンシブ画像の各ディバイスの画面サイズに対応する複数のオプションが指定できます。
この＜picture＞タグでは、WebP形式の画像に対応していないブラウザなら、PNG画像を表示することも可能です。CSSの「display:none」でも画像の切り替えはできますが、パフォーマンス上の問題があるのでやめておきましょう。また、画像に対して「loading=”lazy”」属性を記載すればページ読込み速度を上げることができます。
「alt」属性を使用
使う画像は、PNGやJPGで大丈夫ですが、最近では、次世代画像フォーマットWebP（Googleが開発している画像フォーマット）がWEBページの表示速度改善が期待できるとして注目されています。
画像のファイル名は英語で分かりやすい短いファイル名にします。
「alt」属性に代替テキストを入れます。ロボットに対してこの画像は何なのかを説明するのに、この「alt」属性に説明文を短く入れると理解してください。
画像のファイル名と alt テキストをキーワード最適化すると、Google 画像検索のような画像検索ロボットが画像を的確に理解しやすくなります。
- 極端に長いファイル名は辞めましょう。
- 「alt」属性に対策キーワードをたくさん入れたり、文章全体をコピー＆ペーストで入れるのは辞めましょう。
- ECサイト等で写真画像が数百～千ある場合は、ルールを決めて画像管理をしましょう。
画像検索結果で画像を表示するには
検索エンジンが画像をみつけやすくするには、画像サイトマップを使えばロボットにサイト上の画像の詳細情報を伝えることができます。これによって画像検索結果でもその画像がピックアップされて表示されるようになります。
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>
この記事の監修者
日本大学法学部卒業、広告代理店で12年間働いている間、SEOと出会い、SEO草創期からSEO研究を始める。SEOを独学で研究し100以上のサイトで実験と検証を繰り返しました。そのノウハウを元に起業し現在、11期目。営業、SEOコンサル、WEB解析（Googleアナリティクス個人認定資格GAIQ保持）コーディング、サイト制作となんでもこなす。会社としては今まで2000以上のサイトのSEO対策を手掛けてきました。
