web-dev-qa-db-ja.com

ユーザーが複雑なことなくSEOに優しい方法でモバイルで大きな画像をダウンロードできるようにするにはどうすればよいですか？

これが私にやってきたことです。

現在、私の写真サイトのモバイル版では、ほとんどの携帯電話が処理できる標準のハードウェアピクセル解像度よりも大きい写真であっても、ブラウザで直接フルサイズで写真を表示することができます。このため、AdSenseボットがモバイル向けではないページをモバイルサイトにリンクしていると思わないように、戦略を変更する必要があります。

これまでに出てきた唯一のアイデアは、画像をgzipで圧縮し、ダウンロードをgzip圧縮ファイルとして提供することです。これはデスクトップコンピューターを使用している人には問題なく機能しますが、携帯電話のメモリが限られているため予算が限られているため、gzip圧縮されたファイルに適した解凍ツールが見つからない可能性があるため、これはモバイルにとって大惨事になると思います。

すべての画像ダウンロードのアイデアについて、Googleのページ速度の洞察でテストを実行しました。

URLにアクセスすると、ファイルをgzipで圧縮するために、ブラウザーは次のようなヘッダーを処理します。

Last-Modified: Wed, 03 Dec 2014 05:00:00 GMT
Cache-control: max-age=864000,must-revalidate
content-disposition: attachment; filename="Photo2.jpg.gz"
Content-Length: 247064
Accept-Ranges: bytes
Content-Type: application/gzip

デスクトップブラウザーは、ファイルを開く/保存するようユーザーに要求するように正しく応答し、内容は正しく、圧縮ファイルは抽出可能です。問題ありません。ただし、Googleのページ速度の洞察では、デスクトップに次のメッセージが表示されます。

エラーが発生しました

URLは取得されましたが、何もレンダリングされませんでした。 URLがWebブラウザーで正常にロードされるHTMLページを指していることを確認してください。更新して再試行してください。問題が解決しない場合は、PageSpeed Insightsのメーリングリストをご覧ください。

私には大丈夫のようです。そのため、jpegイメージファイル自体を試してみて、ブラウザがこれらのヘッダーを処理しました。

Last-Modified: Tue, 23 Dec 2014 21:57:46 GMT
Accept-Ranges: bytes
Content-Length: 86685
Age: 0
Cache-Control: max-age=2592000
Content-Type: image/jpeg

すべてのブラウザで画像を表示できますが、特にモバイルでテストする場合、Googleのページ速度のインサイトには問題があります。

修正する必要があります：

ビューポートを構成する

ページにビューポートが指定されていません。これにより、モバイルデバイスはデスクトップブラウザーに表示されるとおりにページをレンダリングし、モバイル画面に収まるように縮小します。すべてのデバイスでページが適切にレンダリングされるようにビューポートを構成します。

また、gzipのセットアップのように、イメージを強制ダウンロードイメージにするオプションも試しました。処理されるヘッダーは次のとおりです。

content-disposition: attachment; filename="test.jpg"
cache-control: max-age=864000,must-revalidate
Content-Length: 86685
Content-Type: image/jpeg

この設定では、ブラウザはこの画像を通常のポップアップ経由でダウンロードするファイルとして提供しますが、Googleがビューポートの設定に関してまったく同じ問題を報告するということです。

私は興味がある。画面に収まるように画像のサイズを変更したり、Googleのページ速度に文句を言うことなく、モバイルWebサイトからフルサイズのダウンロード可能な画像を提供する最良の方法は何でしょうか？

POSTメソッドを使用せざるを得ず、ボタンが既にサイトにある他のものと比較して異なって見える場合でも、グーグルが不満を言わないように祈るでしょうか？

余分な手順やアプリが一部のデバイスと互換性がないため、多くの余分な手順を必要とせずに、モバイルユーザーにとってプロセスを簡単にしたいと考えています。

imagesmobilecross-browsercross-platformgoogle-pagespeed
3
Mike

あなたが思い浮かぶいくつかのオプションを探ることができます-どのオプションがあなたに最適かはわかりませんが、あなたはおそらくあなた自身のためにそれを決定するのに最適な裁判官です：

  1. @closetnocが示唆したように、Googleがフォローしない可能性のあるJSリンクを作成します。これは、GoogleがレンダリングとJSの遅れを追って本当に持続的になっているので、永続的に信頼できるオプションにはなりません。

  2. 画像のモバイルバージョン用の特定のパラメーターを追加します。このパラメーターは、Googlebotがrobots.txtを介してアクセスするのをブロックするだけです。

  3. 単純なスパム対策キャッチ画像など、ユーザーがトリガーする単純なイベントを使用して、ボットがリンクをたどらないようにします

1
FarhadD