Picovert

画像SEO最適化方法：2026年完全チェックリスト

Picovert チーム著2026-04-276分で読了

Google画像検索は、多くのサイトでオーガニックトラフィック全体の20〜30%を占めます。特にEコマース、 レシピ、ハウツーコンテンツではその割合がさらに高くなります。画像検索トラフィックだけでなく、 画像はCore Web Vitalsスコアにも直接影響します。ほとんどのページでLCP（Largest Contentful Paint）要素が画像だからです。重くて遅い、または説明が不適切な画像は、静かに検索順位を下げます。 このガイドは、2026年に重要なすべての要素を網羅しています。

1. 説明的なファイル名を使用する

ファイル名は、Googleが画像をクロールする際に読み込む最初のシグナルの1つです。 IMG_3847.jpg のような汎用的な名前はクローラーに何も伝えません。一方、 black-leather-sneakers-mens.jpgのような説明的な名前は、主題、製品タイプ、色を一目で伝えます。

  • 単語間にはハイフン(-)を使用 — Googleはハイフンを単語区切りとして扱いますが、アンダースコアは違います
  • その画像でランク付けしたい主要キーワードに合わせる
  • 具体的に: how-to-compress-images-for-web.webp の方が image1.webp より効果的
  • アップロード前にファイル名を変更する — 公開後に変更するとURLが変わり、蓄積されたSEOシグナルを失います

2. 意味のあるalt属性を書く

alt属性は2つの対象のためにあります: アクセシビリティのためのスクリーンリーダーと、コンテキストを 把握するための検索エンジンです。両者に同じルールが適用されます: 画像に実際に写っているものを 正確かつ簡潔に説明してください。

  • 悪い例: alt=""（コンテンツ画像で空にする）または alt="画像"（汎用的すぎる）
  • 良い例: alt="PicovertのImage Compressorで2MBのPNGを400KBに削減する画面"
  • ターゲットキーワードを自然に含める — 繰り返さないこと（キーワードの詰め込みはGoogleに検出されます）
  • alt属性は125文字以内に収める — それ以上はスクリーンリーダーが切り捨てます
  • 装飾的な画像（区切り線、アイコン）には alt=""（空文字列）を使用 — 省略しないこと

3. 画像を圧縮してファイルサイズを削減する

GoogleのPageSpeed InsightsとLighthouseはどちらも、サイズが大きすぎる画像があるページに 低いスコアを付けます。重い画像はLCPを遅らせ、PageSpeedスコアを下げ、サイト内の他のページを クロールしようとするGoogleの意欲を下げます。

  • 一般的なブログや商品画像の目標: 200 KB以下
  • サムネイルやリストページの画像の目標: 100 KB以下
  • 写真にはJPEG品質80〜85を使用 — 100との違いは見えないが、容量削減効果は大きい
  • スクリーンショット、図解、テキストを含む画像にはPNGを使用（ロスレスの細部が重要な場合）
  • PicovertのImage Compressor、Squoosh、ImageOptimなどのツールで ブラウザ内で一括圧縮可能

4. 最新フォーマットを使用: WebPとAVIF

JPEGとPNGは1990年代のハードウェア向けに最適化されたレガシーフォーマットです。最新の代替フォーマットは、 同等の視覚品質をはるかに小さいファイルサイズで実現します:

  • WebP: 同等の体感品質でJPEGより25〜35%小さい。2020年からすべての モダンブラウザでサポートされています。
  • AVIF: JPEGより最大50%小さい。Chrome、Firefox、Safari（iOS 16+）で サポートされており、2025年にはグローバルブラウザサポート率が約90%に達しました。

Next.jsの <Image> コンポーネント、最新テーマのWordPress、Cloudinaryなどの CDNは、ブラウザがサポートしている場合に自動的にWebPやAVIFを配信します。手動ワークフローの場合は、 アップロード前にJPEGまたはPNGをWebPに変換してください。

5. 正しいサイズでアップロードする

800 pxのカラムを埋めるために4000 px幅の画像をアップロードしないでください。ブラウザはファイル全体を ダウンロードし、画面に合わせて縮小してレンダリングします — 視覚的なメリットはなく、帯域幅のコストだけ かかります。アップロード前に表示サイズに合わせて（高解像度画面のために少し大きめに）画像をリサイズしてください。

レスポンシブレイアウトでは、srcset 属性を使用して複数のサイズを提供し、ブラウザが デバイスに適したサイズを選択できるようにします。複数のサイズバリアントを素早く生成するには PicovertのImage Resizer を活用してください。

<img
  src="product-800w.webp"
  srcset="product-400w.webp 400w, product-800w.webp 800w, product-1200w.webp 1200w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="ブラックレザースニーカー、メンズ27cm"
  width="800"
  height="600"
>

6. ファーストビュー外の画像に遅延読み込みを適用する

<img> タグの loading="lazy" 属性は、画像がビューポートに 近づくまでフェッチを延期するようブラウザに指示します。これにより初期ページの重さが減り、 TTI（Time to Interactive）が改善され、明示的なサイズと組み合わせるとCLS（Cumulative Layout Shift）も改善されます。

  • やってはいけないこと: ファーストビュー内の画像に遅延読み込みを適用する — LCPを遅延させてCore Web Vitalsスコアを下げます
  • 適用してください: ブログ本文の画像、商品グリッドのアイテム、コメントの アバターなど、ファーストビュー外のすべての画像
  • ほとんどの最新CMS（WordPress 5.5+、Shopify、Squarespace）はこの属性を自動的に追加します

7. 画像に構造化データを追加する

JSON-LDスキーママークアップを使ってGoogleに画像に関する明示的なメタデータを提供することで、 検索結果でリッチスニペットを獲得できる可能性があります。

  • 商品ページ: Product スキーマに image プロパティを 含める — Googleショッピングのリッチ結果に必須
  • レシピ・ハウツーページ: 関連スキーマ内に ImageObject を追加する; Googleがリッチ結果カードに画像を表示する可能性があります
  • 記事: Article スキーマの image フィールドは、 Google DiscoverやTop Storiesでのサムネイル表示に影響します

最低限、ImageObject エントリには contentUrl、width、 height、caption を設定してください。

8. CDNで画像を配信する

CDN（コンテンツデリバリーネットワーク）は、各ユーザーに地理的に近いエッジノードから画像を配信し、 レイテンシを削減します。画像の読み込み時間が300 msから50 msに短縮されると、LCPスコアと 直帰率に測定可能な差が生じます。

  • Cloudflare Images、Cloudinary、ImgixはオンデマンドのリサイズとフォーマットをL変換機能を提供します
  • 多くのホスティングプロバイダー（Vercel、Netlify、Render）にはCDNが含まれています — 静的アセットもCDNで配信されているか確認してください
  • ホスティングにCDNが含まれていない場合は、Cloudflareの無料プランで基本的なカバーが可能です

SEOクイックチェックリスト

公開前に、すべての画像について以下の項目を確認してください:

  1. ハイフンとターゲットキーワードを含む説明的なファイル名
  2. 意味のあるalt属性（125文字以内、キーワードを自然に含む）
  3. ファイルサイズ200 KB以下（サムネイルは100 KB以下）
  4. WebPまたはAVIFフォーマット
  5. 表示サイズに合ったサイズ
  6. ファーストビュー外の画像に loading="lazy" 適用
  7. 明示的な width と height 属性の設定
  8. スキーママークアップに画像参照を含める（商品、レシピ、記事）

ほとんどの監査では、ファイル名、圧縮、フォーマットの3つを修正するだけで、数週間以内に 目に見える改善が現れます。まずこの3つから始め、その後残りを順番に適用してください。 画像圧縮と 画像変換ツールで、アップロードなしにブラウザ内で処理できます。