it-swarm.com.de

Ist das Festlegen von Breite und Höhe einer SVG für die Indizierung wichtig?

Wenn SVGs als Reaktion angezeigt werden, müssen wir im Allgemeinen nur das viewBox -Attribut für <svg> festlegen und können die Attribute width und height (dh so etwas wie <svg viewBox="0 0 20 20"> ist genug). Ich frage mich also, wie SVG-Bilder mit den Attributen width und height von einer Suchmaschine wie Google indiziert werden, d. H. Mit welcher Größe sie in der Bildersuche angezeigt werden.

Ich habe ein bisschen gesucht, und es scheint, dass sie wie folgt angezeigt werden:

  • wenn die Grafik breiter als hoch ist: width ist 800px und height wird festgelegt, um das Seitenverhältnis beizubehalten
  • else: height ist 800px und width ist so eingestellt, dass das Seitenverhältnis erhalten bleibt

Auf der anderen Seite werden SVG-Bilder mit den Attributen width und height in der Bildsuche mit der in den beiden Attributen angegebenen Größe angezeigt (z. B. <svg viewBox="0 0 20 20" width="100" height="100"> wird als 100x100 angezeigt ] _).

Ich habe auch ein SVG-Bild gefunden, dessen width und height auf 100% eingestellt sind, und das in der Bildsuche als 2000x2000 angezeigt wird.

Was ist die beste Vorgehensweise für die Attribute width und height von SVG-Bildern? Sollten sie weggelassen, auf 100% gesetzt oder auf einen anderen Wert gesetzt werden?

5
cute_ptr

Während SVGs ein eigenständiger Zweck sein können, basieren Websites, Lesegeräte für Barrierefreiheit und vieles, was Sie beim SEO berücksichtigen müssen, auf dem Standard-IMG-Schema.

Aus diesem Grund ist es empfehlenswert, das zu tun, was Suchmaschinen erwarten, nämlich das bewährte alte IMG-Schema und alle seine Attribute zu verwenden.

Mit zunehmender Reife von SVG werden sich zweifellos stabilere Bildschemata entwickeln. Behalten Sie jedoch vorerst das reguläre IMG-Schema bei, das Eingabehilfen und alle Browser verstehen.


Basierend auf dem oben genannten

Definieren Sie immer die Breiten- und Höhenattribute eines Bildes. Dies hilft, unnötige Überarbeitungen und Rückflüsse beim Rendern zu vermeiden.


Google Page Speed

enter image description here

Wenn Sie Code mit HTML-Eigenschaften für Höhe und Breite nicht korrekt auszeichnen und dies Auswirkungen auf Ihre Website hat, werden Sie von Google und anderen Suchmaschinen in den Suchergebnissen bestraft.

enter image description here


Medieneinbettung

Darüber hinaus werden Ihre Bilder möglicherweise nicht richtig angezeigt, wenn Einbettung in Anwendungen oder sozialen Medien.


HTML width & Height Attribute

Geben Sie immer sowohl die Höhen- als auch die Breitenattribute für Bilder an. Wenn Höhe und Breite festgelegt sind, wird der für das Bild erforderliche Platz beim Laden der Seite reserviert. Ohne diese Attribute kennt der Browser die Größe des Bildes jedoch nicht und kann nicht den entsprechenden Speicherplatz dafür reservieren. Dies hat zur Folge, dass sich das Seitenlayout beim Laden ändert (während die Bilder geladen werden).

Sitespeed: Benötigen Bilder die Attribute width und height?

Wenn Sie die Bildabmessungen einfügen, kann der Browser die "Container" für die Bilder herausziehen und den Speicherplatz für sie reservieren, während sie heruntergeladen werden. Der Browser kann dann die restlichen Seiten mit CSS und Objekten um diese "Container" malen, ohne die gesamte Seite neu zeichnen zu müssen, nachdem die Bilder heruntergeladen wurden und ihre Größe dann bekannt ist.


Siehe technische Spezifikation zu W3C.

5

Folgendes habe ich mir ausgedacht, wenn es darum geht, die Attribute width/height für das Element <svg> festzulegen oder nicht (das sich in der Datei .svg befindet und nichts mit width/height des Elements <img> zu tun hat, dessen src auf diesen .svg festgelegt ist) Datei, nur um klar zu sein).

Das Nichteinstellen von width/height-Attributen für das <svg>-Element scheint die beste Wahl zu sein, wenn Ihre SVG reagiert, weil: 1) Wenn ein Benutzer diese SVG in einem separaten Tab öffnet, füllt die SVG den gesamten Bildschirm aus, anstatt eine feste Größe zu haben und somit Wird häufig zu klein oder zu groß angezeigt (wodurch Bildlaufleisten angezeigt werden). 2) Wenn eine Suchmaschine auf die SVG-Datei zugreift, werden keine width und height angezeigt, die im Element <svg> angegeben sind, und daher wird SVG wahrscheinlich als responsives SVG interpretiert. Daher wählt die Suchmaschine Welche Größe eignet sich am besten für die Anzeige in der Bildersuche (derzeit scheint dies zumindest für Google 800px zu sein, dies kann sich jedoch in Zukunft ändern)? 3) Wenn eine solche SVG-Datei in <img> enthalten ist und der <img> keine width/height-Attribute angibt, füllt <img> einfach die gesamte verfügbare Breite aus. Es steht Ihnen jedoch frei, width/height auf dem <img> für einen beliebigen Wert anzugeben, und die Größe wird entsprechend angepasst.

Der einzige Fall, an den ich denken kann, wenn das Setzen von width/height auf <svg> nützlich sein könnte, ist, wenn SVG immer mit dieser bestimmten Größe angezeigt werden soll, unabhängig von der Bildschirmgröße (mit anderen Worten, die SVG sollte nicht so sein) reaktionsschnell). Durch das Festlegen von width/height wird sichergestellt, dass ein Benutzer, der die SVG-Datei in einem separaten Tab öffnet, die von Ihnen festgelegte Größe hat, Suchmaschinen die angegebene Größe verwendet und eine solche SVG-Datei in <img> enthalten ist und der <img> nicht Wenn Sie width/height-Attribute angeben, stimmt die Größe von <img> mit der in width/height angegebenen Größe von <svg> überein. Wenn Sie jedoch width/height-Attribute für den <img> angeben und diese nicht mit den in <svg> angegebenen übereinstimmen, wird die SVG-Größe ordnungsgemäß auf die in <img> angegebene Größe angepasst. Da die SVG-Größe jedoch festgelegt sein soll, können Sie dies entscheiden Um width/height-Attribute für <img> festzulegen, möchten Sie diese wahrscheinlich so festlegen, dass sie mit den width/height-Attributen von <svg> übereinstimmen.

0
cute_ptr