Bilddaten URI und SEO

8

Denken Sie, dass die Verwendung von Bilddaten-URI SEO-freundlich ist?

Zum einen speichert man eine HTTP-Anfrage. Auf der anderen Seite bringt es Ihren Code wirklich durcheinander. Insbesondere bei Bilddateien mit mehr als 20 KB oder beim Verschieben von GIF-Bilddateien mit bis zu 200 KB ist die Menge des eingefügten Codes enorm. Da Googlebot normalerweise von oben nach unten liest, ist es schwieriger, alle Daten nach der URI-Codierung der Bilddaten in Google gut zu bewerten.

Beachten Sie, dass sich der Bilddaten-URI nicht wie gewohnt in den CSS-Dateien befindet. Derzeit kann ich nur den TinyMCE-Editor verwenden, der mir nur zwei Optionen bietet: entweder Bild mit der Bilddaten-URI-Methode einfügen oder den herkömmlichen Bildlink.

Ich würde gerne wissen, welche suchmaschinenfreundlicher ist.

user3159311
quelle
1
Beachten Sie auch, dass "Base64-codierte Binärdaten ungefähr das 1,37-fache der ursprünglichen Datengröße betragen " ( Wikipedia Base64 ), sodass Ihre Seiten nicht nur größer sind, sondern tatsächlich mehr Daten übertragen und möglicherweise mehr Bandbreite verwenden (GZIP-Codierung kann dies verringern? ). Außerdem hat IE8 Berichten zufolge eine DATA-URI-Größenbeschränkung von 32 KB (ca. 23 KB Bilddateigröße). Es ist also wahrscheinlich nur für kleine Bilder praktisch .
MrWhite
Wenn Sie mit mod_deflate die von Ihnen gesendeten Seiten mit gzip komprimieren, werden die Base64-Daten erheblich verkleinert. Es ist immer noch größer, aber nur um einen sehr kleinen Betrag, schon gar nicht um 1,37.
Stephen Ostermiller

Antworten:

4

Sie beide helfen und verletzen SEO.

Ich habe eine Site, auf der ich Daten-URI-Bilder verwende. Die Bilder sind alle klein. Die meisten Besucher sehen nur eine Seite. Ich habe das JavaScript, das CSS und diese Bilder (unter Verwendung des Daten-URI) eingefügt. Jetzt ist jede Seite nur eine einzelne Anforderung an den Server, und das Seitenladeereignis wird in 400 ms ab dem Zeitpunkt ausgelöst, an dem die Anforderung gestartet wurde. Bevor ich alles einfügte, dauerte es über eine Sekunde.

Verbesserungen bei Leistung und Ladezeit der Seite

Der größte Vorteil ist, dass sie direkt in HTML oder CSS eingebettet werden können. Dies reduziert die Anzahl der Anforderungen, die an den Server gestellt werden müssen, um die Seite zu rendern. Das Reduzieren der Anzahl von Anforderungen kann die Leistung für Benutzer erheblich verbessern. Websites mit höherer Leistung haben einen SEO-Vorteil.

Die Verwendung von "Sprites" oder mehreren kleinen Bildern, die in einer größeren Bilddatei nebeneinander angeordnet sind, und die Verwendung von CSS, um nur den relevanten Teil des Bildes anzuzeigen, ist eine weitere Technik in der gleichen Richtung. Sie sollten auch untersuchen, ob Sprites eine Alternative zu Data-Uri darstellen, da sie nicht viele der Nachteile haben.

Eine erhöhte Seitengröße führt zu niedrigeren Durchforstungsraten

Anfangs gab ich allen Bots die Daten-URI-Bilder. Als ich dies tat, bemerkte ich, dass die Webmaster-Tools berichteten, dass meine Seitengröße dramatisch gestiegen ist und dass Googlebot aufgrund dessen weniger Seiten auf meiner Website gecrawlt hat. Danach habe ich den Benutzeragententest geändert, um alle Bots wie ältere Versionen von IE zu behandeln. Jetzt erhalten Bots und ältere Browser die Bildlinks und moderne Browser die Daten-URI.

Wenn Sie einen Daten-URI für Ihre Bilder implementieren, überprüfen Sie anschließend Ihre Crawling-Rate in den Google Webmaster-Tools. Stellen Sie sicher, dass Googlebot immer noch genügend Seiten auf Ihrer Website crawlt, damit es mit den Änderungen, die Sie an Ihrer Website vornehmen, Schritt halten kann.

Insgesamt mehr Bytes bereitstellen

Die Base64-Codierung vergrößert das Bild um 25%. Die Gzip-Übertragungscodierung hilft einigen, aber Sie liefern immer noch mehr Bytes als die Bilder direkt.

Eingeschränkte Fähigkeit zum Zwischenspeichern von Bildern

Wenn Sie die Bilder in den HTML-Code aufnehmen, müssen Sie sie als Teil jeder nachfolgenden Seite erneut bereitstellen. Umgekehrt werden Bilddateianforderungen normalerweise vom Browser zwischen Seitenanforderungen zwischengespeichert.

Die Verwendung von Daten-URI-Bildern in Ihren CSS-Dateien kann in dieser Hinsicht in Ordnung sein, da die gesamte CSS-Datei zwischengespeichert werden kann.

Eingeschränkte Browserunterstützung

Die Browserunterstützung ist gut, aber nicht perfekt. Alle modernen Browser unterstützen Daten-URI, ältere Versionen von Internet Explorer (7 und früher) jedoch nicht. Ungefähr 1% meiner Besucher verwenden diese alten IE-Browser, als ich das letzte Mal nachgesehen habe.

Aus diesem Grund habe ich Benutzeragententests durchgeführt, um festzustellen, ob Browser Daten-URI unterstützen. Ich versorge Daten-URI bedingt nur für Browser, die dies unterstützen.

Kann nicht für große Bilder verwendet werden

Einige Browser haben Einschränkungen hinsichtlich der Größe von Big-Data-URIs. Ich denke, es ist ungefähr 4k oder so. Sie können Daten-URI nur mit relativ kleinen Bildern verwenden.

Bilder werden bei der Bildsuche nicht angezeigt

Google indiziert keine Daten-URI-Bilder für die Bildsuche. Kleine Bilder, die für Daten-URI geeignet sind, sind im Allgemeinen nicht hoch genug, um bei der Bildsuche einen Rang einzunehmen.

Wenn Sie ein Bild haben, das bei der Bildsuche gut rangiert, konvertieren Sie es nicht in Daten-URI.

Stephen Ostermiller
quelle