Best Practices für die Suchmaschinenoptimierung für Google Bilder

Google Bilder ist ein Dienst, mit dem Nutzer Informationen im Web visuell entdecken können. Durch neue Funktionen wie Bildunterschriften und gut sichtbare Kennzeichnungen, die mehr Kontext zu Bildern liefern, erhalten Nutzer schnell zusätzliche Informationen.

Mit dem zusätzlichen Kontext, den du zu deinen Bildern bietest, erhalten die Nutzer aussagekräftigere Suchergebnisse. Dies wiederum kann die Qualität der Zugriffe auf deine Website erhöhen. Du kannst dazu beitragen, dass deine Bilder und deine Website über die Google Suche gefunden werden, indem du beides für Google Bilder optimierst., z. B. mit alt-Attributen für Bilder oder mit Markup für strukturierte Daten. Wenn du unsere Richtlinien einhältst, erhöhst du die Wahrscheinlichkeit, dass deine Inhalte in den Google Bilder-Suchergebnissen angezeigt werden.

Hervorragende Nutzererfahrung schaffen

Wenn du die Sichtbarkeit deiner Inhalte in Google Bilder verbessern möchtest, dann führt der beste Weg dazu über eine gute Nutzererfahrung: Erstelle die Seiten in erster Linie für deine Nutzer, nicht für Suchmaschinen. Hier einige Tipps:

• Guten Kontext bieten: Sorge dafür, dass dein visueller Inhalt für das Thema der Seite relevant ist. Wir empfehlen dir, Bilder nur dort einzusetzen, wo sie den Nutzen der Seite steigern. Wir raten insbesondere von Seiten ab, auf denen weder die Bilder noch der Text Originalinhalte sind.
• Platzierung optimieren: Platziere Bilder möglichst in der Nähe von relevantem Text. Wenn es sinnvoll ist, platziere das wichtigste Bild möglichst weit oben auf der Seite.
• Wichtigen Text nicht in Bilder einbetten: Text sollte nicht in Bilder eingebettet werden, insbesondere wichtige Textelemente wie Seitenüberschriften und Menüpunkte, da nicht alle Nutzer darauf zugreifen können und Seitenübersetzungstools bei Bildern nicht funktionieren. Für die maximale Zugänglichkeit deiner Inhalte empfehlen wir dir, für Text nur HTML zu verwenden und für Bilder Alt-Text anzugeben.
• Informative und qualitativ hochwertige Websites erstellen: Gute Inhalte auf deiner Webseite sind für Google Bilder genauso wichtig wie visuelle Inhalte – sie bieten Kontext und machen das Ergebnis praktisch verwertbarer. Die Inhalte deiner Seiten können verwendet werden, um ein Text-Snippet für das Bild zu generieren, und Google berücksichtigt beim Ranking von Bildern auch die Qualität des Seiteninhalts.
• Gerätefreundliche Websites erstellen: Google Bilder wird häufiger auf Mobilgeräten als auf Desktop-Computern genutzt. Darum ist es wichtig, dass du deine Website für alle Gerätetypen und ‑größen konzipierst. Mithilfe des Tests auf Optimierung für Mobilgeräte kannst du feststellen, wie gut deine Seiten auf Mobilgeräten funktionieren, und du erhältst Feedback zu erforderlichen Korrekturen.
• Gute URL-Struktur für deine Bilder erstellen: Google greift sowohl auf den URL-Pfad als auch auf die Dateinamen zurück, um deine Bilder zu verstehen. Versuche, deine Bilder so anzuordnen, dass sich ein logischer Aufbau der URLs ergibt.

Titel und Beschreibung der Seite prüfen

Google Bilder generiert automatisch einen Titellink und ein Snippet, um Nutzern die Ergebnisse ihrer Suchanfrage bestmöglich zu erläutern. So können Nutzer entscheiden, ob sie auf ein Ergebnis klicken oder nicht. Hier siehst du zwei Beispiele dafür, wie die Titellinks und das Snippet auf einer Google-Suchergebnisseite aussehen können:

Für diese Informationen greifen wir auf verschiedene Quellen zurück, unter anderem auf die beschreibenden Informationen im Titel- und in den meta-Tags einer Seite.

Damit wir möglichst passende Titellinks und Snippets für deine Webseiten anzeigen können, solltest du die Google Richtlinien für Titel und Snippets einhalten.

Strukturierte Daten hinzufügen

Wenn du strukturierte Daten hinzufügst, kann Google Bilder deine Bilder als Rich-Suchergebnisse anzeigen, einschließlich einer gut sichtbaren Kennzeichnung, die Nutzern relevante Informationen zu deiner Seite liefert und den Traffic deiner Website zielgerichtet steigern kann. Google Bilder unterstützt die folgenden Typen von strukturierten Daten:

• Produkt
• Video
• Rezept
• Bild-Metadaten

Folge den allgemeinen Richtlinien für strukturierte Daten sowie gegebenenfalls den Richtlinien für deinen strukturierten Datentyp. Sonst kann es passieren, dass deine strukturierten Daten nicht für eine Anzeige in den Rich-Suchergebnissen von Google Bilder in Betracht kommen. Bei jedem dieser strukturierten Datentypen ist das Bildattribut ein Pflichtfeld, von dem es abhängt, ob der Inhalt in Google Bilder in gekennzeichneten und in Rich-Suchergebnissen angezeigt wird. Hier siehst du zwei Beispiele dafür, wie Rich-Suchergebnisse in Google Bilder aussehen können:

Website auf Schnelligkeit optimieren

Bilder tragen oft den Hauptteil zur gesamten Seitengröße bei und können der Grund dafür sein, dass Seiten langsam und aufwendig zu laden sind. Nutze die neueste Bildoptimierung und responsive Bilder, um eine hohe Qualität und Ladegeschwindigkeit auf deiner Seite zu erreichen.

Analysiere die Geschwindigkeit deiner Website mit PageSpeed Insights und informiere dich unter Warum ist Geschwindigkeit wichtig? über Best Practices und Techniken zur Verbesserung der Websiteleistung.

Fotos in guter Qualität hinzufügen

Hochwertige Fotos sprechen Nutzer mehr an als unscharfe oder unklare Bilder. Außerdem sind gestochen scharfe Bilder für die Nutzer in der Ergebnis-Miniaturansicht attraktiver und erhöhen die Wahrscheinlichkeit, dass deine Seite besucht wird.

Bildern Titel, Beschriftungen, Dateinamen und Text hinzufügen

Google extrahiert Informationen zum Bildgegenstand aus dem Inhalt der Seite, einschließlich Bildbeschriftungen und ‑titeln. Sorge nach Möglichkeit dafür, dass die Bilder in der Nähe von relevantem Text und auf Seiten platziert werden, die für den Bildgegenstand relevant sind.

Auch der Dateiname kann Google Hinweise auf das Thema des Bildes geben. Verwende nach Möglichkeit kurze, aber aussagekräftige Dateinamen. Zum Beispiel ist my-new-black-kitten.jpg besser als IMG00023.JPG. Verwende nach Möglichkeit keine allgemeinen Dateinamen wie image1.jpg, pic.gif oder 1.jpg. Wenn deine Website Tausende von Bildern enthält, könnte eine automatische Benennung der Bilder für dich sinnvoll sein.

Achte bei der Lokalisierung deiner Bilder darauf, die Dateinamen zu übersetzen. Beachte dabei die Richtlinien zur URL-Codierung, wenn du nicht lateinische Zeichen oder Sonderzeichen verwendest.

Beschreibenden Alt-Text im alt-Attribut verwenden

Alt(ernativ)-Text (Text, der ein Bild beschreibt) verbessert die Zugänglichkeit für Personen, die Bilder auf Webseiten nicht sehen können, darunter Nutzer, die Screenreader verwenden oder Verbindungen mit geringer Bandbreite haben.

Google verwendet den Alt-Text zusammen mit Algorithmen für maschinelles Sehen und dem Inhalt der Seite, um das Thema des Bildes zu verstehen. Alt-Text in Bildern ist auch als Ankertext nützlich, wenn du ein Bild als Link verwendest.

Das wichtigste Ziel beim Verfassen deines Alt-Textes sind nützliche, informative Inhalte mit passenden Keywords, die sich auf den Seiteninhalt beziehen. Überlade alt-Attribute nicht mit Keywords (auch als überflüssige Keywords bezeichnet), da dies nicht nutzerfreundlich ist und schnell dazu führen kann, dass deine Website als Spam eingestuft wird.

Schlecht (fehlender Alt-Text):

<img src="puppy.jpg"/>

Schlecht (überflüssige Keywords):

<img src="puppy.jpg" alt="Welpe Hund Baby Hund klein Welpen Hündchen Hunde Hündchen Retriever Labrador Wolfshund Setter Vorstehhund Welpe Jack Russell Terrier Welpen Hund Futter billiges Hundefutter Welpenfutter"/>

Besser:

<img src="puppy.jpg" alt="Welpe"/>

Am besten:

<img src="puppy.jpg" alt="Dalmatiner Welpe apportieren"/>

Berücksichtige auch die Zugänglichkeit deines Alt-Textes gemäß den W3-Richtlinien. Für das <img>-Element kannst du das alt-Attribut des Elements hinzufügen, während du für Inline-<svg>-Elemente das <title>-Element verwenden kannst. Beispiel:

<svg aria-labelledby="svgtitle1">
  <title id="svgtitle1">Googlebot wearing an apron and chef hat, struggling to make pancakes on the stovetop</title>
</svg>

Wir empfehlen dir, Inhalte zu testen, indem du sie auf Zugänglichkeit prüfst und einen Emulator für langsame Netzwerkverbindungen verwendest.

Uns dabei helfen, alle deine Bilder zu finden

Semantische HTML-Bildelemente verwenden, um Bilder einzubetten

Semantisches HTML-Markup hilft Crawlern, Bilder zu finden und zu verarbeiten. Google parst die HTML-<img>-Elemente (auch wenn sie in anderen Elementen wie <picture>-Elementen enthalten sind), um Bilder zu indexieren, indexiert jedoch keine CSS-Bilder.

Gut:

<img src="puppy.jpg" alt="Golden Retriever Welpe" />

Schlecht:

<div style="background-image:url(puppy.jpg)">Golden Retriever Welpe</div>

Bilder-Sitemap verwenden

Du kannst die URL von Bildern mitteilen, die andernfalls möglicherweise nicht ermittelt werden, indem du eine Bilder-Sitemap einreichst.

Im Gegensatz zu regulären Sitemaps können Bilder-Sitemaps URLs aus anderen Domains enthalten, weshalb deine Bilder auch in CDNs (Content Delivery Networks) gehostet sein können. Wenn du ein CDN verwendest, solltest du die Inhaberschaft des CDN-Domainnamens in der Search Console bestätigen, damit wir dich über eventuell gefundene Crawling-Fehler informieren können.

Unterstützte Bildformate verwenden

Google Bilder unterstützt Bilder in den folgenden Formaten: BMP, GIF, JPEG, PNG, WebP und SVG . Außerdem sollte die Dateiendung mit dem Dateityp übereinstimmen.

Du kannst Bilder auch als Daten-URIs inline einfügen. Mit Daten-URIs kannst du eine Datei, z. B. ein Bild, inline einbinden, indem du das src-Attribut eines img-Elements als Base64-codierten String angibst. Verwende dafür das folgende Format:

<img src="data:image/svg+xml;base64,[data]">

Auch wenn durch die Inline-Anzeige von Bildern HTTP-Anfragen reduziert werden können, sollte diese Technik mit Bedacht eingesetzt werden, da sich dadurch die Größe der Seite erheblich erhöhen kann. Weitere Informationen zu Vor- und Nachteilen der Inline-Anzeige von Bildern findest du auf unserer web.dev-Seite.

Responsive Bilder

Responsive Websites sind in der Regel nutzerfreundlicher, da ein Zugriff über verschiedene Geräte möglich ist. In unserem Leitfaden zu responsiven Bildern findest du Best Practices zum Umgang mit Bildern auf deiner Website.

Webseiten verwenden das <picture>-Element oder das srcset-Attribut eines img-Elements, um responsive Bilder anzugeben. Einige Browser und Crawler verstehen diese Attribute jedoch nicht. Wir empfehlen daher, immer eine Fallback-URL über das src-Attribut anzugeben.

Mit dem srcset-Attribut kannst du verschiedene Versionen desselben Bildes für unterschiedliche Bildschirmgrößen angeben.

Beispiel: <img srcset>

<img
  srcset="maine-coon-nap-320w.jpg 320w, maine-coon-nap-480w.jpg 480w, maine-coon-nap-800w.jpg 800w"
  sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
  src="maine-coon-nap-800w.jpg"
  alt="A watercolor illustration of a maine coon napping leisurely in front of a fireplace">

Das <picture>-Element ist ein Container, in dem verschiedene <source>-Versionen desselben Bildes zusammengefasst werden. Damit hast du ein Fallback-Konzept, mit dem der Browser in Abhängigkeit von den Gerätemerkmalen, wie z. B. Pixeldichte und Bildschirmgröße, immer das richtige Bild auswählen kann. Außerdem ist das picture-Element bei der Verwendung neuer Bildformate mit integrierter gradueller Fehlertoleranz für Kunden nützlich, die diese Formate noch nicht unterstützen.

Laut Abschnitt 4.8.1 des HTML-Standards musst du img-Element als Fallback mit einem src-Attribut bereitstellen, wenn das picture-Element im folgenden Format verwendet wird:

Beispiel: <picture>

<picture>
 <source type="image/svg+xml" srcset="pyramid.svg">
 <source type="image/webp" srcset="pyramid.webp">
 <img src="pyramid.png" alt="An 1800s oil painting of The Great Pyramid">
</picture>

Für SafeSearch optimieren

SafeSearch ist eine Einstellung in Google-Nutzerkonten, mit der festgelegt wird, ob Bilder, Videos und Websites mit expliziten Inhalten in den Google-Suchergebnissen angezeigt oder blockiert werden sollen. Sorge dafür, dass Google erkennen kann, um was für eine Website es sich handelt, um ggf. SafeSearch-Filter auf deine Website anwenden zu können. Weitere Informationen zum Kennzeichnen von SafeSearch-Seiten

Inline-Linking für Google Bilder deaktivieren

Bilder können, aber müssen nicht auf der Google Bilder-Suchergebnisseite in Originalgröße angezeigt werden. Dieses sogenannte Inline-Linking kannst du in den Google Bilder-Suchergebnissen deaktivieren.

So deaktivierst du das Inline-Linking:

1. Wenn dein Bild angefordert wird, prüfe den HTTP-Verweis-URL-Header in der Anfrage.
2. Wenn die Anfrage von einer Google-Domain stammt, antworte mit einem 200-HTTP-Statuscode oder einem 204-HTTP-Statuscode ohne weitere Inhalte.

Google crawlt deine Seite und sieht das Bild weiterhin. In den Suchergebnissen wird jedoch nur das Miniaturbild angezeigt, das während des Crawlings generiert wurde. Das Inline-Linking kann jederzeit deaktiviert werden. Die Bilder einer Website müssen dazu nicht noch einmal verarbeitet werden. Diese Methode wird nicht als Bild-Cloaking betrachtet und hat auch keine manuellen Maßnahmen zur Folge.

Du kannst übrigens auch komplett verhindern, dass das Bild in den Suchergebnissen angezeigt wird.

Zu guter Letzt…

Sieh dir unseren Startleitfaden zur Suchmaschinenoptimierung (SEO) an. Er enthält viele nützliche Informationen für dich, wenn du den Rang deiner Website verbessern möchtest. Falls du weitere Fragen hast, kannst du sie im Hilfeforum von Google Search Central stellen.