web-dev-qa-db-ja.com

SVGの幅と高さの設定はインデックス作成に重要ですか？

通常、SVGがレスポンシブに表示される場合、<svg>にviewBox属性を設定するだけで、widthおよびheight属性を完全に省略できます（つまり、<svg viewBox="0 0 20 20">のようなもので十分です）。ですから、width属性とheight属性が省略されたSVG画像は、Googleなどの検索エンジンによってどのようにインデックス付けされるのでしょうか。つまり、画像検索でどのサイズで表示されるのでしょうか。

少し検索したところ、次のように表示されているようです。

  • グラフィックが高さよりも広い場合：幅は800pxで、高さはアスペクト比を保持するように設定されます
  • その他：高さは800pxで、幅はアスペクト比を保持するように設定されます

一方、widthおよびheight属性が設定されたSVG画像は、2つの属性に示されるサイズで画像検索に表示されるようです（たとえば、<svg viewBox="0 0 20 20" width="100" height="100">は100x100として表示されます）。

また、widthとheightが100%に設定されているSVGイメージを見つけました。イメージ検索では2000x2000として表示されます。

それでは、SVG画像のwidth属性とheight属性のベストプラクティスは何ですか？省略するか、100%に設定するか、他の値に設定する必要がありますか？

seoindexingimagessvgimage-size
5
cute_ptr

SVGは独自の目的になり得ますが、Webサイト、アクセシビリティリーダー、およびSEOで考慮する必要があるものの多くは、標準のIMGスキーマに基づいています。

このため、検索エンジンが期待すること、つまり確立された古き良きIMGスキーマとそのすべての属性を使用することがベストプラクティスです。

SVGが成熟するにつれて、より堅牢なイメージスキーマが開発されることは間違いありませんが、現時点では、アクセシビリティデバイスとすべてのブラウザーが理解する通常のIMGスキーマを維持してください。

上記に基づいて

常に画像の幅と高さの属性を定義します。これにより、レンダリング中の不必要な再描画とリフローを回避できます。

Google Page Speed

enter image description here

HTMLの高さと幅のプロパティを使用してコードを正しくマークアップせず、サイトに影響を与える場合、 Google および他の検索エンジンが検索結果でペナルティを科します。

enter image description here

メディア埋め込み

さらに、アプリケーションまたはソーシャルメディアで embedding の場合、画像が正しく表示されない場合があります。

HTMLの幅と高さの属性

画像の高さと幅の両方の属性を常に指定します。高さと幅が設定されている場合、画像に必要なスペースはページがロードされるときに予約されます。ただし、これらの属性がないと、ブラウザは画像のサイズを認識せず、適切なスペースを確保できません。効果は、ページレイアウトがロード中に（イメージのロード中に）変更されることです。

サイトスピード：画像には幅と高さの属性が必要ですか？

画像の寸法を含めると、ブラウザは画像を保持する「コンテナ」を引き出して、ダウンロード中に画像用のスペースを確保できます。ブラウザは、画像がダウンロードされてサイズが判明したら、ページ全体に戻って再描画することなく、「コンテナ」の周りのCSSおよびオブジェクトの残りのページをペイントできます。

W3Cの 技術仕様 を参照してください。

5
Invariant Change

width/height要素（<svg>ファイル内にあり、srcがその.svgファイルに設定されているwidth/height要素の<img>属性とは何の関係もない）に.svg属性を設定するかしないかについて、私が思いついたのは明確にしてください）。

1）ユーザーがそのSVGを別のタブで開くと、SVGは固定サイズではなく画面全体に表示されるため、SVGが応答する場合、width/height要素に<svg>属性を設定しないことが最良の選択のようです。多くの場合、小さすぎる、または大きすぎる（したがって、スクロールバーが表示される）。 2）検索エンジンがSVGファイルにアクセスすると、<svg>要素で指定されたwidthおよびheightが表示されないため、SVGはおそらく応答SVGとして解釈されるため、検索エンジンは表示に最適なサイズを選択します画像検索（現在、少なくともGoogleでは800pxのようですが、これは将来変更される可能性があります）。 3）そのようなSVGが<img>に含まれており、<img>がwidth/height属性を指定していない場合、<img>は利用可能な幅全体を埋めます。ただし、width/heightの<img>を任意の値に自由に指定でき、適切なサイズになります。

width/heightに<svg>を設定すると便利な唯一のケースは、画面サイズに関係なく、SVGが常にその特定のサイズで表示されることになっている場合です（つまり、SVGはレスポンシブ）。 width/heightを設定すると、ユーザーが別のタブでSVGを開いたときに指定したサイズになり、検索エンジンは指定したサイズでインデックスを作成します。SVGが<img>に含まれ、<img>には含まれませんwidth/height属性を指定すると、<img>のサイズはwidth/heightで指定された<svg>と一致します。ただし、width/heightで<img>属性を指定し、<svg>で指定された属性と一致しない場合、SVGは<img>で指定されたサイズに適切にサイズ変更されますが、SVGのサイズは固定されているため、 width/heightに<img>属性を設定するには、おそらくwidth/heightの<svg>属性に一致するように設定する必要があります。

0
cute_ptr