画像データURIおよびSEO
画像データURIの使用はSEOフレンドリだと思いますか？
一方では、HTTPリクエストが保存されます。一方、それは本当にあなたのコードを台無しにします。特に、20KBを超える画像ファイルまたは最大200KBのGIF画像ファイルを移動する場合、挿入されるコードの量は膨大です。 Googlebotは通常上から下へと読み取るため、画像データURIエンコード後のすべてのデータをGoogleで適切にランク付けすることは困難です。
画像データURIは通常のCSSファイルにはないことを考慮してください。当面は、画像データURIメソッドを使用して画像を挿入するか、従来の画像リンクの2つのオプションのみを提供するTinyMCEエディターのみを使用できます。
どちらがより検索エンジンに優しいかを知りたいです。
彼らはSEOを助け、傷つけます。
データURIイメージを使用するサイトがあります。画像はすべて小さいです。ほとんどの訪問者は1ページしか表示しません。 JavaScript、CSS、およびそれらの画像をインライン化しました（データURIを使用）。現在では、各ページはサーバーへの単一のリクエストに過ぎず、リクエストが開始されてから400ミリ秒後にページ読み込みイベントが発生します。すべてをインライン化する前に、1秒以上かかりました。
パフォーマンスとページ読み込み時間の改善
最大の利点は、HTMLまたはCSSに直接埋め込むことができることです。これにより、ページをレンダリングするためにサーバーに対して行う必要のあるリクエストの数が削減されます。要求の数を減らすと、ユーザーのパフォーマンスが大幅に向上します。パフォーマンスの高いサイトにはSEOの利点があります。
大きな画像ファイルで「スプライト」または複数の小さな画像を並べて使用し、CSSを使用して画像の関連部分のみを表示することも、同じ手法です。また、スプライトには多くの欠点がないため、data-uriの代替となるかどうかを調査する必要があります。
ページサイズを大きくすると、クロール速度が低下します
最初は、すべてのボットにデータURIイメージを提供していました。そうすると、Webmaster Toolsが、ページサイズが劇的に大きくなり、Googlebotがクロールを開始したのはサイト上のページが少なくなったことに気づきました。その後、ユーザーエージェントテストを変更して、すべてのボットをIEの古いバージョンのように扱うようにしました。現在、ボットと古いブラウザは画像リンクを取得し、最新のブラウザはデータURIを取得しています。
画像にデータURIを実装する場合は、後でGoogleウェブマスターツールでクロール速度を確認してください。 Googlebotがサイト上の十分なページをクロールし、サイトに加えた変更に対応できるようにしてください。
全体により多くのバイトを提供する
Base64エンコードにより、画像のサイズが25％増加します。 Gzip転送エンコーディングは一部に役立ちますが、画像を直接提供するよりも多くのバイトを提供しています。
画像をキャッシュする制限された機能
HTMLに画像を含める場合、後続の各ページの一部として画像を再度提供する必要があります。逆に、画像ファイルリクエストは通常、ページリクエスト間でブラウザによってキャッシュされます。
CSSファイルでデータURIイメージを使用すると、CSSファイル全体をキャッシュできるため、この点で問題ありません。
限定的なブラウザサポート
ブラウザのサポートは優れていますが、完璧ではありません。最新のブラウザはすべてデータURIをサポートしていますが、Internet Explorerの古いバージョン（7以前）はサポートしていません。前回訪問したときに、訪問者の約1％がこれらの古いIEブラウザーを使用しています。
そのため、ブラウザがデータURIをサポートしているかどうかを判断するために、ユーザーエージェントテストを行いました。データURIを条件付きでサポートしているブラウザにのみ提供します。
大きな画像には使用できません
一部のブラウザには、ビッグデータURIの上限があります。私はそれが約4kかそこらだと思います。比較的小さな画像でのみデータURIを使用できます。
画像は画像検索に表示されません
Googleは、画像検索のためにデータURI画像のインデックスを作成しません。 data-URIに適した小さな画像は、一般に画像検索でランク付けするのに十分なほど高品質ではありません。
画像検索で適切にランク付けされた画像がある場合、data-URIに変換しないでください。