WordPress 画像サイズの最適化ガイド：SEOに強いブログを作る方法

SEO 向けに画像を最適化するための、データに基づいた実用的なヒントをすぐにご紹介します。ファイル名やサイズから、形式、説明など、すばやく簡単に目を通すことができます。

WordPress 画像サイズの最適化ガイド：SEOに強いブログを作る方法

ブログを運営する際、画像は視覚的な魅力を高め、読者の関心を引く重要な要素です。しかし、大きな画像ファイルはページの読み込み速度を遅くし、SEOに悪影響を及ぼすことがあります。この記事では、WordPressで画像サイズを最適化し、SEOに強いブログを作成する方法を解説します。

なぜ画像サイズの最適化が重要か？

WordPress 画像サイズの最適化は、サイトのパフォーマンス改善とSEO向上に直結します。読み込み速度が速いと、ユーザーエクスペリエンスが向上し、Googleなどの検索エンジンもサイトを高く評価します。

WordPress 画像サイズ と SEO

ページの読み込み速度が低下したり、ユーザーに迷惑をかけたりしないように、CMS にアップロードする前に画像を圧縮します。

画像のサイズを縮小 (または拡大) するために CSS または HTML 属性に頼らないでください。最適なサイズは、背景、ヒーロー、バナー、ブログ画像などの用途によって異なります。WordPress の画像サイズ ガイドなど、CMS の画像サイズ ガイドラインを確認してください。

Google 検索結果には特定のサイズ要件はありませんが、画像はインデックス可能で、公開されている必要があります。

特定の要素、ページ タイプ、SEO 目標の場合:

• Google ニュース: 16:9、4:3、1:1 のアスペクト比で、高解像度 (最小 800,000 ピクセル) の画像を複数含めます。 Google ニュース ガイドライン
• Google Discover: max-image-preview ディレクティブを使用して、大きな画像 (幅 1200 ピクセル以上) を使用します。Google Discover ガイドライン
• ヒーロー画像: 幅 1000 ピクセル以上、アスペクト比 16:9。アスペクト比計算機を使用して寸法をチェックします。

PageSpeed Insights を使用して、画像の読み込み速度をテストし、画像/ページの最適化とパフォーマンスに関するその他の詳細なレポートも取得します。

※チートシート

SEOに最適な画像フォーマット

PNG、JPEG、WebPなど、異なる画像形式にはそれぞれの利点と用途があります。例えば、JPEGは写真に適しており、PNGは透明性が必要なグラフィックに適しています。WebPは、圧縮率が高く、最新のブラウザでサポートされています。

WebP と AVIF は速度と圧縮の点で最適な形式ですが、ユーザーは互換性のために JPG または PNG を好みます。一般的なのデータによると、WebP 画像は JPG や PNG よりも画像検索でインデックス化される可能性が低くなります。

画像に最適な形式を選択すると、すべての画面サイズで品質が向上し、ページ速度が向上します（CDNを使用すればもっと速度が向上します）。

• PNG (.png) はロスレス圧縮を使用して品質を維持するため、ウェブサイトでは JPEG (.jpg) よりも適しています。
• WebP (.webp) は速度と圧縮の点でさらに優れていますが、画像検索ではパフォーマンスが低下します。Google によって開発された WebP は、品質を損なうことなくファイル サイズが小さく、圧縮率も優れています。JPEG とは異なり、透明度をサポートしています。
• AVIF (.avif) は圧縮効率に優れているため、高品質の AVIF 画像は JPEG や PNG に比べてファイル サイズが小さくなります。AVIF は透過性、非可逆圧縮と可逆圧縮の両方、HDR (ハイ ダイナミック レンジ) をサポートしていますが、PNG と WebP はサポートしていません。

結論: AVIF と WebP はどちらも古い画像形式よりも圧縮率と品質に優れていますが、画像検索でインデックス登録される実績は PNG と JPEG のほうが優れています。推奨事項:

• ヒーロー画像やその他の重要な画像には JPEG または PNG を使用する (インデックス登録のため)
• ページにそれほど価値を加えない画像には WebP または AVIF を使用する (速度のため)

互換性

• ‍WebP と AVIF は、Chrome、Firefox、Microsoft Edge、Safari など、ほとんどの最新ブラウザでサポートされています。古いバージョンの Safari (3.2 – 16) では、WebP または AVIF 画像がサポートされていないことに注意してください。
• 2024 年 8 月現在、Google 検索は AVIF 画像ファイル形式をサポートしていますが、すべてのソーシャル プラットフォームがサポートしているわけではありません。このブログ投稿には、AVIF と WebP をサポートしているソーシャル メディア プラットフォームのリストと、自分で確認できるテスト URL が記載されています。
• Open Graph 画像 (og:image) で使用される WebP 画像は、LinkedIn の投稿では機能しません。
• TinyIMG 、ワードプレスプラグイン『Convert for Media』など、多くのツールで JPEG または PNG ファイルを WebP に変換できます。Adobe と Webflow には、WebP コンバータが組み込まれています。
• cloudconvert や Canva など、多くのツールで WebP を JPEG または PNG に変換できます。

e コマースと Google Merchant Center の商品画像

• 商品画像は、統一性と視覚的な魅力を確保するために、1×1 の比率 (正方形) にする必要があります。
• 商品がはっきりと目立つように、画像フレームの 75%～90% を商品が占める必要があります。
• 商品に焦点を合わせ続けるために、白または透明な背景を使用します。Google Merchant Center Next では、背景を削除して画像の解像度を上げることができる AI ツールである Product Studio を提供しています。
• アップロードする前に解像度を最適化し、画像のサイズを変更して、読み込み時間を短縮し、表示を鮮明にします。
• 画像の alt タグを使用して、商品名、タイプ、重要な属性 (色など) をリストし、検索エンジンのランキングを向上させます。
• 製品のみの写真とライフスタイルの写真をテストして、どちらがオーディエンスにとってより効果的かを確認します。
• エンゲージメントを高め、SEO を改善するには、メーカー提供の写真やストック写真よりも独自の写真を優先します。
• クロール可能でインデックス可能なカルーセルに複数の画像を使用して、ユーザーに複数のビューを提供し、ページ滞在時間を増やします。
• PDP の製品画像は、デスクトップとモバイルですぐに認識されるように、スクロールせずに見える範囲に配置する必要があります。
• 可能であれば、製品画像と動画を組み合わせます
• より豊かなユーザー エクスペリエンスを提供するために、複数の PDP で同じ製品画像を使用することは避けてください。
• 各ページに固有のコンテンツが含まれるようにします。

画像の圧縮ツールの使用

画像をアップロードする前に、ツールを使って圧縮し、ファイルサイズを削減します。TinyPNGやImageOptimなどのオンラインツールを活用することで、画質を保ちながらファイルサイズを小さくできます。

WordPressプラグインで自動最適化

WordPressでは、画像を自動的に最適化するプラグインが多数あります。SmushやImagify、ShortPixelなどのプラグインを利用すれば、アップロード時に画像を自動で圧縮し、最適化できます。ここではConvert for Mediaをお勧めしています。

適切な画像の寸法設定

ブログのレイアウトに合わせて、画像の寸法を適切に設定します。過剰に大きな画像を使用すると無駄なデータ量が増えますので、実際に表示されるサイズに合わせて編集しましょう。

画像の遅延読み込み（Lazy Load）の導入

Lazy Loadは、ページスクロールに応じて画像を読み込む技術です。これにより初期読み込み時間を短縮し、ユーザーがページを下にスクロールするまでは画像をロードしないようにできます。Hostingerでのホスティング、プラグイン「Litespeedキャッシュ」を使用することで簡単に設定が可能です。

マニュアルではそれらの画像に loading=lazy HTML 属性を使用してページのパフォーマンスを向上させることができます。

ただし、遅延読み込みが正しく実装されていることを確認する必要があります。そうしないと、逆効果になり、画像コンテンツが Google から見えなくなってしまいます。遅延読み込みに関する Google 検索のドキュメントを使用して、正しく実装してください。

Altテキストとファイル名の最適化

画像のAltテキストはSEOに非常に重要です。画像がどのような内容かを説明する言葉を意識して設定し、適切なキーワードを含めましょう。また、アップロードする前にファイル名もわかりやすく、説明的かつキーワードを考慮したものに変更します。

SEO 用に画像ファイル名を最適化する

アップロードする前に画像ファイル名を最適化します。 Google は画像をクロールすると、しばらくは再クロールしないので、既存のファイル名を変更しても意味がありません。次のベスト プラクティスに従ってください。

• 検索エンジンの可視性を高めるためにファイル名にターゲット キーワードを含めますが、キーワードの詰め込みは避けてください。
• ファイル名は短くし、先頭にキーワードを入れて簡単に識別できるようにします。
• 検索エンジンのインデックス作成に役立つように、説明的で関連性の高い単語を使用します。
• すべての単語を大切にします。ストップ ワード (「a」、「the」、「and」、「in」) は含めないでください。
• 一貫性を保ち、エラーを回避するために小文字を使用します。
• 読みやすくするために、単語を区切るにはスペースやアンダースコアではなくダッシュを使用します。
• 複数の言語で公開する場合は、ファイル名を翻訳して、より幅広いユーザーにリーチします。

画像の代替テキスト（Altテキスト）

画像の代替テキスト（Altテキスト）Alt テキストには複数の目的があります。

• 検索エンジンに画像を説明し、画像のインデックス作成を支援します。
• 画像の読み込みに失敗した場合、ユーザーにコンテキストを提供します。
• スクリーン リーダーによって読み上げられ、視覚障害のあるユーザーがコンテンツにアクセスできるようにします。

代替テキストは、検索エンジンが画像コンテンツを理解するのに役立ちます。正確な画像の説明を提供しますが、短く要点を押さえた内容にしてください。Google は代替テキストを最も重要な画像属性と見なしています。

ベスト プラクティス:

• 検索エンジンとユーザーに役立つように、説明的で関連性のあるものにします。
• 「picture of」や「photo of」は不要な単語を追加するので避けます。
• キーワードを自然な形で使用して、キーワード スタッフィングなしで SEO を強化します。
• 簡潔にして、明瞭性と関連性を確保します。
• 詳細な情報を提供するには、具体的な言葉 (例: 「car」ではなく「Honda Civic」) を使用します。
• アイコンの場合は、アイコンが象徴するものを伝えて (例: 「LinkedIn ページにアクセス」)、明確なガイダンスを提供します。
• ページのトピックに基づいてコンテキストを含めることで、ユーザー エクスペリエンスを向上させます。

コンテキストを提供するということは、画像を説明するだけでなく、代替テキストがページ コンテンツに関連していることを確認することを意味します。たとえば、初心者向けの筋力トレーニングに関するブログ記事では、「ウェイトを持ち上げる人」ではなく、「ウェイト ルームで初心者向けの筋力トレーニングを実演する女性」のように記述できます。

画像にテキストを使用することの問題

画像にテキストを使用することは避けてください。スクリーン リーダーが読み取れないため、アクセシビリティ ガイドラインに準拠していません。画像にテキストを使用する必要がある場合は、アクセシビリティを確保するために、alt タグにテキストをそのまま繰り返します。

Google は現在、Google Cloud Vision API または Google Keep を使用して画像からテキストを抽出できますが、このテクノロジーは完璧ではありません。これに頼ると、誤解や情報の欠落につながる可能性があります。

注目の画像にテキストを含める必要がある場合は、寸法が変わってもテキストが切り取られないようにしてください (Instagram と Google SERP のリッチ リザルトでは正方形のバージョンが表示されます)。

画像キャプションは SEO に役立ちますか?

画像キャプションは、ページ上の画像により多くのコンテキストを提供します。キャプションはSEOに直接影響するわけではありませんが、UXとエンゲージメントを向上させます。

またはユーザーが画像を理解して関心を維持することで、直帰率を下げ、サイト滞在時間を増やすことで間接的に SEO を改善できます。

ベスト プラクティス:

• 必要または追加のコンテキストを提供するのに役立つ場合は、キャプションを追加します。
• コンテンツの独自性を保つために、キャプションで alt タグのテキストを繰り返さないでください。
• 読みやすくするために、最初の単語と固有名詞を大文字にします。
• 画像のキャプションに完全な文やピリオドは必要ありません。簡潔で明確なものにしてください。

画像のタイトル タグ: alt タグとは異なります

タイトル タグは、画像またはリンクにマウスを合わせると表示されます。必須ではなく、検索ランキングには影響せず、モバイル ユーザーには表示されません。

タイトル属性を使用する場合は、ほとんどの訪問者が見ることができず、モバイル ユーザーやスクリーン リーダーにはアクセスできないため、テキストが補足的なものになるようにしてください。

まとめ：画像サイズ ピクセル 一覧

画像サイズの最適化は、サイトのパフォーマンス向上とSEO戦略の重要な部分です。適切なツールとテクニックを活用することで、画像がサイトのパフォーマンスを阻害することなく、訪問者に素晴らしい印象を与えることができます。このガイドを参考に、ぜひあなたのブログをより強力なものにしてください。

チートシート: SEO に最適な画像サイズ (ピクセル数とアスペクト比)

Open Graph プロトコル

• 1600 x 900 (16:9)
• 1200 x 675 (16:9)
• 1200 x 1200 (1:1)
• 1200 x 900 (4:3)

Google Discover

• 1200 x 675 (16:9)
• 1200 x 900 (4:3)
• 1200 x 1200 (1:1)

Google ニュース

• 1200 x 675 (16:9)
• 1200 x 900 (4:3)
• 1200 x 1200 (1:1)

ブログまたは記事のヒーロー画像

• 1600 x 900 (16:9)
• 1200 x 675 (16:9)
• 1200 x 1200 (1:1)
• 1200 x 900 (4:3)

インフォグラフィック画像のサイズ

• 600 x 2400 (1:4)

Google ビジネス プロフィール画像のサイズ

• Google ビジネス投稿: 1200 x 900 (4:3)
• Google ビジネス ロゴ: 720 x 720 (1:1)
• その他の Google ビジネス写真: 1200 x 900 (4:3)、1200 x 1200 (1:1)、1200 x 675 (16:9)

e コマース ウェブサイトの商品画像

• 少なくとも 1500 x 1500 (1:1) で、商品がフレームの 75%～90% を占めている

Google Merchant Center (Google ショッピング) の商品画像

• 少なくとも 1500 x 1500 (1:1)