Image SEO: Alles, was du über Bildoptimierung wissen musst
Bilder sind bereits ein so selbstverständlicher Teil unserer Internetsuchen geworden, dass wir uns kaum noch vorstellen können, wie wir ohne sie auskommen sollen. Rich Snippets und andere SERP Features enthalten Bilder, und irgendwo in den Ergebnissen kann ein Image Pack angezeigt werden. Die visuelle Suche direkt bei Google, mit Google Images oder über Google Lens nimmt zu und zwingt Unternehmen dazu, mehr über Bild-SEO und visuelle Inhalte im Allgemeinen nachzudenken.
Lassen wir Zahlen sprechen: Google Bilder hatte 2018 einen Anteil von 22,6 % an allen Websuchen und die visuelle Suche über Google Lens erreichte 2019 die Milliardengrenze. Zu dieser Zeit verkündeten Google-Vertreter, dass Bilder “ein größeres Thema” werden und mehrere von Search Engine Land zitierte Datenquellen bestätigten den Trend, dass mehr Bilder in den SERPs auftauchen.
Hier siehst du, wie das Image Pack oben auf der Ergebnisseite aussieht:
Oder zwischen den Top-Ergebnissen:
Visuelle Inhalte spielen nicht nur eine wichtige Rolle dabei, wie Nutzer eine Website wahrnehmen und sich mit ihr auseinandersetzen, sondern ermöglichen es auch, dass Websites in der Suche besser gefunden werden. Wenn du also mehr Traffic generieren und Besucher auf deine Website locken willst, solltest du unbedingt Bilder SEO-optimieren. Wenn du es ins Image Pack schaffst, erhältst du mehr Klicks von Nutzern sowohl auf die Bilder selbst als auch auf die enthaltenden Seiten. In diesem Artikel betrachten wir die besten Praktiken der Bild-SEO, von den Grundlagen bis hin zu fortgeschrittenen technischen Aspekten.
Fünf Säulen der Bild-SEO
Unabhängig davon, welches Format du wählst, solltest du deine Bilder so optimieren, dass Suchmaschinen sie richtig verstehen können. Die Faktoren, die das Ranking einer Website beeinflussen, sind:
- Qualität und Auflösung. Suchmaschinen bevorzugen hochwertige, hochauflösende Bilder. Es wird empfohlen, dass sie mindestens 1200 Pixel breit sind und eine Höhe von 800 px haben (die genaue Größe hängt jedoch von deinen konkreten Zielen ab). Du kannst die Option anbieten, das Bild in einem neuen Tab oder einem eingebetteten Fenster in einer höheren Auflösung zu öffnen: Hast du Originalfotos, Illustrationen oder Infografiken erstellt, gib den Lesern die Möglichkeit, sie in besserer Qualität zu betrachten.
- Zugänglichkeit. Nutzer mit Sehbehinderungen wissen ohne einen beschreibenden Alt-Text nicht, was auf dem Bild zu sehen ist. Alt ist das, was angezeigt wird, wenn das Bild nicht geladen werden kann – also verfasse einen informativen Text. Wenn du Bilder zugänglich machst, erleichtert das auch die Sprachsuche und hilft mobilen Nutzern, die das Laden von Bildern deaktiviert haben. Du solltest auch vermeiden, Text in Bilder einzubetten, da nicht alle Nutzer auf Text in Bildern zugreifen können und Seitenübersetzungen diesen nicht berücksichtigen.
- Kontext. Die wichtigste Frage, die du dir stellen solltest, bevor du ein Bild auf einer Website einfügst, ist, wie gut es in den Kontext der Seite passt. Es macht keinen Sinn, deinen Inhalt mit Bildern aufzupolstern, nur weil er mit einigen Bildern besser aussieht. Schreibst du beispielsweise einen Beitrag über das Zubereiten von Kaffee ohne Kaffeemaschine und fügst schöne Bilder von Kaffeetassen oder Kaffeebohnen ein, bringen sie deinem Inhalt keinen großen Mehrwert. Illustrierst du aber jede Methode der Kaffeezubereitung mit einem eigenen Bild (z. B. mit dem Foto eines DIY-Maischesacks), ist das für deine Leser deutlich hilfreicher.
- Einzigartigkeit. Speziell für deine Website erstellte Fotos, Illustrationen und Infografiken sind immer besser als Stockfotos. Google lehnt unoriginelle Inhalte ab, wie es in den Content-Richtlinien heißt.
- Geschwindigkeitsoptimierung und responsive Bilder. Eine schnell ladende Website ist wichtig, vor allem, weil Bilder den Großteil der Bytes auf einer Seite ausmachen. Außerdem sollten Bilder an jeden Bildschirm angepasst werden können, da du nie weißt, mit welchem Gerät die Nutzer auf deine Inhalte zugreifen. Wenn deine Seite schnell lädt und HTML-Frameworks verwendet, die für die AMP-Technologie optimiert sind, sehen mobile Nutzer das AMP-Logo in den Suchergebnissen:
Best Practices, damit Google deine Bilder crawlen und indexieren kann
Da wir nun wissen, welche Aspekte bzgl. des Bildmaterials für das Suchranking wichtig sind, kommen wir zu den Grundregeln, die du befolgen solltest, um deine Bilder SEO-freundlich zu halten.
In Googles offiziellen Richtlinien heißt es, dass ein gutes Nutzererlebnis die wichtigste Praxis bzgl. Bildern ist. Wenn deine Bilder also zusätzliche Informationen für die Nutzer bieten und in der Nähe von relevantem Text platziert sind, bist du auf dem richtigen Weg. Weitere Empfehlungen von Google sind:
- Erstelle eine verständliche URL-Struktur für Bilder. Genau wie bei einer Website-URL-Struktur sollten deine Bild-URLs die Inhaltshierarchie widerspiegeln und das Wesentliche des Bildes angeben. Beachte: Solltest du dich entscheiden, die Bild-URLs irgendwann zu ändern, braucht es zusätzliche Zeit, bis die Suchmaschinen sie neu verarbeiten und indexieren.
- Hinzufügen von strukturierten Daten. Wir werden später noch genauer darauf eingehen – aber kurz gesagt beziehen sich strukturierte Daten auf identifizierbare Inhaltstypen wie ein Produkt oder ein Rezept.
So sieht ein Produktindikator in der Google-Bildersuche aus:
- Befolge die SafeSearch-Richtlinien. Die Google-Bildersuche verfügt über einen SafeSearch-Filter, mit dem Nutzer explizite Inhalte blockieren können. Sei vorsichtig mit Bildern, die Anzeichen für jugendgefährdende oder gewalttätige Inhalte haben könnten: Sollten Googles Algorithmen dein Bild als anstößig erkennen, wird deine Seite für Nutzer mit aktiviertem SafeSearch-Filter aus den Suchergebnissen ausgeblendet. Das Tool Vision AI kann dir Aufschluss darüber geben, wie Google Bilder erkennt. Wenn du Bilder hast, die nur für Erwachsene geeignet sind, gruppiere sie separat in der URL-Struktur und füge Metadaten wie <meta name=”rating” content=”adult” /> zu deinen Seiten hinzu.
- Verwende beschreibende Alt-Texte, Titel, Bildunterschriften und Dateinamen. Zufälliger oder nicht informativer Text im Alt-Attribut, im Bildtitel, in der Bildunterschrift und im Dateinamen kann deiner Bild-SEO schaden, da Nutzer und Suchmaschinen keine wichtigen Hinweise auf den Inhalt erhalten. Wir erläutern diese Punkte bei der technischen Bilder-Optimierung genauer.
- Eine Bilder-Sitemap erstellen. Du kannst Informationen über Bilder in eine Website-Sitemap aufnehmen oder eine separate .xml-Datei erstellen. Das hilft Google, durch deine Inhalte zu navigieren. Es gibt viele Dienste und Plug-ins, die Sitemaps erstellen und dir bei der Erstellung einer Bilder-Sitemap helfen können. Du kannst auch mehr über Bilder-Sitemaps bei Google Search Central erfahren.
Verschiedene Bildformate und ihre Auswirkungen auf die SEO
Das erste, was du über Bildmaterial wissen musst, ist, dass es ein hohes Gewicht haben und dadurch die Ladegeschwindigkeit und Leistung deiner Website beeinträchtigen kann. Im Durchschnitt machen Bilder 21 % des Seitengewichts aus. Die Ladezeit einer Seite ist eine der Säulen der technischen SEO, die wiederum die Grundlage für alle anderen SEO-Maßnahmen bildet. Entsprechend solltest du die Bildgrößen-Optimierung nicht unterschätzen.
Bildformate, die du verwenden kannst
Bildformate unterscheiden sich in ihrer Qualität und ihren Größenbeschränkungen. Werfen wir einen Blick auf die wichtigsten:
- JPEG ist das gängigste Bildformat, das einen Ausgleich zwischen Qualität und Größe ermöglicht. Es handelt sich um eine komprimierte Bilddatei, die mit einem Qualitätsverlust einhergeht.
- PNG bietet eine bessere Qualität, hat aber eine größere Dateigröße. Außerdem kannst du damit die Transparenz des Hintergrunds erhalten. Im Allgemeinen wird empfohlen, JPEG für Fotos und PNG für quasi alles andere zu verwenden, einschließlich Infografiken und verschiedenen Designelementen.
- BMP ist ein weiteres Format, das qualitativ hochwertige Grafiken ermöglicht und von Google indiziert wird. Du kannst BMP-Dateien nicht komprimieren, es sei denn, du konvertierst sie in JPEG oder PNG.
- WebP ist ein relativ neues Format, das eine vielversprechende Komprimierung ermöglicht. Eine beeindruckende Größenreduzierung kann die Geschwindigkeit deiner Website verbessern: Als YouTube 2014 auf die Verwendung von WebP für Vorschaubilder umstieg, stieg die Ladegeschwindigkeit der Seite um das Zehnfache. Das Problem ist, dass derzeit noch nicht jeder Browser WebP unterstützt. Es gibt Plug-ins wie EWWW Image Optimizer, die WebP-Bilder in den Browsern anzeigen, die sie unterstützen und andere Formate in Browsern, die sie nicht unterstützen.
- SVG wird für Logos und Icons verwendet. Das sind die kleinsten visuellen Elemente auf einer Website. Es ist ein einfaches und universelles Format, hat aber einige designspezifische Nachteile, wie z. B. mögliche Probleme mit Schriftarten. Es wird davon abgeraten, Inline-SVG (dessen Code direkt in HTML eingefügt wird) zu verwenden, um eine bessere Indexierung in Google Images zu erreichen.
- GIF ist eine ansprechende Art von Inhalt, die Besucher und Likes anziehen kann. Google crawlt GIFs genauso wie alle anderen Bildtypen, aber der offensichtliche Nachteil ist, dass GIFs eine Website verlangsamen können.
Die Macht der Kompression
Wenn du dich für ein Format entschieden und alle Bilder konvertiert hast, ist es an der Zeit, ein leistungsstarkes Komprimierungstool zu finden, um die Ladegeschwindigkeit deiner Seite zu optimieren.
Es gibt eine Reihe von Komprimierungstools (von Photoshop bis hin zu Online-Diensten wie Imagify), die du verwenden kannst, um die gewünschte Bildgröße zu erreichen. Du kannst auch ein Plug-in wählen, das diese Aufgabe für dich übernimmt. Achte aber darauf, dass die Komprimierung extern und nicht auf den Servern deiner Website stattfindet.
Wie bei vielen anderen Tools auch, kannst du bei der Online-Bildkomprimierung Optimizilla die Qualität anpassen und eine Vorschau des komprimierten Bildes sehen:
Wie du hochwertige und einzigartige Bilder erhältst
Suchmaschinen schätzen originelle Inhalte: Es ist einfacher, mit einzigartigen Bildern an die Spitze zu kommen. Natürlich begrüßen auch die Suchenden Websites mit originellen Bildern, die zum Kontext passen. Es ist jedoch nicht immer möglich, eigene Bilder zu erstellen. Schauen wir uns also an, wie man mit Stockplattformen umgeht und Bilder bearbeitet, damit sie einzigartig aussehen.
Sind Stockfotos schlecht für SEO?
Eine Frage auf Twitter beantwortete John Mueller mit der Aussage, dass die Verwendung von Stockfotos dem Website-Ranking in der regulären Google-Suche nicht schade, aber Präsenz-Probleme in Google Images verursachen könne.
Wenn du ein knappes Budget hast und deine Seiten ohne die Hilfe von Illustratoren online gehen müssen, dann sind Stockplattformen eine große Hilfe. Überlege bei der Auswahl der Bilder, wie relevant sie für deine Inhalte sind und wie sie in einem Featured Snippet aussehen würden. Erkunde Unsplash, Shutterstock, Depositphotos oder andere Galerien und vergleiche, wie viele lizenzierte Bilder du in welcher Auflösung herunterladen kannst.
Entscheide dich jedoch wann immer möglich für maßgeschneidertes Bildmaterial. Es spricht die Nutzer besser an und bringt mehr Umsatz für dein Unternehmen. Viele Stockfoto-Klischees sind so lächerlich geworden, dass die Leute nicht aufhören können, sich darüber zu beschweren.
Bildgestalter und Bildbearbeitungstools
Es gibt viele Tools wie Visme und Canva, die von SEO-Profis genutzt und empfohlen werden und mit denen sich verschiedene Vorlagen und Designelemente kombinieren lassen. Wenn du ein einfaches Diagramm oder eine Infografik brauchst, kannst du sie nutzen, um visuelle Elemente für deine Website zu erstellen.
Du kannst mit diesen Tools auch ein nicht einzigartiges Bild verändern. Hier sind einige andere Dinge, die du tun kannst, um Stockbilder einzigartig aussehen zu lassen:
- Drehe es. Das horizontale Drehen ist eine der einfachsten Techniken, um ein Bild zu verändern. In den meisten Fällen wird Google jedoch erkennen, dass es sich um ein leicht verändertes Bild handelt, das auch anderswo verwendet wird.
- Beschneide es. Du kannst die Bildkomposition leicht ändern, indem du einen Bereich auswählst und ihn zuschneidest.
- Passe Helligkeit und Kontrast an. Du kannst entweder automatische Verbesserungswerkzeuge verwenden, die automatisch erkennen, was geändert werden muss – oder professionelle Software wie Photoshop, um Helligkeit und Kontrast manuell anzupassen.
- Füge Filter und Effekte hinzu. Im Internet gibt es viele kostenlose sowie kostenpflichtige Filter, mit denen du deinen Bildern einen künstlerischen, Retro- oder einen anderen Look verleihen kannst.
- Entferne Objekte. Wenn du einige der abgebildeten Objekte nicht benötigst, kannst du sie mit Bearbeitungswerkzeugen entfernen.
Schutz vor Bilddiebstahl
Wenn du mit selbst erstellten visuellen Inhalten arbeitest, möchtest du wahrscheinlich nicht, dass andere sie kopieren und ohne deine Erlaubnis auf ihren Websites verwenden. Um Bilddiebstahl zu verhindern, solltest du urheberrechtsbezogene Metadaten verwenden. Der IPTC-Fotostandard ist ein allgemein anerkannter Standard zur Beschreibung von Fotos und insbesondere ihrer Urheberrechtsinformationen.
Google hat 2018 verschiedene Felder für den Bildnachweis eingeführt und diese 2020 erweitert. Jetzt kannst du mit dem IPTC-Fotostandard Urheber- und Lizenzinformationen angeben. Dies sind die Felder, die du einbeziehen kannst:
- Ersteller. Der Name des Fotografen oder der Organisation, wenn der Fotograf nicht identifiziert werden kann.
- Quellenangabe. Hier kann der Name des Fotografen sowie das Unternehmen oder die Organisation, die das Bild zur Verfügung gestellt hat, angegeben werden.
- Urheberrechtsvermerk. Wird für die Geltendmachung von geistigem Eigentum verwendet.
- Erklärung der Rechte (Web). Eine gültige URL der Seite mit den Lizenzinformationen.
- Lizenzgeber-URL. Enthält einen Link zu einer Seite, auf der Nutzer das angezeigte Foto kaufen können.
Google sammelt diese Informationen und zeigt sie in den Suchergebnissen an. So sehen die Copyright-Metadaten in der Google-Bildersuche aus:
Bilder können in der Suche nach Nutzungsrechten gefiltert werden: Es gibt Creative Commons-Lizenzen und kommerzielle Lizenzen. Wichtig ist, dass deine Inhalte in die richtige Kategorie eingeordnet werden.
Die Verwendung von Metadaten ist der beste Weg, deine Inhalte vor Diebstahl zu schützen. Die Imatag-Umfrage aus dem Jahr 2018 ergab, dass das Ausfüllen von Metadatenfeldern zum Urheberrecht die wichtigste Methode für Fotografen ist, um ihre Werke zu schützen. Doch obwohl 90 % der Befragten angaben, Metadaten zu verwenden, erklärten 48 %, dass sie trotzdem von Diebstahl betroffen waren.
Leider gibt es keine wirklich wasserdichten Methoden, um originelle visuelle Inhalte vor dem Herunterladen, der Manipulation und der Verwendung durch Dritte zu schützen. Metadaten können gelöscht werden, Bilder können gedreht werden, um Suchergebnisse zu manipulieren, und selbst Wasserzeichen können herausgeschnitten werden. Apropos Wasserzeichen: 2017 schlug Google die Verwendung einer zufälligen Wrapping-Technik vor, um unbefugte Nutzung effektiver zu verhindern. Wasserzeichen sehen jedoch auf Bildern nicht gut aus: Sie mögen für Stockplattformen funktionieren – aber für Nutzer, die gerade einen Artikel erkunden, wirken sie wohl eher störend. Wasserzeichen können sich auch negativ darauf auswirken, wie Nutzer ein Bild in den Suchergebnissen wahrnehmen, so dass es weniger oft angeklickt wird. Obwohl die Methoden zum Schutz des Urheberrechts keinen direkten Einfluss auf das Bildranking haben, sind sie wichtig für das Nutzererlebnis, das ein wichtiger Rankingfaktor ist.
Technische Bildoptimierung
Wir haben bereits über die Bedeutung von Bildattributen und strukturierten Daten für die Bild-SEO gesprochen. Werfen wir einen genaueren Blick auf die technischen Aspekte.
Asynchrones Laden von Bildern
Eine Technik namens Lazy Loading sorgt dafür, dass Bilder asynchron geladen werden: Das bedeutet, dass ein Nutzer die gesamten Inhalte einer Seite erst dann sieht, wenn er zu den Stellen runterscrollt, an denen diese sich befinden. Du hast es wahrscheinlich schon oft gesehen, wenn Bild-Platzhalter durch tatsächliche Bilder ersetzt werden, die synchron mit dem Herunterscrollen der Seite geladen werden.
Wenn keine Platzhalter verwendet werden, kann Lazy Loading das Layout der Seite verändern und die Nutzer verwirren. Entscheidest du dich für das Lazy Loading von Bildern, solltest du Platzhalter verwenden, die denselben Teil des Bildschirms belegen wie das eigentliche Bild.
Der Einsatz von Lazy Loading ist nur sinnvoll, wenn du viele Bilder auf einer Seite hast. Um diese Technik anzuwenden, kannst du Plug-ins wie Native Image Lazy Loading verwenden oder sie manuell in den Code einbauen. Du musst die Lazyload-Klasse zum img-Tag hinzufügen und den Platzhalter sowie das Originalbild in den Attributen src und data-src angeben:
<img class="lazyload"
src="platzhalter.jpg"
data-src="bild.jpg"
alt=”bildbeschreibung">
JavaScript verarbeitet diese Anweisungen und ist für die Lazyload-Funktionalität verantwortlich. Da sie möglicherweise nicht von allen Browsern unterstützt wird, solltest du den <noscript>-Tag hinzufügen, damit Bilder angezeigt werden, wenn JavaScript nicht verfügbar ist.
Eine weitere Möglichkeit, Inhalte asynchron zu laden, ist die Dekodierung: Ein Bild wird konvertiert, im Cache des Browsers gespeichert und dem Nutzer beim Scrollen durch die Seite angezeigt. Mit dem Decoding-Attribut verteilst du das Laden und teilst dem Browser mit, was wann geladen werden soll. Es gibt drei Optionen:
- <img decoding=”async” src=”image.png”> suggeriert dem Browser, dass der Dekodierungsprozess aufgeschoben werden kann
- <img decoding=”sync” src=”image.png”> sagt das Gegenteil
- <img decoding=”auto” src=”image.png”> lässt den Browser selbst entscheiden, wann ein Bild dekodiert werden soll
Mehrere Seitenverhältnisse verwenden, um verschiedene Geräte zu berücksichtigen
Früher reichte es aus, eine einzige Version eines Bildes anzugeben. Jetzt empfiehlt Google, mehrere Seitenverhältnisse anzugeben, damit die Bilder auf verschiedenen Bildschirmen korrekt angezeigt werden. Das srcset-Attribut wird für die Angabe verschiedener Auflösungen sowie für Bild-Thumbnails verwendet. Google indiziert das im src-Attribut angegebene Hauptbild, während srcset den Browsern die Möglichkeit gibt, die richtige Größe des Bildes zu laden.
<img src="bild.jpg"
srcset="klein.jpg 500w,
mittel.jpg 640w,
groß.jpg 1024w"
alt="bildbeschreibung">
Die meisten gängigen CMSe haben sich so entwickelt, dass sie Bilder automatisch responsiv machen. WordPress war 2015 Vorreiter dieser Option: Ab der Version 4.4. müssen Nutzer ihre Bilder nur noch hochladen, und die Attribute srcset und sizes werden von WordPress ausgefüllt. Es gilt nur noch, darauf zu achtne, ob die Bilder ein korrektes sizes-Attribut haben – das lässt sich in der Datei functions.php überprüfen. Shopify hat 2018 automatische responsive Bilder eingeführt; Magento bietet mehrere Themes mit dieser Option an. Einige andere CMSe, die Bilder nicht automatisch an verschiedene Größen anpassen, bieten ein spezielles Tool zum Einstellen der genauen Parameter: Drupal 8 und spätere Versionen verfügen beispielsweise über das Modul Responsive Image. Mehr über die verschiedenen Plattformen erfährst du in unserem Artikel über die Auswahl des SEO-freundlichsten CMS.
Beschreibe dein Bild in alt, title, caption und filename
- Alt-Text. Ein beschreibender Alt-Text hilft dir, deine Rankings zu verbessern, indem er deine Bilder mit relevanten Suchanfragen in Verbindung bringt. Außerdem ist er eine Voraussetzung für Barrierefreiheit: Der Alt-Text ist die einzige Möglichkeit für Menschen, die ein Bild nicht sehen können, zu verstehen, worum es geht. Wenn ein Bild kein Alt-Attribut hat, halten Suchmaschinen es für unwichtig und ranken es deshalb nicht gut. Wenn ein Bild ein Alt-Attribut, aber keinen Text hat, wird es im Kontext des Textes wahrgenommen, neben dem es steht.
So funktioniert das Hinzufügen von Alt-Text in WordPress:
- Titel. Der Titeltext wird angezeigt, wenn ein Nutzer mit dem Mauszeiger über ein Bild fährt. Er ist für die Suchmaschinenoptimierung nicht so wichtig wie das alt-Attribut, aber Google empfiehlt, ihn trotzdem einzufügen. Im Gegensatz zum Alt-Text kannst du einen Titel schreiben, der den Kontext und nicht ein einzelnes Bild beschreibt. Halte ihn jedoch kurz und fülle ihn nicht mit Keywords.
Wie du am untenstehenden Beispiel sehen kannst, dient der Titeltext oft als Tooltip, der wenig hilfreich ist und nicht viel mehr Informationen als das Bild enthält:
- Bildunterschrift. Das ist ein zusätzlicher Satz, den du unter ein Bild setzen kannst, um einen Gedanken zum Bild selbst und zu seinem Kontext hervorzuheben. Manchmal ist es besser, keine Bildunterschrift zu verwenden, da sie nichts Wichtiges zum Bild beiträgt.
Hier ist ein Beispiel für eine natürlich platzierte Bildunterschrift:
- Bild-URL. Die Bild-URLs sollten der Struktur deiner Website folgen: beispielsweise von der Kategorie zur Unterkategorie zur Seite zum jeweiligen Bild.
- Dateiname. Suchmaschinen scannen auch die Namen von Bilddateien, also verpasse nicht die Gelegenheit, sie richtig zu benennen. Der Dateiname sollte beschreibend, aber nicht sehr lang sein, dein Zielkeyword enthalten und die Wörter durch einen Bindestrich trennen. Wenn das Foto zum Beispiel einen tropisch-grünen Smoothie zeigt, ist es am besten, die Datei “tropisch-grüner-Smoothie” zu nennen, anstatt den von der Kamera generierten Standardnamen wie IMG_7489 beizubehalten.
Dateiname, Alt und Titel, sowie Angaben zu Breite und Höhe werden in das src-Attribut aufgenommen, das das Bild markiert. Zum Beispiel:
<img src="tropischer-grüner-smoothie.png"
alt="grüner Smoothie mit tropischen Früchten"
title="Rezept für einen gesunden grünen Smoothie"
width="500" height="600">
Schema-Markup für verschiedene Arten von Inhalten
Bilder können helfen, einen bestimmten Inhaltstyp auf einer Seite zu identifizieren, z. B. ein Produkt, ein Rezept oder ein Video. Jeder dieser Inhalte hat ein Label, das in den Suchergebnissen auf Desktop- und Mobilgeräten angezeigt wird. In der mobilen Suche wird das Produktlabel als separate Option auf der Registerkarte Einstellungen angezeigt:
Diese Label werden mit Hilfe von strukturierten Daten, auch Schema-Markup genannt, erstellt. Es ist wichtig, dass du deine Bilder auf Seiten mit bestimmten Inhalten optimierst, damit Suchende in den SERPs genau das finden, was sie brauchen. Ein Markenlogo, das in Googles Knowledge Graph angezeigt werden könnte, kann ebenfalls mit Hilfe von Schema Markup angegeben werden.
Um Schema Markup hinzuzufügen, kannst du Plug-ins wie Schema App Structured Data verwenden, Google Structured Data Markup Helper konsultieren oder den Code manuell in deine Website einfügen. Achte darauf, JSON-LD statt Microdata zu wählen, da Google diese Skriptsprache bevorzugt.
Google Structured Data Markup Helper bietet beispielsweise einen 3-stufigen Prozess und liefert für jeden Schritt eine Anleitung. Du wählst die Art des Inhalts deiner Seite aus, wählst dann ein Bild und füllst die erforderlichen Felder aus. Das System generiert dann den Code, den du in den Quellcode deiner Website einfügen musst.
Das richtige Bild für Social Sharing mit Open Graph Tags einstellen
Mit dem Open-Graph-Protokoll kannst du steuern, welche Inhalte auf sozialen Medien angezeigt werden, wenn deine Seite geteilt wird. Stelle ein bestimmtes Bild ein, das die Plattformen laden sollen – sonst könnten sie etwas Unwichtiges nutzen oder gar nichts anzeigen.
Zwei Beispiele für das Teilen eines Artikels auf Twitter:
Bilder für Social Shares können von einem CMS automatisch gesetzt werden. Solltest du jedoch keines verwenden, musst du das og:image Tag für jede Webseite manuell zuweisen. Du kannst auch ein separates Bild für soziale Medien erstellen, das du auf der Seite selbst nicht verwendest.
Hier siehst du, wie das Hinzufügen eines Bildes für die Facebook- und Twitter-Vorschau in WordPress funktioniert:
Hinzufügen eines Pinterest-”Merken”-Buttons
Apropos soziale Netzwerke: Es ist gut, wenn du einen Pinterest-Button zu deinem Bildmaterial hinzufügst. Die Option, dein Bild auf Pinterest-Boards zu speichern, kann die Bekanntheit deines Unternehmens steigern. Satte 98 % der Pinterest-Nutzer geben an, dass sie neue Dinge ausprobieren, die sie dank des Dienstes gefunden haben – dasist deine Chance, dein Zielpublikum auf dich aufmerksam zu machen.
Pinterest bietet eine Anleitung, wie du den “Merken”-Button in deine Website einfügen kannst, aber mit vielen CMSen geht das noch einfacher – zum Beispiel mit Hilfe eines Plug-ins in WordPress oder mit der eingebauten Funktion in Squarespace.
Das Beispiel unten enthält einen Pinterest-Button sowie die Option für eine höhere Auflösung:
Bildprüfung in SE Ranking
Bilder werden in den Tools Website Audit und OnPage SEO Check von SE Ranking überprüft. Der Bereich Bildanalyse im Website Audit zeigt eine Liste von Bildern, denen der Alt-Text fehlt, und von Bildern, die zu groß sind. Vergewissere dich, dass du das Alt-Attribut für alle Bilder auf deiner Website ausfüllst und deren Größe reduzierst, um die Ladezeiten deiner Website zu verkürzen. In unserem Artikel zur richtigen Durchführung eines Website-Audits erfährst du mehr darüber, welche Aspekte du überprüfen solltest.
Der OnPage SEO Check prüft auch, ob der Alt-Text vorhanden ist. Außerdem analysiert das Tool, ob das Bildmaterial einzigartig ist, und gibt Empfehlungen zu den Dateinamen der Bilder.
Der Hauptzweck des Tools besteht darin, zu beurteilen, wie gut eine bestimmte Seite für ein bestimmtes Keyword optimiert ist. Entsprechend siehst du auch, ob deine Bilder dieses Keyword im Alt-Text enthalten.
Da Bilder ein Schlüsselelement der meisten SERP Features sind, kannst du mithilfe der Ranking-Tabelle überprüfen, welche Bilder auf deiner Website vorhanden sind:
Zusammenfassung
Wenn sie richtig optimiert sind, können Bilder die Sichtbarkeit deiner Website in den Suchergebnissen erheblich verbessern und für eine bessere Nutzerbindung sorgen. Die visuelle Suche ist auf dem Vormarsch – unterschätze daher den Wert von Bildern nicht und befolge alle wichtigen Google-Empfehlungen zu Auflösungen, Alt– und anderen Attributen sowie strukturierten Daten. Aber das Wichtigste ist: Baue nur Bilder in deine Seiten ein, wenn sie in den Kontext passen und entscheide dich für originelle Inhalte, die deinen Website-Besuchern einen Mehrwert bieten.
