Bilder SEO optimieren

Wenn es um das Online Marketing Ihrer Website geht, gibt es viele verschiedene Aspekte zu berücksichtigen, wie z. B. Geschwindigkeit, SEO, Bounce-Rate und viele andere. Wir konzentrieren uns normalerweise nur auf den Leistungsaspekt, aber heute wollen wir in zusätzliche Möglichkeiten eintauchen, wie Sie Bilder SEO optimieren. Die Dateigröße Ihrer Bilder ist natürlich sehr wichtig, aber auch SEO und Social Media spielen eine wichtige Rolle, wenn es darum geht, dass Ihre Website besser funktioniert und konvertiert wird.

Im Folgenden werden wir die drei Bereiche besprechen, in denen Sie Bilder für das Web besser optimieren können:

Wie man Bilder für eine bessere Webleistung optimiert
Wie man Bilder für SEO optimiert, um sie besser in Suchmaschinen zu platzieren und zu indizieren.
Wie man Bilder für Social Media für ein besseres Engagement und CTR optimiert.

Bilder auf Performance optimieren

Wenn es darum geht, Bilder auf Performance zu optimieren, gibt es eine Menge Dinge, die Sie tun können, wie z.B. Skalierung, Komprimierung, Verwendung reaktionsschneller Bilder, Bereitstellung aus einem CDN und die Wahl des richtigen Dateiformats.

Bild-Skalierung

Dateigröße und Bilder SEO gehören zusammen. Bilder SEO Optimierung bedeutet von den Grundlagen auszugehen und zu meistern. Wir beziehen uns auf die Bild-Skalierung. Laden Sie Ihre Bilder im korrekten Format hoch, so wie es später angezeigt wird? Die meisten von Ihnen haben wahrscheinlich die folgende Empfehlung von Google Pagespeed Insights an der einen oder anderen Stelle gesehen, wenn Sie einen Geschwindigkeitstest durchführen: Optimierungsvorschlag: „Durch Komprimierung und Anpassung der Größe von …. können Sie 5,8 KB (51%) sparen.

Wir empfehlen, dass Sie Bilder im Maßstab 1:1 hochladen. Dies bedeutet, dass Sie Bilder beschneiden müssen, bevor Sie sie hochladen. Das spart Ressourcen und hält Sie gleichzeitig an die Richtlinien von Google Pagespeed. Oder Sie können auch mehrere Auflösungen Ihrer Bilder hochladen und die richtige Auflösung für das richtige Gerät bereitstellen.

Bild-Komprimierung

Die Bild-Komprimierung ist ausschlaggebend für die Dateigröße des Bildes. Die Datei eines komprimiertes Bild kann bis 80% kleiner sein als das Orginal. Eine der besten Möglichketen, Ihre Bilder zu optimieren, besteht darin, die Vorteile einer intelligenten Bildkomprimierung zu nutzen. Wie viel einer Website besteht aus Bildern? Nun, dem HTTP-Archiv zufolge bestehen 62% der durchschnittlichen Bytes pro Seite aus Bildern.

46% der Experten sagten, dass die oberste Priorität oder der Fokus auf der Komprimierung liegen sollte!

Und je nach Bild und Format ermöglicht Komprimierung von bis zu 70% möglich. Wir verfügen über ein WordPress-Plugin, und wenn Sie die API verwenden, kann es mit jeder Plattform verwendet werden. Die PHP-Bibliothek für die Optimus-API ist auf GitHub verfügbar.

Responsive Bilder

Responsive Bilder, über die Attribute SRCSET und SIZES, ermöglichen es, verschiedene skalierte Bilder basierend auf der Größe der Anzeige auszuliefern. Sie erweitern die Quell-Elemente, um eine Liste der verfügbaren Bilder mit deren Größen. Browser können diese Informationen dann nutzen, um die beste Bildquelle auszuliefern. Beide Attribute sind Teil der HTML-Spezifikation und können einzeln oder in Verbindung mit dem Bildelement verwendet werden.“

Hier ist ein typisches Beispiel für die Verwendung eines nicht reagierenden Bildes.

<img src="responsive-images-car.jpg" alt="responsive images car" width="640" height="434">

Hier ist ein Beispiel, wenn Sie die neuen responsive Attribute hinzufügen.

<img srcset="responsive-images-car-160.jpg 160w,
             responsive-images-car-320.jpg 320w,
             responsive-images-car-640.jpg 640w,
             responsive-images-car-1280.jpg 1280w"
     sizes="(max-width: 480px) 100vw,
            (max-width: 900px) 33vw,
            254px"
     src="responsive-images-car.jpg" alt="responsive images car">

Content Delivery Netzwork

Die Verwendung eines Content Delivery Network kann einer der einfachsten und schnellsten Wege sein, die Bereitstellung Ihrer Bilder zu beschleunigen. Der Hauptgrund ist, dass es die Latenzzeit für den Benutzer, wo sie sich befinden, verringert, indem es Ihre Bilder von einem POP aus bedient, das ihnen physisch am nächsten liegt. Es ermöglicht auch eine zusätzliche Kontrolle über das Caching Ihrer Bilder sowie den Schutz vor Hotlinks.

Wir haben einige Image-CDN-Tests durchgeführt und die Ergebnisse waren, dass die gesamten Downloadzeiten für unsere Bildmaterialien mit aktiviertem CDN um durchschnittlich 75,58% gesunken sind! Die TTFB und die Downloadzeiten für Inhalte waren die beiden größten Faktoren, die durch die Implementierung eines CDNs reduziert wurden.

Dateiformat – PNG, JPEG, WebP, SVG#

Eine der letzten Möglichkeiten, wie Sie Bilder für die Web-Performance optimieren können, ist eine gute Strategie für die von Ihnen verwendeten Dateiformate. PNG und JPEG sind die am häufigsten verwendeten Bilddateiformate im Web. Es gibt jedoch zwei weitere Formate, die Sie ebenfalls in Betracht ziehen sollten, und zwar WebP und SVG. Diese sind bei weitem die kleinste Größe und können Wunder bewirken, um Ihre gesamte Webseitengröße zu reduzieren.

WebP

WebP ist ein von Google entwickeltes Bildformat, das eine überlegene Kompression von Fotos gewährleistet. Tatsächlich verwenden sie sogar WebP selbst auf Websites wie YouTube. Wir haben einen Test in WordPress mit 5 großen JPG-Bildern durchgeführt, um zu demonstrieren, wie stark die Kompression tatsächlich stattfindet und welchen signifikanten Größenunterschied es zwischen .jpg und.webp-Dateien gibt. Wir verwenden verlustfreie Kompression mit Optimus, um die Bilder zu optimieren und beim Hochladen in die Medienbibliothek auch in das WebP-Format zu konvertieren. WordPress Cache Enabler liefert dann WebP-Bilder basierend auf der Browserunterstützung (Chrome und Opera).

SVG

SVG (Scalable Vector Graphics) ermöglicht die Anzeige von Vektorgrafiken im Browser. Sie werden häufig für Firmenlogos verwendet, wie z.B. das KeyCDN SVG-Logo, das Sie oben auf dieser Website sehen. SVG-Dateien haben eine sehr geringe Dateigröße, können verlustfrei skaliert werden, ohne die Dateigröße zu erhöhen, und können mit JavaScript animiert oder verändert werden. Ein weiterer Vorteil von SVG-Bildern ist, dass sie mit Gzip.SVG komprimiert werden können

Wenn es um die Verwendung von SVGs geht, können Sie diese genau wie jedes andere Bild einbinden, siehe Beispiel unten.

<img src="circle.svg" width="100" height="100">

Dies kann jedoch etwas kniffliger werden, wenn Sie ein CMS wie WordPress verwenden, da dieser Dateityp aus Sicherheitsgründen nicht erlaubt ist.

Sie können ein kostenloses Plugin wie SVG Support oder Add Full SVG Support verwenden, um SVGs in die WordPress-Medienbibliothek hochladen zu können. Hinweis: SVGs sind möglicherweise nicht mit anderen WordPress-Plugins von Drittanbietern kompatibel.

2. Bilder für SEO optimieren

Wenn es darum geht, Bilder für SEO zu optimieren, gibt es eine Menge Dinge, die Sie tun können, wie z.B. Ihre Bilder strategisch zu benennen, den richtigen Alt-Text zu verwenden, Bilder-Sitemaps zu erstellen und sicherzustellen, dass sie von den Suchmaschinen richtig indiziert werden.

Dateibenennung

Wenn Sie Ihren Bildern Namen geben, sollten Sie immer daran denken, dass Suchmaschinen-Bots und -Crawler dafür verantwortlich sind, dass sie gesehen werden. Sie können nicht erwarten, dass ein Computeralgorithmus perfekt ist oder erraten, was Ihr Bild ist. Deshalb ist es empfehlenswert, Ihre Bilddatei so zu benennen, dass sie dem Inhalt Ihres Beitrags und/oder dem Schlüsselwort, auf das Sie sich konzentrieren, ähnelt.

In diesem Blog-Beitrag heißt zum Beispiel das von uns vorgestellte Bild: optimize-images-for-web.webp. Das ist das Thema unseres Beitrags. Und **verwendet immer Bindestriche, wenn es mehrere Wörter gibt. **Googlebot sieht Bindestriche als Trennzeichen. Verwenden Sie keine Unterstriche, sonst liest Google alles als ein Wort.

Alt-Text

Alt-Text, auch als Alt-Tags bezeichnet, beschreibt das Bild und den Zweck für das Bild auf der Seite. Im Allgemeinen werden Sie wünschen, dass er kurz und dennoch beschreibend ist. Sehen Sie unten noch einmal ein Beispiel für das von uns ausgewählte Bild und den von uns gewählten Alt-Text. In vielen Fällen könnte dies dem von Ihnen gewählten Dateinamen ähnlich sein.

<img src="optimize-images-for-web.webp" alt="optimize images for web">

Der Alt-Text wird auch von Screenreadern, den Browsern von Blinden und Sehbehinderten, verwendet, um ihnen mitzuteilen, was auf dem Bild steht. Jedes Bild auf einer Webseite sollte einen Änderungstext haben. Google legt auch großen Wert auf sie, um festzustellen, wie Ihr Bild rangiert und in Beziehung zu den Inhalten auf Ihrer Seite steht. Wenn Sie ein CMS wie WordPress verwenden, gibt es ein Feld, in das Sie den Alt-Text eingeben können, wenn Sie Ihr Bild hochladen. Andernfalls können Sie sie einfach wie oben beschrieben in Ihr HTML einbinden.

Bilder Title Tag

Das Attribut Titel, auch als Titel-Tags bezeichnet. Jetzt gibt es noch ein paar weitere Dinge zu beachten, bevor Sie zurückgehen und Titel-Tags zu all Ihren Bildern hinzufügen. Erstens, dass Google dem Alt-Text höchstwahrscheinlich eine höhere Priorität einräumt, so dass selbst wenn Sie beide hätten, das Titelattribut kleine Rolle spielt. Eine zweite zu berücksichtigende Sache ist, dass sie den Begriff ebenso im Körperinhalt ihres Beitrags verwendete. So ist es möglich, dass Google ihren Postinhalt mit dem Bild verknüpft und indiziert hat.

Image Sitemap

Bild-Sitemaps bieten Informationen, die Google helfen, Bilder zu entdecken, die sie anderweitig nicht finden könnten (z.B. Bilder, die Ihre Website mit JavaScript-Code erreicht), und ermöglichen es Ihnen, Bilder auf Ihrer Website anzugeben, die Google durchsuchen und indizieren soll. Sitemaps sind nicht unbedingt erforderlich, wenn Ihre Website richtig eingerichtet ist, aber durch ihre Verwendung kann sie Ihnen auch helfen, Probleme mit Ihrer Website zu diagnostizieren und tiefer in die Daten einzudringen.

Sie können beispielsweise überprüfen, ob Ihre Bilder indiziert sind, indem Sie sich die Sitemapdaten in der Google Search Console ansehen oder den Suchoperator der Website in Google verwenden. In diesem Beispiel verwenden wir WordPress und das Yoast SEO Plugin, um unsere Sitemaps zu erstellen und einzureichen. Sie können auch ein Drittanbieter-Tool wie xml-sitemaps.com verwenden.

In Google Search Console click into “Crawl” and then “Sitemaps.”
Then click into your “Images” tab and you can see the number of images indexed out of the total submitted, within each of your sitemaps.

Indexierung von Bildern

Wenn es darum geht, dass Google Ihre Bilder findet, sollten Sie auf jeden Fall sicherstellen, dass sie richtig indiziert werden. Eine Möglichkeit, bei der Fehlerbehebung zu helfen, ist die Verwendung einer Sitemap-Datei, wie wir sie oben beschrieben haben. Eine andere Möglichkeit besteht darin, sicherzustellen, dass die Einstellungen auf Ihrem Server und/oder CDN korrekt eingerichtet sind. Suchmaschinen überprüfen, ob eine robots.txt-Datei im Stammverzeichnis einer Site vorhanden ist. Wenn die Datei vorhanden ist, folgen sie den Anweisungen, aber wenn keine Datei vorhanden ist, scannen sie alles.

Here is a typical robots.txt file that allows everything. Typically that is enough to ensure your images are crawl-able.

User-agent: *
Disallow:

The first line defines the crawler the rule applies to. „User-agent: *“ would apply for all bots, such as Googlebot, Bingbot, etc.
The next line defines what path can be indexed. „Disallow: “ tells the search engine to index everything.

Wenn Sie ein CDN in den Mix werfen, gibt es ein paar zusätzliche Dinge, die Sie aktivieren müssen. Da ein CDN Ihre Assets kopiert, müssen Sie Google darüber informieren. Sie können dies tun, indem Sie einen kanonischen Header hinzufügen, der dem Google-Crawler mitteilt, dass es sich bei dem Content des CDN um eine Kopie handelt. Sobald Sie dem HTTP-Header rel=“kanonisch“ hinzufügen, werden Ihre Bilder normal indiziert, da der Crawler weiß, dass es sich nur um eine Kopie und nicht um duplizierten Content handelt.

Wenn Sie WordPress verwenden und Ihre CDN-Bilder beginnen, von Ihrem Google Search Console-Konto de-indiziert zu werden, ist dies wahrscheinlich ein Problem mit der Sitemap-Struktur. Angenommen, Sie verwenden das Yoast SEO WordPress Plugin, müssen Sie möglicherweise ein Snippet oben in Ihrer functions.php file hinzufügen.

Eine weitere zu berücksichtigende Sache, wenn Sie Yoast verwenden, ist, dass manchmal Ihre Bildanhangseiten mit der Indizierung beginnen können. Jedes Bild, das Sie zu WordPress hochladen, ist auf einer eigenen URL der Anhänge-Seite untergebracht. Du willst definitiv nicht, dass die Leute diese sehen, besonders nicht Google. Eine Möglichkeit, dies schnell zu beheben, besteht darin, einfach in die Advanced Yoast SEO-Einstellungen zu gehen und den „Redirect“ für Attachment-URLs zu aktivieren.

3. Bilder für Social Media optimieren

Wenn es um die Optimierung von Bildern für Social Media geht, gibt es viel zu tun, um Ihre CTR und Ihr Engagement zu verbessern, wie z.B. sicherzustellen, dass Sie Facebook Open Graph META-Tags, Twitterkarten, Pinterest Rich Pins und Google Snippets einrichten. Es ist auch wichtig, dass Sie Ihre Bilder richtig dimensionieren.

Facebook Open Graph Tags#

Facebook Open Graph-Tags steuern, wie Ihr Inhalt auf Facebook angezeigt wird. Wenn Sie einen Beitrag auf Facebook freigeben, teilen die Open Graph Tags Facebook mit, was für Ihre URL, Ihren Titel, Ihre Beschreibung und einen der wichtigsten Teile, Ihr Bild, eingestellt werden soll. Siehe Beispiel unten für einen Beitrag auf unserer Facebook-Seite aus unserem Blog.

There are a lot of different meta properties that you can use but these below are the most important ones.

<meta property="og:url" content="https://www.keycdn.com/blog/resource-hints/" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Resource Hints - What is Preload, Prefetch, and Preconnect?" />
<meta property="og:description" content="Check out how you can use resource hints and directives such as preload, prefetch, and preconnect, to speed up delivery of assets on your websites." />
<meta property="og:image" content="https://blog.keycdn.com/blog/wp-content/uploads/2016/03/resource-hints.png" />

Diese können leicht manuell zu jeder statischen Website hinzugefügt werden, oder wenn Sie auf einem CMS wie WordPress arbeiten, ist Yoast ein großartiges kostenloses Plugin, das diese Tags automatisch für Sie hinzufügen kann. Stellen Sie einfach sicher, dass sie in den sozialen Einstellungen des Plugins aktiviert sind

Empfohlene Bildgröße Facebook

Eine empfohlene Bildgröße, die für Facebook gut funktioniert, ist 1.200 x 630px. Mit dem Yoast-Plugin in WordPress können Sie die OG-Eigenschaften sogar manuell einstellen. Dies ist nützlich, wenn Ihr WordPress-Thema vielleicht nur eine Größe für ein dargestelltes Bild verwendet, Sie aber trotzdem möchten, dass Ihr Facebook-Bild pixelgenau aussieht.

Twitter Cards#

Twitter Cards funktionieren sehr ähnlich wie die Facebook Open-Graph Tags. Sie werden verwendet, um den Vorschauteil in einem Tweet anzuzeigen. Es gibt vier Haupttypen von Twitter-Karten:

Summary Card: Title, description, thumbnail, and Twitter account attribution.
Summary Card with Large Image: Similar to a Summary Card, but with a prominently featured image.
App Card: A Card to detail a mobile app with direct download.
Player Card: A Card to provide video/audio/media.

Unten sehen Sie ein Beispiel, bei dem jemand eine URL aus unserem Blog getwittert hat und Twitter sich dann auf unsere Twitter-Karte verlassen musste, um das große Bild und die Zusammenfassung zu erhalten. Je nach Art der Twitter-Karte gibt es unterschiedliche Eigenschaften des Metanamens. Unten sehen Sie ein Beispiel für den Code für eine Zusammenfassungskarte mit großem Bild.

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="Sometimes there is confusion about how a CDN handles images and so in this post we show you the best practices for indexing images in SERPs." />
<meta name="twitter:title" content="CDN SEO: Indexing Images in SERPs" />
<meta name="twitter:site" content="@keycdn" />
<meta name="twitter:image" content="https://blog.keycdn.com/blog/wp-content/uploads/2015/10/cdn-seo-indexing-images.png" />
<meta name="twitter:creator" content="@keycdn" />

Diese können leicht manuell zu jeder statischen Website hinzugefügt werden, oder wenn Sie auf einem CMS wie WordPress arbeiten, kann Yoast diese Tags automatisch für Sie hinzufügen. Stellen Sie einfach sicher, dass sie in den sozialen Einstellungen des Plugins aktiviert sind.

Wie Sie sehen können, gibt es viele verschiedene Möglichkeiten, wie Sie Bilder für das Web optimieren können. Es geht nicht immer nur um die Webleistung, auch wenn wir in der Regel ein wenig voreingenommen sind. Aber wenn es um Marketing geht, spielen Geschwindigkeit, SEO und Social Media alle eine wichtige Rolle, wie erfolgreich Ihre Website und/oder Marke im Web ist. Haben Sie andere Tipps zur Bildoptimierung, die wir vielleicht übersehen haben? Fühlen Sie sich frei, unten einen Kommentar abzugeben!