クロスボーダーボーイ | 画像 SEO 最適化: 実用的な 16 のヒント

目を道に向け、足を地につけ、心の中に壮大な計画を持ちなさい。みなさんこんにちは。Riven@Cross-border Boyです。ここでは主に独立サイトやSEOに関する知識を共有しています。互いにコミュニケーションを取り、共に成長しましょう。
この記事は合計 7,000 語以上あり、読むのに 6 分かかると予想されます。

画像 SEO 最適化とは何ですか?

画像 SEO とは、Google などの検索エンジンからのオーガニックトラフィックを増やすために、Web サイト内の画像を最適化することを指します。たとえば、画像の SEO 最適化により、Google 画像検索でウェブサイトのランクが上がる可能性があります。下記の Dji.com は、Google 画像検索で「カメラドローン」の 7 位と 9 位にランクされています。

しかし、ほとんどの企業が画像検索エンジン最適化 (SEO) に取り組む場合、通常は ALT 画像の代替テキストのみを最適化します (画像の基本属性 ALT は無視されます)。

しかし、画像の SEO 最適化は画像の ALT だけではありません。

なぜ画像はそれほど重要なのでしょうか?

Google 画像検索は全検索の 22.6% を占め、毎日 10 億回を超えるクエリが Google 画像検索で行われています。だからこそ、画像の SEO に注意を払うことが非常に重要です。画像を SEO 向けに最適化しないと、多くのトラフィックを逃してしまいます。

画像 SEO は、次の方法で Web サイトに大量のトラフィックをもたらすことができます。 1. 最適化された画像を使用すると、Google 画像検索で上位に表示される可能性が高くなります。2. 画像はオンページ SEO の重要な部分であり、Google は通常の検索結果 (SERP) に画像を表示することが増えています。

さらに、ユーザーがサイトにアクセスしたときに、写真によってユーザーエクスペリエンスが向上し、ページの魅力が高まります。画像はテキストの大きなセクションを分割できるため、ユーザーが Web サイトのコンテンツを理解するのに役立ち、ユーザーのエンゲージメントが向上し、ツイートの転送やコンバージョンなどが促進されます。（写真の理解度は、数千の単語全体よりも魅力的だからです。人々のコンテンツ理解度：ビデオ > 写真 > テキスト）

画像 SEO のための 16 のヒント

ユーザーエクスペリエンスは、画像 SEO 最適化戦略の中核となる要素です。画像の HTML 属性を正しく入力すると、検索エンジンがソースコードで画像コンテンツを理解できるようになります。

一方、画像の最適化により、ページの読み込み時間とユーザーエクスペリエンスが向上します。良い画像がなければ、良い記事は存在しません。

この記事では、画像SEOの16の側面を3つのパート（画像の準備、画像の追加、画像のテクニカルSEO）から紹介し、検索エンジンとユーザーにとっての画像の価値を最大限に活用するために、画像SEOについて知っておくべきことを紹介します。

画像出典: Riven@Cross-border Boy

1. ページ用の画像を準備する

画像 SEO を行う前に、まずページの画像リソースを準備する必要があります。画像を追加する前に考慮すべき点がいくつかあります。

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

人々は偽物、繰り返し、価値のないコンテンツを好みません。Google も同様です。ウェブサイトにユニークでオリジナル、そして新鮮な画像が多いほど、ユーザーエクスペリエンスが向上し、検索結果で上位にランクされる可能性が高くなります。

ユーザーが SERP にいるとき、またはページに入るときに最初に目にするのはタイトルまたは画像です。

つまり、ページの最初の画像は魅力的で独創的である必要があり、クリックスルー率の向上、ページ直帰率の削減、SEO のメリット、UA の段階的な増加、ページと画像の SERP ランキングの向上などが可能になります。

オリジナルの写真をあまり撮らないという方には、ストック写真を無料で共有できる 2 つの Web サイト、 UnSplash と Pixabay がおすすめです。あるいは、Canva を使用して美しいイラストを作成することもできます。

2. 画像のファイルサイズを圧縮する

圧縮されていない元の画像を Web サイトにアップロードした後、Web ページの読み込みが非常に遅くなることに気づいたことがありますか?

画像が大きすぎると、ユーザーエクスペリエンス、SEO、ショッピングのコンバージョンに重大な影響を及ぼします。ウェブサイトの読み込みが速いほど、ユーザーや検索エンジンがページにアクセスしやすくなります。

画像を圧縮することでウェブサイトの速度を 33%/2 秒向上させるウェブサイトが増えています。

そのため、画像をウェブサイトにアップロードする前に圧縮することを強くお勧めします。これにより、ページの読み込み時間が短縮されます。

画像を圧縮すると、品質を低下させることなくファイルサイズが最小限に抑えられます。本質的には、画像内の冗長データを最小限に抑えて、画像を使用する際の効率と読み込み速度を向上させることです。

画像のファイルサイズを小さくするにはどうすればいいですか?推奨される圧縮ツール: Optimizilla、TinyPNG、ImageOptim、Squoosh、JPEGmini、jpeg.io、Kraken.io

画像がページ速度にどのような影響を与えるかわからない場合は、 Google PageSpeed Insights、Lighthouse、WebPageTest.org、Pingdomなどのツールを使用してページをテストすることをお勧めします。

3. 最適なファイルタイプ/形式（画像タイプ）を選択する

サイトに画像を追加する前に、さまざまな画像ファイル形式に対する SEO のベストプラクティスを理解し、実際のアプリケーションシナリオに基づいて最適なファイルタイプを選択する必要があります。

画像出典: Riven@Cross-border Boy

独立した Web サイトを日常的に使用する場合、通常は画像を JPG/JPEG から WebP に変換します。

注: インライン SVG 形式で .jpg 画像を使用する場合、Google はこれらの .jpg 画像をインデックスに登録しません。

注: 背景にCSSスタイルを使用しないでください。GoogleはCSS画像をインデックスしません。

4. 画像に適切な名前を付ける（画像名）

SEO に関しては、説明的でキーワードを豊富に含むファイル名と URL を作成することが非常に重要です。

画像ファイル名をカスタマイズしないと、「IMG_722019」や「/37ce753280b14ba49f32bd766b3e34fc_1080x.jpg」のように画像名と URL パスが判読不能となり、Google の役に立たなくなります。 Google SEOには良くありません。

画像 URL のパスは、Google やその他の検索エンジンのクローラーに画像の主題を通知します。

しかし、現在多くのウェブサイト構築 SaaS サービスでは、販売者がアップロードした画像 URL を処理する際に、画像名を URL スラッグとして使用せず、代わりにトランスコードしているため、SEO には役立ちません。 (テストしたところ、WordPress ではこれが実行されません)

画像ソース: Google ソースを表示

販売者としては、デフォルトの画像またはファイル名を可能な限り変更し、それを画像またはファイルの URL のスラッグとして使用して、検索エンジンが画像を理解し、SEO 価値を向上させる必要があります。 (たとえば、S925 ネックレスの画像がある場合は、単に「S925 ネックレス」という名前を付けることができます。ただし、Web サイトで女性用の S925 ネックレスを販売している場合は、各画像に「S925 ネックレス 1」、「S925 ネックレス 2」などの名前を付けることができます。ユーザーと検索エンジンが画像を理解しやすいように、画像の URL は「yourdomain.com/image/s925-necklace」です。)

ステップ2: ページに画像を追加する

適切な画像（画像の内容、サイズ、形式、名前の変更）を見つけたら、次のステップはそれを Web サイトのページまたはブログの投稿に追加して最適化することです。

5. キャプション

ユーザーが Web ページをスキャンするときは、ページタイトル、大きなフォント、太字のテキスト、強調表示されたテキスト、箇条書きリスト、グラフィック、画像のキャプション、トピックセンテンス、目次を探す傾向があります。

画像のタイトルとは、ページ上の画像の下のテキスト（各画像の下の灰色のボックス内のテキスト）を指します。

画像ソース: WordPress

画像 SEO にとってタイトルが重要なのはなぜですか?画像の下のキャプションは、メインのコピー自体よりも平均で 300% 多く読まれるため、キャプションを使用しない、または誤って使用すると、多数の潜在的な読者を引き付ける機会を逃すことになります。

画像 SEO の観点から見ると、画像タイトル属性は ALT 代替テキスト属性ほど重要ではありません。しかし、ユーザーエクスペリエンスの観点から見ると、画像のタイトル属性は、ユーザーがページや画像をスクロールするときのユーザーエクスペリエンスを向上させることができます。

 [caption id=&quot;attachment_1370&quot; align=&quot;alignnone&quot; width=&quot;600&quot;]src=&#39;/images/loading.gif&#39; data-original=&quot;&quot; width=&quot;600&quot; height=&quot;601&quot; /&amp;amp;gt;这是说明文字[/caption]

過剰な最適化を避けるために、すべての画像の下に説明を追加する必要はありません。代わりに、訪問者にとって意味のある画像にのみ、付随する説明的なキャプションを追加します。 SEO のために SEO を行うのではなく、まずユーザーを考慮する必要があります。

6. SEOに適した説明的な代替テキスト（ALT属性）を書く

画像の ALT（代替テキスト）は、画像の説明文です。 SEO 担当者は、ALT テキストを「ALT 属性」または「ALT タグ」と呼ぶことがあります。

ALT タグを最適化することは、Google 画像検索で画像を Google にランク付けしてもらうために非常に重要であり、全体的なオンページ SEO 戦略にも役立ちます。

これは、代替テキストを使用すると、その画像に何が表示されるかを Google に伝えることができるためです。

また、サイトのユーザーへのアクセシビリティの向上にも役立ち、画像が壊れている場合に何が表示されるかをユーザーに説明します。

次の例を見てください。画像が正しく読み込まれたとき、画像が壊れていて代替テキストがない場合、画像が壊れているが代替テキストがある場合の画像の外観を確認できます。

画像ソース: Google ウェブ画像

ウェブサイトの画像に適切な alt タグを追加すると、キーワードが画像に関連付けられ、検索エンジンでのウェブサイトのランクが向上します。

Google は画像の ALT の価値についても語っています。ALT は画像の主題に関する有用な情報を Google に提供します。 Google はこの情報を使用して、ユーザーのクエリに対して返す最適な画像を決定します。

画像出典: Google

追加の SEO 価値: 画像が Web サイト上の別のページにリンクされている場合、代替テキストは内部リンクのアンカーテキストとして機能します。

重要:各画像の代替テキストにキーワードを入力しないでください。最も重要なのは、検索エンジンと人々の両方が理解できるように、画像に何が写っているかを説明することです。画像の周囲に関連情報が多いほど、Google 検索エンジンが画像を理解しやすくなります。

すべての画像に代替テキストが必要なわけではありません。代替テキストはコンテンツの一部とみなされ、意味のある場所に追加される必要があります。 (たとえば、純粋に装飾目的で使用される画像がある場合、その画像には代替テキストは必要ありません。この場合、代替テキストがあっても価値は追加されません。一方、先月国別に S925 女性用ネックレスを検索した人の数などの統計情報を含む画像がある場合は、これを代替テキストに反映する必要があります。)

7. ページのタイトルと説明を最適化する（Ttitle&Descrption）

画像が使える状態になったら、そのまま記事に放り込まないでください。代わりに、関連するテキストコンテンツの近くに追加すると、非常に役立ちます。テキストコンテンツが画像と同じくらい関連性があることを確認してください。これは、ユーザーと Google が好むものです。

Google はまた、画像検索アルゴリズムの一部としてページのタイトルと説明を使用していることも明らかにしました。

画像出典: Google

メタデータ、タイトルタグ、ページ上のコピー、構造化データなどの基本的なページ上の SEO 要素はすべて、Google が画像をランク付けする方法に影響します。

8. Open GraphとTwitterカードを最適化する

画像もソーシャルメディア戦略の重要な部分です。 Open Graph と Twitter カードが使用されます。

Open Graph は、もともと Facebook によって導入されたインターネットプロトコルです。 Open Graph タグを使用すると、ソーシャルメディアの投稿プレビューの表示方法を選択できます。つまり、ソーシャル投稿のプレビュータイトルや画像などを選択できます。

画像クレジット: Wix

たとえば、ページを共有するときに選択した画像が表示されるようにするには、<img src="/usr/lib/share/images/src/s ... に画像タグを含めます。

画像出典: Riven@Cross-border Boy

Twitter の場合は、コードを追加する必要があります。

画像出典: Riven@Cross-border Boy

Yoast や RankMath などの SEO プラグインを使用して、これらの画像タグを設定し、ソーシャル投稿をプレビューできます。

3. 画像技術によるSEO最適化

次に、技術的な画像 SEO 最適化についてお話しします。ご興味があれば、引き続きお読みください。

9. 画像ファイルのURL構造を最適化する

Google は画像ガイドラインを更新しました。明らかになった主要なアップデートの 1 つは、ファイルパスとファイル名を使用して画像をランク付けすることです。

重要: ファイルパス (URL とパスレベル) とファイル名 (スラッグ) が実際のランキング要素です。

たとえば、複数の製品を扱う e コマースブランドの場合は、すべての製品画像を汎用の /media/ フォルダーに入れるのではなく、メディアサブフォルダーを /shorts/ や /denim/ などのカテゴリに関連したテーマに構造化することをお勧めします。

10. 構造化データを追加する（Google リッチテキスト）

構造化データはデータの語彙です。理論的には、対応する構造化データをページに追加すると、検索エンジンがウェブサイト上の情報をより明確に理解できるようになり、画像が「リッチリザルト」として表示される可能性が高くなります。

たとえば、商品ページで Schema マークアップを使用し、画像を商品としてタグ付けすると、Google はこの画像と価格タグを組み合わせることができます。検索エンジンはアルゴリズムをスキップし、構造化データで提供される情報を使用して正しい画像を提供します。

画像出典: Google

以下はレシピ例です。このタイプでは、関連する写真、レシピのレビュー、レシピの作成にかかる時間、材料の簡単なリストが表示されます。

画像出典: Google

Google は、構造化データはランキングの向上には役立たないと述べていますが、検索結果 (SERP) に「リッチリザルト」を表示するのに役立ち、ユーザーエクスペリエンス、SERP 露出領域を改善し、ユーザーの注目を集め、クリックスルー率を高めることができます。

独立したウェブサイトに Google 構造化データを実装する方法の詳細については、Google ガイドをお読みください。それでもわからない場合は、私とプライベートチャットできます。

11. 画像サイトマップを作成する

ウェブサイトの画像を SERP に含めるには、Google インデックスに含める必要があります。

Google による画像のインデックス作成はアルゴリズムによって決定されますが、画像サイトマップを作成することでそのプロセスに影響を与え、検索エンジンを支援することができます。

画像サイトマップとは何ですか?サイトマップは、サイト上のページ、ビデオ、画像、およびそれらの関係に関する情報を提供する XML ファイルです。検索エンジンがウェブサイトをクロールするのに役立ちます。

つまり、画像サイトマップを作成すると、画像が検索結果に表示される可能性が高まります。

既存のサイトマップに画像を追加するか、画像専用の別のサイトマップを作成します。サイトマップに画像を追加すると、Google は他の方法では見つけられない可能性のある画像（サイトが JavaScript コードを使用してアクセスする画像など）を検出しやすくなります。

主な違い: 画像サイトマップには他のドメインの URL を含めることができるため、コンテンツをコンテンツ配信ネットワーク (CDN) でホストできます。

画像サイトマップを作成するにはどうすればいいですか? Google の例と手順に従って、手動で画像サイトマップを作成することも、サイトマップジェネレーターを使用して作成することもできます。（次の例は、ページ

画像出典: Google

画像サイトマップを使用すると、ページごとに最大 1,000 枚の画像を含めることができます。

Google は画像タグのリストも提供しています。「必須」とマークされているものを使用する必要があります。一方、オプションのタグを使用すると、検索エンジンにさらに多くのコンテキストを提供でき、ユーザーエクスペリエンスが向上します。

画像出典: Google

画像サイトマップの準備ができたら、Google Search Console サイトマップツールを使用して Google に送信することを忘れないでください。その他のすべての検索エンジンの場合は、robots.txt ファイルに次の行を追加します。

Sitemap で利用できるすべての主要な SEO プラグインには、画像サイトマップ作成機能があります。 WPの場合はYoastとRankMathの使用をお勧めします。 ShopifyまたはShoplineの場合は、Sitemap.xmlが自動的に生成されます。

12. レスポンシブな画像を提供する（M/PCなど）

幅 720 ピクセルの画像を Web サイトにアップロードするとします。ユーザーが小さいディスプレイ（たとえば、幅 320 ピクセル）のモバイルデバイスでアクセスした場合でも、ブラウザーは 720 ピクセルの画像を読み込む必要があります。

問題が分かりますか? 720 ピクセルの画像を読み込むと帯域幅が浪費され、ページの読み込み速度が遅くなり、Web サイトの直帰率が上昇するため、SEO には良くありません。

解決策は、画像に srcset 属性を設定することです。

ブラウザに、画面解像度に応じて異なるバージョンの画像を読み込むように指示します。つまり、ユーザーが PC を使用している場合でも、モバイルデバイスを使用している場合でも、画像はデバイスのサイズに合わせて拡大縮小されます。

 &amp;lt;p&amp;gt;&amp;amp;lt;img srcset=&quot; url size, url size, url size &quot; src=&#39;/images/loading.gif&#39; data-original=&quot;default url&quot;&amp;amp;gt;&amp;lt;/p&amp;gt;

画像の幅 (w) または画像密度 (x) でサイズを定義できます。

 &amp;lt;p&amp;gt;&amp;amp;lt;img srcset=&quot; image/photo1.jpg 900w, image/photo2.jpg 1080w, image/photo3.jpg 2x, image/photo4.jpg 1x,&quot;src=&#39;/images/loading.gif&#39; data-original=&quot;default image/photo.jpg&quot; /&amp;amp;gt;&amp;lt;/p&amp;gt;

Shopify/Shopline/WordPress は、アップロード後に複数のサイズの画像とレスポンシブ画像を自動的に提供します。以下のサンプルコードは完全に Shopify によって生成されたもので、画像の複数のバージョンをアップロードしていません。

画像ソース: Google ソースを表示

これらの SaaS または WP を使用して Web サイトを構築しない場合は、GIMP、Sketch、Photoshop、または Illustrator を使用して処理できます。

13. 画像サイズ属性を定義する

AMP または PWA を使用する場合は、ソースコードで画像のサイズを定義する必要があります。

ただし、これらを使用しない場合は、幅と高さを定義するのがベストプラクティスです。 CSS を読み込む前にブラウザが画像のサイズを変更できるようにすることで、読み込み中にページがジャンプするのを防ぎ、ユーザーエクスペリエンスを向上させます。

画像サイズのプロパティは、Core Web Vitals の最適化を妨げる可能性のある累積レイアウトシフト (CLS) の問題を防ぐためにも重要です。各画像要素とビデオ要素に幅と高さの属性を必ず含めることが非常に重要です。これにより、リソースに割り当てるスペースがブラウザに通知され、煩わしいコンテンツが移動して CLS スコアが低下するのを防ぎます。

14. 遅延読み込みを検討する

ページの読み込みが遅い場合、多くの場合、画像が原因となります。この問題を解決する最善の方法の 1 つは、「遅延読み込み」を使用することです。

遅延読み込みは、ユーザーが必要とするまで画像を画面から「保留」して、画像の読み込みを遅らせる JavaScript テクニックです。遅延読み込みは、ユーザーがページを下にスクロールしてコンテンツに到達した場合にのみ機能します。

つまり、ユーザーが最初にページにアクセスしたときに、ページの読み込みが速くなります。これは画像だけではなく、JavaScript などのアセットもこの方法で読み込むことができます。

画像を遅延読み込みしても、Google ボットによるインデックス作成が妨げられることはないので、SEO への影響を心配する必要はありません。

以下は、Google Chrome ブログの遅延読み込みの視覚化です。

画像出典: Google

ユーザーがページの後半までスクロールしない場合は、基礎となるアセットは読み込まれません。これにより、パフォーマンスが大幅に向上します。ただし、すべての画像を遅延読み込みしないでください。 Google が指摘しているように、スクロールせずに見える範囲の画像の遅延読み込みはユーザーエクスペリエンスを低下させるため、避けるべきです。

15. ブラウザのキャッシュを活用する

Google PageSpeed Insights ツールでは、ブラウザのキャッシュを活用することを推奨することがよくあります。

ブラウザキャッシュとは何ですか?ブラウザキャッシュとは、訪問者のブラウザによって保存されるファイルのことです。これにより、Web サーバーの負荷が軽減され、最終的にはユーザーの読み込み時間が短縮されます。

ブラウザが Web ページを読み込むたびに、ページを正しく表示するためにすべての Web ファイルをダウンロードする必要があります。これには、すべての HTML、CSS、JavaScript、画像が含まれます。

これにより、次の 2 つの問題が発生します。

1. ページ上の大きなファイルは読み込みに時間がかかるため、ユーザーのインターネット接続速度が遅い場合（またはモバイルデバイスの場合）は特に問題になります。

2. 各ファイルはサーバーに個別のリクエストを送信します。サーバーが同時に受信するリクエストの数が増えるほど、サーバーが行う作業が増え、ページの速度がさらに低下するだけです。

ブラウザキャッシュは、特定のページまたはページの一部を異なる間隔で更新する必要があるものとしてマークすることによって機能します。 (たとえば、サイトのロゴが毎日変わることはほとんどありません。ロゴ画像をキャッシュすることで、ユーザーのブラウザに画像を週に 1 回だけダウンロードするように指示できます。ユーザーは、週中にサイトにアクセスするたびにロゴ画像を再度ダウンロードする必要がなくなります。)

ユーザーが初めてサイトにアクセスしたときは、読み込みに同じ時間がかかりますが、そのユーザーがサイトに再度アクセスしたり、ページを更新したり、サイト上の別のページに移動したりすると、必要なファイルの一部がすでにローカルに存在していることになります。

つまり、ユーザーのブラウザがダウンロードするデータが少なくなり、サーバーへのリクエストも少なくなります。ブラウザのキャッシュにより、ユーザーの時間とネットワークサーバーの帯域幅を節約できます。

16. コンテンツ配信ネットワーク（CDNアクセラレーション）を使用する

CDN が最も人気のあるウェブサイト速度最適化の 1 つであることは誰もが知っています。コンテンツ配信ネットワーク (CDN) を使用すると、画像やその他のコンテンツをより速く読み込むことができます。

CDN は、世界中のさまざまな場所に配置されたサーバーのグループです。これにより、さまざまな場所へのコンテンツの配信が高速化されます。

米国にお住まいの場合、米国のサーバーからのコンテンツの読み込みは、アジアのサーバーからのコンテンツの読み込みよりもはるかに高速になります。

以下は CloudFlare の画像です。オリジンサーバーに加えて、多くの場所にある CDN サーバーも表示されます。

ユーザーは最も近い CDN サーバーからコンテンツを取得することがわかります。

画像クレジット: Cloudflare

CDN を提供する企業の中には、専用の画像 CDN も提供しているところもあります。画像 CDN のミッション目標: 画像を最適化し、できるだけ早く訪問者に提供します。画像 CDN を実行すると、画像の配信速度が何倍にも向上します。

画像 CDN を使用すると、画像の変換、最適化、配信を処理できます。いつ、どのようにロードするかを決定できます。 (たとえば、すべての PNG 画像を、読み込みが最も速く、最高の画像品質を提供するため、その場で webp に変換するように指定できます。画像 CDN にはプロセスを微調整するためのオプションが多数ありますが、通常はほとんどのサイトに最適なデフォルト設定があります。)

市場には、Sirv、Cloudinary、Imagekit など、多くの画像 CDN が存在します。さらに、Cloudflare などのプラットフォームを使用すると、画像のサイズを変更したり、再フォーマットしたり、提供したりする方法を決めることができます。ただし、Shopify、Shopline などを使用して Web サイトを構築する場合は、画像 CDN アクセラレーションが組み込まれているため、追加の処理を行う必要はありません。

ウェブサイトの画像に関する問題を素早く診断するにはどうすればよいでしょうか?

ウェブサイトの画像を最適化する方法についてはすでに説明しました。では、修正が必要な既存の問題をどうやって素早く見つけることができるのでしょうか?スペースの制限があるため、後日共有されます。