Bilder SEO

Bilder SEO optimieren

Wenn es um die Vermarktung 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 für das Web optimieren können. 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:

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

 

1. Bilder auf Leistung optimieren

When it comes to optimizing images for performance there are a lot of things you can do, such as scaling, compression, using responsive images, serving from a CDN, and choosing the right file format.

Image Scaling#

Wenn es um die Arbeit mit Bildern geht, kann es sehr wichtig sein, von den Grundlagen auszugehen, und wir beziehen uns darauf, wie Bilder skalieren. 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.“

Diese Empfehlung bezieht sich darauf, dass Ihre Bilder vom Browser mit CSS verkleinert werden. Zum Beispiel hat das Bild, das Sie hochladen, vielleicht eine Breite von 500px, aber die Spalte, in der es platziert wurde, ist nur 400px breit. Dies führt dazu, dass Ihr Bild aufgrund von CSS auf ein Minimum von 400px verkleinert wird, so dass es der Spaltengröße entspricht. Dies kann in vielen CMS-Plattformen wie WordPress ein Problem darstellen, da die Entwickler von Themes dazu neigen, die Dinge in reaktionsschnellen Themes mit CSS zu verkleinern.

Es wird in der Regel empfohlen, dass Sie Bilder im Maßstab 1:1 hochladen. Dies bedeutet manchmal, dass Sie sie mit Photoshop, Paint oder Gimp 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.

Image Compression#

Just how much of a website is made up of images? Well, according to the HTTP Archive, 62% of the average bytes per page are made up of images. One of the best ways to optimize your images is by taking advantage of smart image compression.

46% of the experts said that the number one priority or focus should be on image optimization! – Web Perf Advice

KeyCDN developed and maintains Optimus Image Optimizer just for that very reason. It reduces the image’s file size without any visible loss in quality. And depending on the image and format, reductions in size of up to 70% are possible. We have a WordPress plugin available and If you utilize the API, it can be used with any platform. The PHP library for the Optimus API is available on GitHub. By using Optimus you can also fix the following Google Pagespeed Insights recommendation: Optimization suggestion: “By compressing … you could save 4.7 KB (30%) without losses.”

 

Responsive Images#

Reagierende Bildtechniken, wie die Attribute HTML srcset und sizes, ermöglichen es uns, verschiedene skalierte Bilder basierend auf der Größe der Anzeige zu bedienen. Sie erweitern die Bild- und Quellelemente, um eine Liste der verfügbaren Bildquellen und deren Größen zu erhalten. Browser können diese Informationen dann nutzen, um die beste Bildquelle auszuwählen. 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">

Wenn Sie WordPress verwenden, sind diese jetzt Teil des Kerns seit WP 4.4, so dass Sie sich keine Sorgen machen müssen, sie hinzuzufügen. Das Cache-Enabler-Plugin von KeyCDN ist vollständig kompatibel mit den Attributen srcset und sizes.

 

Image CDN#

Die Verwendung eines Content-Delivery-Netzwerks wie KeyCDN, oder wie wir es auch nennen, eines Image-CDNs, 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.

File Formats – 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).

We then ran a page comparison test with GTmetrix, JPG vs WebP, and you can see the total difference in page size. WebP resulted in a 77% decrease in page size.

SVG#

SVG (Scalable Vector Graphics) allows vector graphics to be displayed in the browser. They are commonly used for company logos, such as the KeyCDN SVG logo you see at the top of this site. SVG files have a very small file size, can be scaled losslessly without increasing the file size, and can be animated or altered with JavaScript. Another advantage of SVG images is that they can be compressed by Gzip.SVG

When it comes to using SVGs you can include them just like you would any other image, see example below.

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

However this can get a little trickier if you are using a CMS like WordPress, as this type of file is not permitted for security reasons.

You can use a free plugin like SVG Support or Add Full SVG Support to allow you to be able to upload SVGs into the WordPress media library. Note: SVGs might not be compatible though with other 3rd party WordPress plugins.

 

2. Bilder für SEO optimieren

When it comes to optimizing images for SEO there are a lot of things you can do, such as naming your images strategically, using the right alt text, image sitemaps, and ensuring that they are indexing properly with search engines.

Image File Names#

When you name your images you should always keep in mind that search engine bots and crawlers are responsible for seeing them. You can’t expect a computer algorithm to be perfect or guess what your image is, so that is why it is recommended to name your image file names something similiar to your post’s content and or keyword you are focusing on.

For example, on this blog post, our featured image is named: optimize-images-for-web.webp. That is the topic of our post. And **always use hyphens when there are multiple words. **Googlebot sees hyphens as a separator. Don’t use underscores, otherwise Google will read everything as one word.

Image Alt Text#

Alt text, also referred to as alt tags, describe the image and purpose for it on the page. Generally you will want it to be short yet descriptive. See example again below of our featured image and the alt text we chose. A lot of times this might be similiar to the file name you choose.

<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.

Image Title Tags#

Das Attribut Bildtitel, auch als Titel-Tags bezeichnet, wird von Google nicht benötigt. Allerdings gab es in letzter Zeit einige Diskussionen darüber auf dem Search Engine Roundtable in einem Beitrag namens Google Does Index & Rank Images Title Attribute Tags. Dawn hat einen Test mit dem Wort „plinkyploppitypippity“ im Titelattributfeld durchgeführt und den Alt-Text leer gelassen. Ein paar Tage später stellte sie fest, dass Google ihr Bild für diesen Begriff indiziert hatte.

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 keine Rolle spielt. Eine zweite zu berücksichtigende Sache ist, dass sie den Begriff „plinkyploppitypippity“ im Körperinhalt ihres Beitrags verwendete. So ist es möglich, dass Google ihren Postinhalt mit dem Bild verknüpft und indiziert hat.

Im Zweifelsfall kannst du das Titel-Tag hinzufügen, da es nichts schadet. Aber erwarte auch keine Gewinne.

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.

  1. In Google Search Console click into “Crawl” and then “Sitemaps.”
  2. 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.
Indexing Images#

When it comes to Google finding your images you definitely want to make sure they are indexing properly. One way to help troubleshoot that is to use a sitemap file like we described above. Another is to ensure that the settings on your server and or CDN are setup correctly. Search engines check for a robots.txt file at the root of a site. If the file is present, they will follow the instructions but if no file is present, they will scan everything.

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

User-agent: *
Disallow:
  1. The first line defines the crawler the rule applies to. „User-agent: *“ would apply for all bots, such as Googlebot, Bingbot, etc.
  2. 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 das Google mitteilen. Sie können das tun, indem Sie einen kanonischen Header hinzufügen, der den Google-Crawler wissen lässt, dass der Inhalt des CDN eine Kopie ist. Sobald Sie rel=“kanonisch“ zum HTTP-Header hinzufügen, werden Ihre Bilder normal indiziert, da der Crawler weiß, dass es sich nur um eine Kopie und keinen doppelten Inhalt 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.phpfile 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 META Tags#

Facebook Open Graph META tags control how your content appears on Facebook. When you share a post to Facebook the tags tell Facebook what to set for your URL, title, description, and one of the most important parts, your image. See example below of a post on our Facebook page from our 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" />

These can easily be added to any static site manually or if you are on a CMS like WordPress, Yoast is a great free plugin that can add these tags for you automatically. Just make sure they are enabled under the Social settings of the plugin.

Recommended Image Size#

A recommended image size that works well for Facebook is 1,200 x 630px. With the Yoast plugin in WordPress you can actually manually set the OG properties. This is useful if perhaps your WordPress theme uses one size for a featured image, but you still want your Facebook image to look pixel perfect.

Twitter Cards#

Twitter cards work very similiar to the way Facebook Open META graph tags work. They are used to show the preview part in a tweet. There are four primary types of Twitter cards:

  • 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.

Below is an example where someone tweeted a URL from our blog and Twitter then had to rely on our Twitter card to pull the large image and summary.

There are different meta name properties per different Twitter card type. Below is an example of the code for a Summary Card with Large Image.

<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" />

These can easily be added to any static site manually or if you are on a CMS like WordPress, Yoast can add these tags for you automatically. Just make sure they are enabled under the Social settings of the plugin.

 

Recommended Image Size#

A recommended image size that works well for Twitter is 1,024 x 512px. Again, in the Yoast plugin in WordPress you can actually manually set the meta name properties.

Pinterest Rich Pins#

Pinterest has what they call rich pins. There are currently 6 different types of rich pins: app, movie, recipe, article, product and place. They actually use Open Graph metadata just like Facebook. So if you have those tags on your site already you should be good to go. However, you do actually have to apply once to use rich pins.

  1. Go to the Pinterest URL validator
  2. Validate a URL from your site. Any URL that has the Open Graph metadata on it.
  3. Click on “Apply” if everything is setup correctly.

Once you click apply, you should get an email within a few minutes. Then rich pin data will start to show up on Pinterest. Here is an example below of different pins people have pinned from our site.

Google+ Snippets#

Google+ uses Schema.org microdata as a primary way to pull in data for their snippets. But it also uses Open Graph metadata just like Facebook and Pinterest. So if you have those tags on your site already you should be good to go.

 

Summary#

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!