あなたが知る必要がある11の重要な画像SEOのヒント

【Google翻訳】
ビジュアルコンテンツは、顧客と検索エンジン向けに最適化する必要があります。これらの画像最適化のヒントを使用して、見つけやすさと速度を最大限に高めてください。
最後にウェブサイトに画像をアップロードしたときのことを考えてみてください。ストックフォトサイトから画像をダウンロードし、サイトのバックエンドにアップロードしてから、ページに挿入した可能性があります。

これは、画像の最適化の輝かしい例になりますよね？

サイトに巨大なボウリングボールの重みを追加したため、ページの速度が低下しました。また、検索エンジンは代替テキストがないと画像を読み取ることができません。

それを変えましょう。

Jumpshotの2018年のデータによると、米国のすべてのウェブ検索の20％以上がGoogle画像検索で行われています。

SEOのアマチュアとプロは同様に、あなたのウェブサイトのために画像を最適化することは、時間を費やす価値があることで有名です。

WebSpectionのDanMorganは、画像を最適化することで、4日以内に「カーディフで最高の人物」としてGoogle画像検索で1位にランクインした写真の1つを手に入れました。
また、Robbie Richardsは、画像のaltタグの追加、画像の圧縮、その他いくつかのSEOトリックによって、150,732回の訪問を生み出しました。

適切な画像の最適化がないと、貴重なSEO資産を無駄にしてしまいます。

検索エンジンがオレオとミルクを無料で提供しているようですが、オレオだけを服用します。実際には、オレオはミルクに浸したほうがはるかに優れています。

画像の最適化は、ユーザーエクスペリエンスの向上、ページの読み込み時間の短縮、ランキングの機会の追加など、多くの利点を生み出します。また、画像の最適化はますます重要な役割になりつつあります。

Matt Southernが指摘したように、最近のRedditチャットでの画像検索に関するGaryIllyesの声明は次のとおりです。
「メディア検索は、パブリッシャーにとって何ができるのかという点で無視されすぎていることを私たちは知っているので、より多くのエンジニアとより多くのアウトリーチを投入しています。」

しかし、画像を見つけやすくし、サイトの速度を低下させないために最も重要な要素はどれですか。

ここにあなたが知る必要がある11の重要な画像最適化のヒントがあります。

1.適切なフォーマットを選択します

さまざまな画像形式をすべてデコードすると、Taco Bellで初めて注文したように感じることがあります。ただし、サイトに画像を追加する前に、最適なファイルタイプを選択していることを確認する必要があります。

選択できる画像形式は多数ありますが、WebではPNGとJPEGが最も一般的です。

PNG：より高品質の画像を生成しますが、ファイルサイズが大きくなります。
JPEG：画質が低下する可能性がありますが、品質レベルを調整してバランスをとることができます。
WebP：ChromeとFirefoxの両方でサポートされている唯一の画像形式であるこれを使用して、可逆圧縮または非可逆圧縮を選択します。
私にとって、PNGは画像フォーマットの陰のヒーローです。通常、私はJPEGを使用して、真の写真家が撮影したより大きく、より視覚的な画像を作成します。しかし、日常的に使用する場合は、PNGが最適です。

2.画像??を圧縮します

うん、圧縮されていない画像をアップロードした後、肥大化したWebページのような怒りはありません。

検索エンジンは、クリスコの大きな大桶を見るのと同じようにあなたのウェブページを見るでしょう：あなたはそれをあなたのウェブサイトに置くことを真剣に考えることはできませんよね？
HTTPアーカイブによると、画像はウェブページの総重量の平均21％を占めています。

そのため、サイトにアップロードする前に画像を圧縮することを強くお勧めします。これはPhotoshopで行うか、TinyPNGなどのツールを使用できます。TingPNGにはWordPressプラグインもあります。

ただし、WordPressプラグインとしてWPSmushを使用します。これにより、品質を損なうことなく画像ファイルのサイズが縮小されます。どのプラグインを使用する場合でも、サーバーの外部で画像を圧縮するプラグインを必ず見つけてください。これにより、サイトの負荷が軽減されます。

または、さらに一歩進んで、デバイスを検出し、配信前に画像を最適化する画像CDNを使用します。CloudinaryとImgixは試してみる2つのオプションです。

Increasingly.comは、画像を圧縮することにより、Webサイトの速度を33％/ 2秒改善しました。

つまり、画像を圧縮した後のページ速度の高速化には、何かセクシーなことがあります。

画像がページ速度にどのように影響しているかわからない場合は、GoogleのPageSpeedInsightsツールを使用することをお勧めします。

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

写真をサイトに表示したい。ウェブサイトをストック画像で埋めると、他の何千もの目立たないサイトのように、オリジナルではないように見えます。

あまりにも多くのウェブサイトが同じ一般的なストックフォトで散らかっています。

企業のウェブサイト、コンサルティング会社、カスタマーサービスに誇りを持っているビジネスについて考えてみてください。これらのウェブサイトはすべて、笑顔のビジネスマンのほぼ同じ外観のストックイメージを使用しています。

次のようなものを見たことがあると思います。
ストック画像を完全に最適化することはできますが、元の高品質の画像と同じ影響やSEOの潜在的なメリットはありません。
オリジナルの写真が多いほど、ユーザーのエクスペリエンスが向上し、関連する検索でランク付けされる可能性が高くなります。

大きな画像はGoogleDiscoverで取り上げられる可能性が高いことに注意してください。Googleが高度なSEOリソースで推奨しているように、「大きな画像は少なくとも1200ピクセルの幅で、max-image-preview：large設定で有効にする必要があります。 AMPを使用してください。」画像としてロゴを使用しないでください。

4.著作権に注意してください

使用する画像ファイルに関係なく、著作権の競合がないことを確認してください。

郵政公社は画像著作権訴訟で350万ドルを支払い、スケッチャーズは250万ドルで訴えられました。

Getty、Shutterstock、DepositFiles、またはその他のストックフォトプロバイダーが使用する画像を所有していて、それを使用するライセンスがない場合は、高額な訴訟のリスクがあります。

デジタルミレニアム著作権法（DMCA）に基づき、著作権の問題に違反した場合は通知が発行される可能性があります。コンテンツの所有者がウェブサイトでコンテンツを閲覧した場合、DMCA削除を発行できます。これは遵守する必要があります。 。Google画像検索では、再利用可能な結果に基づいて結果をフィルタリングできます。また、Mindy Weinsteinは41の異なるウェブサイトを共有して、無料の画像を検索します。

5.画像ファイル名をカスタマイズします

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

画像ファイル名をカスタマイズしないことは、何も入っていないブリトーを手に入れるようなものです。

画像ファイル名は、画像の主題に関してGoogleや他の検索エンジンのクローラーに警告します。

通常、ファイル名は「IMG_722019」などのようになります。これは、別の言語のメニューから注文するようなものです。Googleには役立ちません。

ファイル名をデフォルトから変更して、検索エンジンが画像を理解し、SEO値を改善できるようにします。

メディアライブラリの広さにもよりますが、これには少し手間がかかりますが、デフォルトの画像名を変更することをお勧めします。たとえば、このチョコレートの画像を見てみましょう。単に「チョコレート」と名付けることもできますが、ウェブサイトでチョコレートを販売している場合は、すべての画像に「チョコレート-1」、「チョコレート-2」などの名前を付けることができます。
ユーザーと検索エンジンが画像を理解できるように、この画像に「ダークチョコレートコーヒー」という名前を付けました。

6.SEOに適した代替テキストを書く

Altタグは、ブラウザが画像を適切にレンダリングできない場合の画像の代替テキストです。タイトルと同様に、alt属性は画像ファイルの内容を説明するために使用されます。

画像が読み込まれない場合は、左上隅にaltタグが付いた画像ボックスが表示されます。画像に合っていることを確認し、画像に関連性を持たせてください。

altタグに注意を払うことは、ページ上のSEO戦略全体にとっても有益です。他のすべての最適化領域が適切に配置されていることを確認する必要がありますが、何らかの理由で画像が読み込まれない場合、ユーザーは画像の想定内容を確認できます。することが。

さらに、ウェブサイトの画像に適切なaltタグを追加すると、キーワードを画像に関連付けることで、ウェブサイトが検索エンジンでより良いランキングを達成するのに役立ちます。Googleでさえ、画像のaltテキストの価値について言及しています。
これは、画像の主題に関する有用な情報をGoogleに提供します。この情報を使用して、ユーザーのクエリに対して返すのに最適な画像を決定します。

アメリカ障害者法では、自分で画像を表示できない個人には代替テキストが必要です。説明的な代替テキストは、写真の内容を正確にユーザーに警告できます。たとえば、ウェブサイトにチョコレートの写真があるとします。

代替テキストは次のようになります。

＜img src=”chocolate-1.jpg” alt=”chocolate”/＞

ただし、画像を説明するより良い代替テキストは次のようになります。

＜img src=”chocolate-1.jpg” alt=”dark chocolate coffee flavored bar”/＞

代替テキストは、ページのキャッシュされたテキストバージョンで表示できるため、ユーザーと検索エンジンの両方にメリットがあります。さらにSEOの価値を高めるために、画像が別のリンクにリンクしている場合、代替テキストは内部リンクのアンカーテキストとして機能します。サイトのページ。

7.画像ファイルの構造について考える

2018年、Googleは画像ガイドラインを更新しました。彼らが明らかにした主要な更新の1つは、ファイルパスとファイル名を使用して画像をランク付けすることでした。
繰り返し：ファイルパスとファイル名は実際のランキング要素です。

たとえば、複数の商品を扱うeコマースブランドの場合、すべての商品画像を一般的な/ media /フォルダーに配置するのではなく、サブフォルダーを/ shorts /や/ denim /などのカテゴリ関連のトピックに構造化することをお勧めします。

8.ページのタイトルと説明を作成します

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

Googleのサポートページには次のように記載されています。

「Google画像検索は、各結果とそれがユーザークエリにどのように関連するかを最もよく説明するために、タイトルとスニペットを自動的に生成します。この情報には、タイトルの説明情報やメタタグなど、さまざまなソースを使用しています。」

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

ブリトーにすべてのトッピングをかけるようなものです。ワカモレの方が味がいいので、画像のランキングを上げるためにワカモレを追加してください。

9.寸法を定義する

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

ただし、どちらも使用していない場合でも、幅と高さを定義することをお勧めします。これにより、ユーザーエクスペリエンスが向上します。

さらに、CSSが読み込まれる前にブラウザが画像のサイズを変更できるため、読み込み時にページがジャンプするのを防ぎます。

画像の寸法属性は、Core Web Vitalsの最適化を妨げる可能性のある累積レイアウトシフト（CLS）の問題を防ぐためにも重要です。

すべての画像とビデオ要素に幅と高さの属性を含めることが重要です。

これにより、リソースに割り当てるスペースの量がブラウザに通知され、CLSスコアを低下させる煩わしいコンテンツシフトが防止されます。詳細については、こちらをご覧ください。

10.画像をモバイルフレンドリーにする

ああ、モバイルSEO。最悪の場合、直帰率が高く、コンバージョン数が少ない可能性がありますが、最高の状態では、ランキング力とユーザーエンゲージメントが向上します。
問題は、モバイルファーストインデックス用に画像をどのように最適化するかです。

レスポンシブ画像を作成します。これは、ユーザーがデスクトップまたはモバイルを使用しているかどうかに関係なく、画像がサイトのサイズに合わせて拡大縮小されることを意味します。これは、デバイスのサイズに合わせて調整されます。

Mozillaは、srcset属性とsizes属性を使用してブラウザに追加のソース画像を提供する包括的な機能を提供し、デバイス用にサイズ変更された同一の画像コンテンツの表示を可能にします。

この例でリソースから示されているように、これを各行の属性値の異なる部分でフォーマットすることが重要です。
＜img srcset="elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="elva-fairy-800w.jpg"
alt="Elva dressed as a fairy"＞
レスポンシブ画像にsrcsetを使用する方法について詳しくは、こちらをご覧ください。

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

画像をサイトマップに追加する場合でも、画像の新しいサイトマップを作成する場合でも、サイトマップのどこかに画像が必要です。
画像をサイトマップに含めると、検索エンジンが画像をクロールしてインデックスに登録する可能性が大幅に高まり、サイトトラフィックが増加します。

WordPressを使用している場合、Yoastはプラグインでサイトマップソリューションを提供します。

画像最適化の重要なポイント

したがって、画像をサイトにアップロードする前に、必ず上から画像最適化の儀式に従ってください。

最も重要なことは、画像と代替テキストがページに関連していることを確認することです。その他の重要なポイント：

適切なファイル形式を選択してください。スクリーンショットにはPNGが私のお気に入りです。
ページの読み込み速度を上げるには、ファイルサイズを小さくしてください。
ページ上のSEO要素（メタデータ、構造化データなど）が画像とペアになっていることを確認してください。
クロール可能にするために、画像サイトマップを作成するか、画像がサイトマップに掲載されていることを確認してください。
画像の最適化は冗談ではありません。音声検索テクノロジーの進歩に伴い、メディアの重要性が増しており、サイト全体で上記の手順を実行することでメリットが得られます。

幸せな最適化！

SEOコンサルタントのまとめ