web-dev-qa-db-ja.com

デバイスタイプに基づいてトリミングされた画像を動的に提供することのSEOへの影響

ウェブサイトを持っていますが、デバイスのサイズに関して最適化しようとしています。フロントページに大きな画像スライダーがあるため、モバイルデバイス用に小さな画像を提供することでサイズを半分にできます（セッション中のブラウザープロパティ（幅/高さ）と組み合わせた単純なユーザーエージェント検出により）。このメカニズムは、URLを../image.pngから../image-small.pngに置き換えることで機能します。ページ上の他のすべては同じままです。私の質問は：

  • 異なるHTMLを提供するため、「Vary：User Agent HTTP header」を使用する必要がありますか？
  • これは、Googleが動的な配信よりもレスポンシブを好むため、ランキングに影響する可能性がありますか？
  • 切り抜きメカニズムを作り直すべきですか？

編集：コンテンツはCMS経由で配信され、テンプレートパイプラインでURLを変更できますが、CSSファイルでそれらを解析できません。主な質問は、これが私のランキングに影響を与え、ヘッダー「Vary」がこれを修正するかどうかです。

seogoogleimagesresponsive-webdesign
3
Johannes Stadler

デバイスに適切なサイズの画像を動的に提供することで変化する可能性がある唯一のSEOは、Google画像検索でのその画像自体のランキングです。

Googleはさまざまなコンテンツをさまざまなデバイスに配信できます 処理する限り Googlebotモバイルユーザーエージェント 対応するモバイルデバイスを処理するのと同じ方法です。彼らは、レスポンシブ、ユーザーエージェントスニッフィング、個別のモバイルサイトのランキング設定はないと述べています。

「Vary：User Agent」HTTPヘッダーを使用すると、ページをキャッシュするプロキシが間違った画像を間違ったデバイスに配信しないため、良いアイデアです。

1
Stephen Ostermiller

質問が明確になる前に、レスポンシブサイトがあると言っていました。レスポンシブCSSを使用して、ブラウザーのサイズに基づいて画像を変更する方法を次に示します。

@media screen and (max-width:480px) {
    #myimage {
        background:url('/smaller-image.png');
    }
}
@media screen and (min-width:481px) {
    #myimage {
        background:url('/bigger-image.png');
    }
}

ユーザーエージェントスニッフィングの使用は、実際には応答性があるとは見なされません。ユーザーエージェントのスニッフィングis Googleのランキングの観点からモバイルサイトを作成するための優れた手法。

3
Stephen Ostermiller