知っておくべき画像SEOの12の重要なヒント

イントロ

画像はしばしばウェブページの大部分を占め、Googleの検索結果には独自のタブが表示される。画像は完全なSEO戦略の重要な一部であるため、より良い視認性を得るためには画像の最適化が不可欠です。

検索エンジンは画像をどのようにインデックスし、理解するか

検索エンジンはウェブページをクロールして画像を発見し、メタデータやファイル名などのデータを抽出します。Googleは、画像の文脈や内容を理解するために、周囲のテキスト、画像ファイル名、altテキスト、キャプション、ページコンテンツなどの要素を使用します。

画像SEOとは？

画像の最適化には、画像の圧縮、レスポンシブ画像の使用、遅延読み込みの実装、関連するaltテキストの追加、説明的なファイル名の使用、構造化データの実装などにより、検索エンジンの結果ページ（SERP）での可視性を高めるテクニックが含まれます。

1.正しい画像フォーマットを選ぶ

Googleは、JPEG、PNG、WebP、BMP、GIF、SVGなどのフォーマットをサポートしています。それぞれのフォーマットには長所と短所があります：

• PNG:ロスレス圧縮、より良い品質、透明度をサポート、ファイルサイズが大きい。

• JPEG：非可逆圧縮、品質調整可能、ファイルサイズが小さい。

• WebP:効率的でファイルサイズが小さく、すべての主要ブラウザでサポートされています。

• GIF：ロスレスで256色に制限され、シンプルなグラフィックやアニメーションに適している。

• SVG:ベクターベースでスケーラブル、ロゴやアイコンに最適。

• BMP:サイズが大きく、非圧縮、高品質。

推奨PNGを使用し、最適な品質とロード時間のためにWeb展開用にWebPに変換します。

2.ユニークな画像を作成する

一般的なストックフォトは避けましょう。ユーザーエクスペリエンスとSEOを向上させるために、オリジナルの高品質な画像を使用しましょう。Googleは、画像がGoogle Discoverで大きな画像として表示されるように、robots metaタグでmax-image-preview:large設定を使用し、少なくとも幅1200px以上であることを推奨しています。

<meta name='robots' content='インデックス, フォロー, max-image-preview:large' />

3.画像ファイル名の最適化

検索エンジンが画像の主題を理解しやすくするために、説明的でキーワードの多いファイル名を使用します。IMG_722019」のようなデフォルト名は避けましょう。

4.SEOフレンドリーなAltテキストを書く

Altタグは画像の内容を記述し、アクセシビリティを向上させます。また、検索エンジンが画像の文脈を理解しやすくなり、ランキングの向上に役立ちます。

例

<img src="chocolate-1.jpg" alt="ダーク・チョコレート・コーヒー風味のバー"/>。

5.ページのタイトルと説明を最適化する

画像検索のランキングを上げるために、ページタイトルと説明文に関連キーワードを含める。すべてのページ内SEO要素が最適化されていることを確認する。

6.寸法を定義する

累積レイアウトシフト（CLS）の問題を防ぎ、コアウェブバイタルのスコアを向上させるために、すべての画像に幅と高さの属性を含める。

7.画像をモバイルフレンドリーに

srcset属性とsizes属性を使用して、ユーザーのデバイスに応じて拡大縮小するレスポンシブ画像を作成しましょう。

例

<picture> <source type="image/webp" srcset="image-300w.webp 300w, image-600w.webp 600w, image-1200w.webp 1200w" sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px"> <img src="image-300w.jpg" srcset="image-300w.jpg 300w, image-600w.jpg 600w, image-1200w.jpg 1200w" sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px" alt="画像の説明"> </picture>.

8.レイジーローディングとプリローディング

ページのパフォーマンスを向上させるために、ビューポートにない画像にはレイジーローディングを使用します。フォールドより上の画像には、preloadまたはfetchpriority="high "を使用します。

例

<img src="image.jpg" loading="lazy" srcset="image-300w.jpg 300w, image-600w.jpg 600w" alt="説明文">

9.サイトマップに画像を追加する

サイトマップに画像を含めることで、検索エンジンにクロールされ、インデックスされる可能性が高まります。YoastやRankMath for WordPressのようなプラグインや、Screaming Frogのようなツールを使いましょう。

10.構造化データの追加

構造化データで画像を強化し、検索結果での視認性を向上させる。スキーママークアップを使用して、価格、在庫状況、評価などの詳細を含める。

例

{ "@context": "http://schema.org", "@type": "Article", "headline": "Article Title", "image"：[ "https://example.com/photos/1x1/image.jpg", "https://example.com/photos/4x3/image.jpg", "https://example.com/photos/16x9/image.jpg" ], "datePublished": "2024-01-10T08:00:00+08:00", "dateModified": "2024-01-10T09:20:00+08:00", "author"：{ "@type": "Person", "name": "著者名" }。

11.CDNを利用した画像配信の高速化

コンテンツ・デリバリー・ネットワーク（CDN）は、ユーザーにより近い場所から画像を配信することで、画像を最適化し、より速く配信することができます。Cloudflare、Amazon CloudFront、ImageKit、KeyCDNなどのサービスの利用をご検討ください。

12.著作権に注意

高額な訴訟を避けるため、画像の使用権を確保しましょう。Getty、Shutterstock、DepositFilesなどのプロバイダーからライセンスを受けた画像を使用しましょう。

画像最適化の要点

• 読み込み時間を短縮するために、適切なファイル形式とサイズを選びましょう。

• オンページSEOの要素が最適化されていることを確認する。

• クローラビリティを高めるために画像サイトマップを作成する。

これらのヒントに従うことで、あなたのウェブサイトの画像SEOと全体的な検索可視性を向上させることができます。最適化をお楽しみください！