SEOトラフィックの向上
検索エンジン最適化（SEO）に対する愛憎はさまざまですが、それはあなたのウェブサイトを発見しやすく、ユーザーにとって魅力的にするための重要な要素です。効果的なSEOは、基盤となるプラットフォームからテキストや画像などのユーザー向けコンテンツに至るまで、サイトに関する決定を必要とし、システムの複雑さに応じて多くのアプローチが存在します。
imgixはその複雑さを軽減し、検索結果であなたのサイトが見つかる可能性を高める手助けをします。画像に関する一般的なベストプラクティスと、2つのユースケースにおけるSEO実装の具体的な方法について議論します：ページのランキングを向上させるために画像を最適化し、ページの読み込み速度を速める方法と、画像自体のランキングを向上させる方法です。
一般的なベストプラクティス
画像SEOにおける最も重要な要素はメタデータとコンテキストです。画像はネイティブのメタデータ（例えばEXIF情報）にキーワードを持ちませんので、検索エンジンは他の手がかりに頼って画像の内容を判断し、それに応じてランク付けを行います。
検索エンジンに画像の内容を伝える
以下は、検索エンジンが画像の内容を正確に特定できるようにするために行うことができるいくつかのことです。
- 画像に説明的な名前を付ける。全体的なアセット管理システム内でプログラム的にファイル名を付けることが一般的ですが、ユーザー生成コンテンツの場合はアップロードされたファイルからファイル名を渡すことがあります。可能であれば、画像が示す内容を示すように画像の名前を変更するのが最善です（例：
ford-cargo-van-white-side-view.jpgではなくDSC10003.jpg）。 - 関連するaltタグを含める。同様に、ページにaltタグを使用し、画像の内容に関する人間が読める情報を提供することで、人々と機械の両方がそこに何があるのかを理解するのに役立ちます（例：
alt="man and woman sitting on a picnic blanket"ではなくalt="picnic stock photo"）。製品の場合は、顧客にとって重要なモデル番号、色、サイズ、その他の特性を含めます。これはアクセシビリティの向上にも役立ちます。スクリーンリーダーは、視覚障害者や盲目のユーザーに画像の説明を提供するためにaltタグを使用します。 - ローカライゼーションを考慮に入れる。複数のロケール向けにサイトをローカライズしている場合、各ロケールのSEOを改善するもう一つの方法は、altタグがサイトコンテンツと共に翻訳されるようにすることです。これにより、サポートしているすべての言語でこれらの説明が取得されます。
- 関連するテキストの近くに画像を置く。近接性は、検索エンジンが関連性を判断するもう一つの方法です。したがって、ページを設計する際は、画像を参照しているテキストや参照されているテキストの近くに画像を置きます。
画像ごとに1つのマスターコピーのみを保持する
サイトに同じ画像の複数のコピーがある場合、検索エンジンはどれがマスターでどれが派生物かを常に知っているわけではありません。これにより、検索エンジンによってデータが重複削除されるため、画像のインデックス作成が遅くなることがあります。imgixは、必要に応じてサムネイルなどの派生物をその場で作成し、後でキャッシュすることでこの問題を解決するので、複数のコピーを生成または保存する必要はありません。
ページ読み込み時間の短縮によるSEOの向上
画像サイズはページの読み込み速度（特に最初のバイトまでの時間）に大きく影響し、これはページの検索結果のランキングを決定する重要な指標です。画像サイズを削減することは、特に全体のページの読み込みを多くのユーザーが待ちきれずに離れてしまう閾値以下に抑えることができれば、ランキングの向上に大きく寄与します。
画像のファイルサイズに影響を与える要因は多くあります。imgixはそれらすべてを改善し、ソース画像と比較して平均80％のファイルサイズ削減を実現します。
画像サイズとクロッピング
特定のデバイスに適した（またはできるだけ近い）画像の正確な寸法を提供することは、画像がページの読み込み時間に悪影響を与えないようにする最良の方法です。画像の実際のサイズと希望のサイズのわずかな違いでも、ファイルサイズを大幅に増加させる可能性があります。
imgixの最も基本的な機能は、必要に応じて任意のデバイスに合わせて画像をリアルタイムでリサイズする能力です。一般的に、お客様は特定のブレークポイントの画像を縮小生成し、最も近いキャッシュされたサイズから正確なサイズにリサイズするか、またはimgix.jsライブラリを使用してリアルタイムで正確なサイズの画像を生成します。さらに、サイズとクロッピングの機能を提供して、画像を関心のある領域だけに再定義することで、すべてのピクセルを活用します。
以下の画像を例に、リサイズとクロッピングがファイルサイズをどのように削減するかを示します：
- オリジナル
- 寸法（ピクセル）：3600×2400
- ファイルサイズ（kB）：6820（6.82MB）
h=800- 寸法（ピクセル）：1200×800
- ファイルサイズ（kB）：233.6
- オリジナルからのファイルサイズ削減：96.53%
- 備考：未設定時の品質デフォルトは
q=75
h=800&w=800&fit=crop- 寸法（ピクセル）：800×800
- ファイルサイズ（kB）：184.15
- オリジナルからのファイルサイズ削減：97.29%
ファイル形式と品質
画像サイズを減らす次の側面は、ユーザーのデバイス、クライアント/ブラウザ、およびデバイスピクセル解像度（DPR）を考慮に入れた最適な形式を提供することです。これらのパラメータは、品質の可視的な損失なしにファイルサイズをさらに削減することができます。自動コンテンツネゴシエーション（autoパラメータ）は、最適な形式が提供されるようにする最も簡単な方法です。これはユーザーエージェントをチェックし、サポートされていれば、WebPやJPEG XRのような新しい形式に画像を変換します。これらの形式は、その前任者よりも優れた圧縮を提供します。また、fmパラメータと組み合わせて、新しい形式をサポートしていないクライアントのためのフォールバックを定義することもできます。
以下の画像を例に、形式と品質を変更することでファイルサイズをどのように削減できるかを示します：
- オリジナル
- 寸法（ピクセル）：2455×3600
- ファイルサイズ（kB）：786.78
auto=format- 寸法（ピクセル）：2455×3600
- ファイルサイズ（kB）：210.58
- オリジナルからのファイルサイズ削減：73.23%（寸法の変更なし）
- 備考：WebPをサポートするクライアントにのみ適用（この例ではChrome）
auto=format&fm=jpg- 寸法（ピクセル）：2455×3600
- ファイルサイズ（kB）：521.68
- オリジナルからのファイルサイズ削減：33.69%
- 備考：フォールバック例；WebPをサポートしていない場合でも大幅な節約が可能（この場合
autoは無視されます）
auto=format&q=40- 寸法（ピクセル）：2455×3600
- ファイルサイズ（kB）：144.11
- オリジナルからのファイルサイズ削減：81.68%
- 備考：未設定時のデフォルトは
q=75ですが、多くの画像では品質の可視的な損失なしにもっと低く設定できます
- 自動パラメータ
- 形式と品質パラメータ
これらをサポートするブラウザの場合、imgixはまた、DPR、ビューポートサイズ、コンテナの幅に関する情報をサービスに渡すクライアントヒントもサポートしています。これにより、JavaScriptを必要とせずにユーザーに正確なサイズが提供されます。
画像SEOの維持に役立つヒント
新しいサイトや画像が主要コンテンツでないサイトの場合、デフォルトのimgixソースURL（domain.imgix.net）を使用することが最適です。これにより、画像の圧縮とページの読み込み時間が改善され、検索ランキングが向上します。これらのケースでは、domain.imgix.netとwww.domain.comまたはdomain.com/imagesのランキングに違いはありません。
ドメインや他のCDNからimgixソースに画像コンテンツを切り替える場合、Googleがサイトを再インデックスしてimgixソースを登録するまでに時間がかかるため、画像の検索ランキングが一時的に低下する可能性があります。画像自体の高いランキング（それらを含むページではなく）がSEO戦略にとって重要である場合、一時的な低下を最小限に抑えるためにいくつかのことができます。
- サイトのドメインのカスタムサブドメインを使用してimgixソースを設定します。imgixソースのデフォルトのURL構造はxxxx.imgix.netですが、CNAMEレコードを使用してサブドメインにリンクし、画像リクエストURLでサブドメインを参照できます。以下の例では、imgixがフェッチしている実際のソースはドメインまたはAmazon S3バケットのような外部ソースにあるかもしれません。
- CNAMEエントリー:
images.domain.com. CNAME domain.imgix.net. - リクエスト:
<img src="http://images.domain.com/image.jpg">
- CNAMEエントリー:
- GoogleウェブマスターツールおよびBingウェブマスターツールでサブドメインを検証します（新しい場合）。これにより、検索エンジンが新しい場所を認識し、それが同じサイトに属することを確認できます。
- サイトコンテンツのすべての画像参照を更新します。これは、コンテンツの画像URLをimgixソース（または上記の方法を使用する場合はサブドメイン）を指すように直接書き換えることで最もよく行われます。可能であれば、ディレクトリ構造とファイル名もドメインの変更を除いて同じに保ちます。画像サイトマップがある場合は、それも更新してください。
- 301リダイレクトの使用を避けてください。画像リクエストが確実に行われる（例えば、外部リンクからあなたの画像へ直接）追加レベルの保証を提供しますが、読み込み時間を増加させ、劣ったユーザー体験を提供します。
- 画像トラフィックをSSL/TLS経由で提供することを検討してください。Googleは現在、httpsを軽い品質シグナルと見なしており、時間の経過とともにその重要性が増す可能性があります。すべての標準imgixソースにはデフォルトでSSL/TLSが含まれていますが、カスタムサブドメインでこれを行うには、imgixソース用のSSL証明書を購入する必要があります—このオプションを検討したい場合は、営業チームに連絡してください (opens in a new tab)。
最後に
上記のすべての要因とヒントを考慮しても、すべての検索エンジンからの一貫したメッセージは、品質の高いコンテンツがまだあなたのサイトと個々のページのランキングを決定する主要な方法であるということです。素晴らしいコンテンツと画像から始め、imgixを使用してリアルタイムでリサイズして重複を排除することで、あなたの位置を改善する道を歩むことができます。