Google Bildersuche SEO Best Practices

Google bietet verschiedene Suchfunktionen und Produkte, die Nutzern helfen, Informationen visuell im Web zu entdecken, wie zum Beispiel
Text-Ergebnisbilder, Google Discover und Google Bilder. Obwohl jedes Feature und Produkt anders aussieht, sind die allgemeinen Empfehlungen, damit Bilder darin erscheinen, gleich.

Sie können Ihre Bilder für die Google-Suchergebnisse optimieren, indem Sie diese Best Practices befolgen:

1. Helfen Sie uns, Ihre Bilder zu entdecken und zu indexieren
2. Optimieren Sie die Landingpages der Bilder

Helfen Sie uns, Ihre Bilder zu entdecken und zu indexieren

Die technischen Anforderungen damit Ihre Inhalte in den Google-Suchergebnissen erscheinen, gelten auch für Bilder. Da Bilder ein wesentlich anderes Format als HTML sind, gibt es zusätzliche Anforderungen für die Indexierung von Bildern; zum Beispiel ist das Finden der Bilder auf Ihrer Website anders, und die Präsentation der Bilder beeinflusst auch, ob ein Bild überhaupt indexiert wird und für die richtigen Keywords.

Verwenden Sie HTML-Bildelemente, um Bilder einzubetten

Die Verwendung von Standard-HTML-Bildelementen hilft Crawlern, Bilder zu finden und zu verarbeiten. Google kann Bilder im src Attribut eines <img> Elements finden (auch wenn es ein Kind anderer Elemente ist, wie das <picture> Element). Google indexiert keine CSS-Bilder.

Gut:

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

Schlecht:

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

Verwenden Sie eine Bild-Sitemap

Sie können die URL von Bildern, die wir sonst vielleicht nicht entdeckt hätten, bereitstellen, indem Sie
eine Bild-Sitemap einreichen.

Im Gegensatz zu regulären Sitemaps können Sie URLs von anderen Domains in die
<image:loc> Elemente der Bild-Sitemaps aufnehmen. Dies ermöglicht Ihnen die Nutzung von CDNs (Content Delivery Networks) zum Hosten von Bildern. Wenn Sie ein CDN verwenden, empfehlen wir Ihnen, die
Inhaberschaft
des CDN-Domainnamens in der Search Console zu verifizieren, damit wir Sie über eventuelle Crawl-Fehler informieren können, die wir finden.

Responsive Bilder

Das Design responsiver Webseiten führt zu einer besseren Nutzererfahrung, da Menschen über eine Vielzahl von Gerätetypen darauf zugreifen können. Lesen Sie unseren
Leitfaden für responsive Bilder
um mehr über die Best Practices für den Umgang mit Bildern auf Ihrer Website zu erfahren.

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

Das srcset Attribut ermöglicht die Angabe verschiedener Versionen desselben Bildes, speziell für unterschiedliche Bildschirmgrößen. Zum Beispiel:

Das <picture> Element ist ein Container, der verwendet wird, um verschiedene
<source> Versionen desselben Bildes zu gruppieren. Es bietet einen Fallback-Ansatz, damit der Browser das richtige Bild je nach Gerätefähigkeiten wie Pixeldichte und Bildschirmgröße auswählen kann. Das picture Element ist auch nützlich, um neue Bildformate mit integrierter Graceful Degradation für Clients zu verwenden, die die neuen Formate möglicherweise noch nicht unterstützen.

Gemäß
Abschnitt 4.8.1 des HTML-Standardsstellen Sie sicher, dass Sie ein img Element als Fallback mit einem src
Attribut bereitstellen, wenn Sie das picture Element im folgenden Format verwenden:

Verwenden Sie unterstützte Bildformate

Die Google Suche unterstützt Bilder, auf die im src Attribut von img verwiesen wird, in den folgenden Dateiformaten:

BMP, GIF, JPEG, PNG, WebP, SVG und AVIF. Es ist auch eine gute Idee, die Erweiterung Ihres Dateinamens mit dem Dateityp übereinstimmen zu lassen. Sie können Bilder auch als Data URIs inline einfügen. Data URIs bieten eine Möglichkeit, eine Datei, wie ein Bild, inline einzufügen, indem das src Attribut eines img

Elements als Base64-kodierte Zeichenfolge im folgenden Format festgelegt wird:
Während das Inline-Einfügen von Bildern HTTP-Anfragen reduzieren kann, beurteilen Sie sorgfältig, wann Sie sie verwenden, da dies die Größe der Seite erheblich erhöhen kann. Weitere Informationen dazu finden Sie im Abschnitt über die Vor- und Nachteile des Inline-Einfügens von Bildern auf unserer web.dev-Seite.

Auf Geschwindigkeit und Qualität optimieren

Hochwertige Fotos sprechen Nutzer mehr an als unscharfe, unklare Bilder. Außerdem sind scharfe Bilder in der Ergebnisvorschau für Nutzer attraktiver und können die Wahrscheinlichkeit erhöhen, Traffic von Nutzern zu erhalten. Allerdings tragen Bilder oft am meisten zur Gesamtseitengröße bei, was Seiten langsam und teuer beim Laden machen kann. Achten Sie darauf, die
neueste Bildoptimierung
und responsive Bildtechniken
anzuwenden, um eine qualitativ hochwertige und schnelle Nutzererfahrung zu bieten.

Analysieren Sie Ihre Seitengeschwindigkeit mit
PageSpeed Insights
und besuchen Sie unsere Seite
Warum ist Geschwindigkeit wichtig?
um mehr über Best Practices und Techniken zur Verbesserung der Website-Performance zu erfahren.

Optimieren Sie die Bild-Landingpages

Auch wenn es nicht sofort offensichtlich ist, können der Inhalt und die Metadaten der Seiten, auf denen ein Bild eingebettet ist, einen großen Einfluss darauf haben, wie und wo das Bild in den Google-Suchergebnissen erscheinen kann.

Geben Sie ein bevorzugtes Bild mit Metadaten an

Die Auswahl einer Bildvorschau durch Google ist vollständig automatisiert und berücksichtigt eine Reihe verschiedener Quellen, um auszuwählen, welches Bild auf einer bestimmten Seite bei Google angezeigt wird (zum Beispiel ein
Text-Ergebnisbild
oder das Vorschaubild in Discover).

Sie können beeinflussen, welches Bild ausgewählt wird, indem Sie Ihr bevorzugtes Bild über eine der folgenden Metadatenquellen bereitstellen:

• Geben Sie die schema.org primaryImageOfPage
  Eigenschaft mit einer URL oder einem ImageObject.

  an Oder geben Sie eine Bild URL oder ImageObject Eigenschaft an und fügen Sie sie der Hauptentität hinzu (unter Verwendung der schema.org
  mainEntity oder mainEntityOfPage
• Eigenschaften): Geben Sie das og:image Meta

Tag an.
Wenn Sie Ihr bevorzugtes Bild für die Verwendung im schema.org-Markup oder im og:image Meta

• Tag auswählen, befolgen Sie diese Best Practices:
• Wählen Sie ein Bild, das relevant ist und die Seite repräsentiert. Vermeiden Sie die Verwendung eines generischen Bildes (zum Beispiel Ihr Firmenlogo) oder eines Bildes mit Text im schema.org-Markup oder im og:image Meta
• Tag.
• Vermeiden Sie die Verwendung eines Bildes mit einem extremen Seitenverhältnis (wie Bilder, die zu schmal oder zu breit sind).

Verwenden Sie nach Möglichkeit eine hohe Auflösung.

Überprüfen Sie Ihren Seitentitel und Ihre Beschreibung

Die Google-Suche generiert automatisch einen Titellink und ein Snippet, um jedes Ergebnis und dessen Bezug zur Nutzeranfrage am besten zu erklären. Dies hilft Nutzern zu entscheiden, ob sie auf ein Ergebnis klicken sollen oder nicht. Hier sind zwei Beispiele, wie die Titellinks und das Snippet auf einer Google-Suchergebnisseite aussehen könnten:
Wir verwenden eine Reihe verschiedener Quellen für diese Informationen, einschließlich der Informationen im title und meta

Tags für jede Seite. Sie können uns helfen, die Qualität des Titellinks und des Snippets für Ihre Seiten zu verbessern, indem Sie die title
und snippet

Richtlinien von Google befolgen.

Strukturierte Daten hinzufügen
Wenn Sie strukturierte Daten einfügen, kann Google Ihre Bilder in bestimmtenRich Results
anzeigen, einschließlich eines prominenten Badges

in Google Bilder, das Nutzern relevante Informationen über Ihre Seite gibt und gezielteren Traffic auf Ihre Website lenken kann. Befolgen Sie die
allgemeinen Richtlinien für strukturierte Daten

sowie alle Richtlinien, die für Ihren Typ strukturierter Daten spezifisch sind; andernfalls könnten Ihre strukturierten Daten für die Anzeige von Rich Results in Google Bilder nicht in Frage kommen. Bei jedem dieser Typen strukturierter Daten ist das Bildattribut ein Pflichtfeld, um für ein Badge und ein Rich Result in Google Bilder in Frage zu kommen. Hier sind zwei Beispiele, wie Rich Results in Google Bilder aussehen könnten:

Verwenden Sie beschreibende Dateinamen, Titel und Alt-Texte

Google extrahiert Informationen über das Thema des Bildes aus dem Inhalt der Seite, einschließlich Bildunterschriften und Bildtiteln. Stellen Sie nach Möglichkeit sicher, dass Bilder in der Nähe von relevantem Text und auf Seiten platziert werden, die für das Thema des Bildes relevant sind.
Ebenso kann der Dateiname Google sehr leichte Hinweise auf das Thema des Bildes geben. Verwenden Sie nach Möglichkeit Dateinamen, die kurz, aber beschreibend sind. Zum Beispiel ist my-new-black-kitten.jpg besser alsIMG00023.JPG . Vermeiden Sie nach Möglichkeit generische Dateinamen wie, image1.jpg, pic.gif 1.jpg. Wenn Ihre Website Tausende von Bildern enthält, sollten Sie die Benennung der Bilder automatisieren. Wenn Sie Ihre Bilder lokalisieren, denken Sie daran, auch die Dateinamen zu übersetzen, wobei Sie bedenken sollten, dass
URL-Kodierungsrichtlinien wenn Sie nicht-lateinische oder Sonderzeichen verwenden.

Das wichtigste Attribut, um mehr Metadaten für ein Bild bereitzustellen, ist der Alt-Text (Text, der ein Bild beschreibt). Dies verbessert auch die Barrierefreiheit für Menschen, die Bilder auf Webseiten nicht sehen können, einschließlich Nutzern, die Screenreader verwenden oder Verbindungen mit geringer Bandbreite haben.

Google verwendet Alt-Text zusammen mit Computer-Vision-Algorithmen und dem Inhalt der Seite, um das Thema des Bildes zu verstehen. Außerdem ist Alt-Text bei Bildern nützlich als Ankertext, wenn Sie sich entscheiden, ein Bild als Link zu verwenden.

Konzentrieren Sie sich beim Schreiben von Alt-Text darauf, nützliche, informationsreiche Inhalte zu erstellen, die Keywords angemessen verwenden und im Kontext des Seiteninhalts stehen. Vermeiden Sie es, das alt
-Attribut mit Keywords zu füllen (auch bekannt als
Keyword-Stuffing), da dies zu einer negativen Nutzererfahrung führt und dazu führen kann, dass Ihre Website als Spam angesehen wird.

Schlecht (fehlender Alt-Text):

<img src=”puppy.jpg”/>

Schlecht (Keyword-Stuffing):

<img src=”puppy.jpg” alt=”Welpe Hund Baby Hund Welpe Welpen Welpen Hunde Welpen Wurf Welpen Hund Retriever Labrador Wolfshund Setter Pointer Welpe Jack Russell Terrier Welpen Hundefutter billiges Hundefutter Welpenfutter“/>

Besser:

<img src=”puppy.jpg” alt=”Welpe“/>

Am besten:

<img src=”puppy.jpg” alt=”Dalmatiner-Welpe spielt Stöckchen“/>

Berücksichtigen Sie auch die Barrierefreiheit Ihres Alt-Textes gemäß den
W3-Richtlinien. Für das <img> -Element können Sie das alt -Attribut des Elements hinzufügen, während Sie für Inline- <svg> -Elemente das
<title> -Element verwenden können. Zum Beispiel:

Wir empfehlen, Ihre Inhalte zu testen, indem Sie
auf Barrierefreiheit prüfen
und
einen Emulator für langsame Netzwerkverbindungen verwenden.

Wenn ein Bild auf mehreren Seiten innerhalb einer größeren Website referenziert wird, berücksichtigen Sie das
Crawl-Budget der Website. Referenzieren Sie das Bild insbesondere konsistent mit derselben URL, damit Google das Bild zwischenspeichern und wiederverwenden kann, ohne es mehrmals anfordern zu müssen.

Deaktivieren von Inline-Links in Google Bilder

Wenn Sie möchten, können Sie verhindern, dass das Bild in voller Größe auf der Suchergebnisseite von Google Bilder erscheint, indem Sie Inline-Links in den Google Bilder-Suchergebnissen deaktivieren.
So deaktivieren Sie Inline-Links:

1. Wenn Ihr Bild angefordert wird, prüfen Sie den
   HTTP-Referrer-Header
   in der Anfrage.
2. Wenn die Anfrage von einer Google-Domain stammt, antworten Sie mit einem 200 HTTP-Statuscode 204 oder einem

HTTP-Statuscode und keinem Inhalt.
Google wird Ihre Seite weiterhin crawlen und das Bild sehen, aber in den Suchergebnissen ein zum Zeitpunkt des Crawls generiertes Miniaturbild anzeigen. Dieser Opt-out ist jederzeit möglich und erfordert keine Neuverarbeitung der Bilder einer Website. Dieses Verhalten gilt nicht als Bild- Cloaking

und führt nicht zu manuellen Maßnahmen.
Alternativ können Sie

verhindern, dass das Bild vollständig in den Suchergebnissen erscheint.

Optimierung für SafeSearch
SafeSearch ist eine Einstellung in Google-Nutzerkonten, die festlegt, ob explizite Bilder, Videos und Websites in den Google-Suchergebnissen angezeigt, unscharf dargestellt oder blockiert werden sollen. Stellen Sie sicher, dass Google die Art Ihrer Website versteht, damit Google gegebenenfalls SafeSearch-Filter auf Ihre Website anwenden kann..