16. Dezember 2019 // von Gmo TN34-Pflegeguide: Such­maschinen­freund­lich pflegen Teil 1 - Meta-In­forma­tionen und Bilder

Die Meta-Informationen und Bilder ihrer Seite suchmaschinenfreundlich in Contao einzupflegen, ist kein Hexenwerk. Hier erfahren Sie, worauf zu achten ist.

Meta-Informationen (Titel / Beschreibung)

Die Meta-Informationen jeder Seite sind notwendig, um ein wenig Kontrolle über die Darstellung der Google-Suche zu wahren. Für die Anzeige der Ergebnisse der Google Suche (SERPs) greift die Suchmaschine auf Meta-Titel und Beschreibung zurück.

Wichtig: Es besteht keine Garantie, die eingetragenen Titel und Beschreibungen in den SERPs angezeigt zu bekommen. Wenn alle Regeln eingehalten sind und die Meta-Infos zum Inhalt der Seite passen, sollte dem aber nichts im Wege stehen. Hier ein paar Hinweise für gute Titel und Beschreibungen:

Titel

Länge	50-60 Zeichen*
Aufbau	Wichtig ist, dass das Thema einer Seite von Suchmaschinen schnell erfasst werden kann. Daher sollten Keywords immer am Anfang eines Titels stehen, wiederkehrende Informationen wie der Firmenname am Ende. Beispiel: Titel sind wichtig für SEO | Meine Firma
Tipps & Tricks	In Contao kann eine Konstante für den Titel vergeben werden, so dass z. B. der Firmenname immer am Ende des Titels angehängt wird, und somit nicht immer wieder eingegeben werden muss.

* Google berechnet die zur Verfügung stehenden Zeichen auf Basis einer sogenannten "Pixel-Breite" — die 50-60 Zeichen sind also nur ein Richtwert.

Beschreibung

Länge	150-160 Zeichen*
Aufbau	Wie beim Titel sollten Keywords möglichst am Anfang der Beschreibung genannt werden. Wichtig ist, dass die Beschreibung vermittelt, was den Besucher auf der Seite erwartet.
Tipps & Tricks	Die Verwendung von Emojis/Unicode in den Beschreibungen hilft Ihnen, in den Suchergebnissen herauszustechen und führt laut aktueller Studien zu mehr Klicks.

* Google berechnet die zur Verfügung stehenden Zeichen auf Basis einer so genannten "Pixel-Breite" — die 150-160 Zeichen sind also nur ein Richtwert. Zudem gab es in der Vergangenheit Experimente seitens Google, die Länge der Beschreibung zu vergrößern oder zu verkleinern

Einzigartige Bilder

Google erkennt, ob die Bilder einer Webseite einzigartig sind (selbst produziert) oder ob es sich um Stock-Fotos handelt. In der Bildersuche werden einzigartige Bilder bevorzugt. In einem zunehmend visuellen Internet ist der Einsatz eigener Bilder immer wichtiger. Dabei sollte aber unbedingt darauf geachtet werden, dass die Bilder qualitativ hochwertig produziert sind.
Bilder, die auf einer Seite (redaktionell) eingesetzt werden, sollten sich innerhalb der Webseite so wenig wie möglich wiederholen.

Dateinamen

Zusätzlich zu den üblichen Regeln für Dateinamen im Web (siehe Semantik), sollte bei Dateinamen von Bildern hinsichtlich SEO noch auf ein paar weitere Punkte geachtet werden:

• Keine Bildnummer oder ähnliches
• Kein Kundenname außer es passt (z.B. mein-marke-logo.svg)
• Möglichst das Bild beschreibend
• Kein Anhang wie „_web“ oder ähnliches

Dateigrößen

Ladezeiten sind ein immer wichtigeres Kriterium im SEO. Deshalb sollten die Dateigrößen aller Inhalte möglichst geringgehalten werden. Bilder sollten im besten Fall eine Dateigröße von 100 KB nicht übersteigen. Dies ist allerdings bei detailreichen Keyvisuals nicht immer ohne Weiteres möglich, diese können auch in optimierter Form noch in Bereichen über 500 KB liegen, es sei denn, die Bilder werden zum Download bereitgestellt.

Bilder für das Web wurden lange Zeit direkt in Photoshop optimiert und von dort „für das Web“ gespeichert. Dieses Vorgehen ist inzwischen überholt. Bilder werden nun in ihrer Originalgröße (jedoch nie mit mehr als 72 DPI) gespeichert und dann über externe Kompressoren optimiert. Diese Kompressoren schaffen automatisiert deutlich bessere Optimierungsraten als Photoshop, während kein Unterschied in der Bildqualität erkennbar ist.

Hier kleine Auswahl kostenloser Bildkompressoren:

Kompressor	Art	Plattform	Formate	Webseite
TinyPNG	Web	-	jpeg, png	tinypng.com
Kraken	Web	-	jpeg, png	kraken.io
Compressor	Web	-	jpeg, png, gif, svg	compressor.io
Image Shrinker	Desktop	Mac	jpeg, png, svg	image-shrinker.com
RIOT	Desktop	Windows	jpeg, png, gif	luci.criosweb.ro
JPEG Mini	Desktop	Mac, Windows	jpeg	jpegmini.com

 

Auch wenn Bilder nicht immer so weit verkleinert werden können, wie wir das gerne hätten, sollten alle Bilder komprimiert werden, bevor sie auf der Seite eingesetzt werden.

Dateiformate

Die Dateiformate für Bilder im Web sollten je nach Einsatz gewählt werden. Hier ein kurzer Überblick über die gängigen Dateiformate und ihre Verwendung.

JPEG

Das wohl bekannteste Format ist JPEG (oder auch JPG). Dieses Format sollte immer dann eingesetzt werden, wenn es sich um Fotografien ohne Text im Bild handelt.

+ eher kleine Dateigrößen
+ hohe Kompressionsraten möglich

- Schriften wirken unscharf in diesem Format

GIF

Das GIF wurde ursprünglich in erster Linie für textlastige Grafiken verwendet. Texte wirken auf diesen Grafiken deutlich schärfer als auf JPEGs. GIFs lassen sich auch animieren und sind daher in Social Media sehr beliebt.

+ Animationen möglich

- eher hohe Dateigrößen
- animiert sehr hohe Dateigrößen

PNG

PNG-Bilder erlauben eine Transparenz im Bild. Genau das ist auch der einzige Grund, dieses Dateiformat einzusetzen.

+ erlaubt Transparenz

- höhere Dateigrößen als JPEG
- weniger gute Kompressionsraten als JPEG

SVG

SVG-Grafiken sind die neuen GIFs. Diese Art von Grafik öffnet neue Möglichkeiten. SVGs sind Vektorgrafiken, die entweder als Bild oder als Code in die Seite eingebunden werden. Da diese Grafiken nicht pixelbasiert sind, werden Flächen und Schrift auch nach einer Skalierung scharf angezeigt. Werden SVGs als Code eingebunden, können sie animiert, per CSS manipuliert oder bestimmte Bereiche individuell verlinkt werden.

+ perfekte Darstellung von Flächen und Schrift
+ Animationen möglich
+ manipulierbar (Farbänderungen, Hover-Effekte, etc.)
+ Animationen ändern nichts an der Dateigröße

- SVGs, die als Code eingebunden werden, können in seltenen Fällen zu Störungen von Javascript führen

Alt-Attribut

Das Alt-Attribut wird dazu genutzt, das Bild zu beschreiben. Screenreader, die von Blinden und Sehbehinderten genutzt werden, lesen dem Benutzer beim Scannen einer Seite diese Texte vor. In den Google-Richtlinien für Bilder wird empfohlen, das Alt-Attribut immer auszufüllen. Wichtig hierbei ist, dass es mit einem kurzen Text befüllt wird, der das Bild bzw. dessen Zweck möglichst genau beschreibt.

Beispiele:

• Ein Bild, das als Button eingesetzt wird, sollte den Zweck des Buttons im Alt-Attribut ersichtlich werden: „Link, um mehr über Service X erfahren“
• Ein Bild, das einen Mitarbeiter zeigt, sollte dies auch im Alt-Attribut zeigen: „Herr Mustermann, Geschäftsführer der Firma X“

Zudem sollte darauf geachtet werden, dass mindestens bei einem Bild auf jeder Seite ein relevantes Keyword in einem Alt-Attribut enthalten ist.

Title-Attribut

Das Title-Attribut wird als Tooltip auf dem Bild angezeigt. Hier können hilfreiche Zusatzinformationen eingeblendet werden.

Beispiel:

• Ein Bild, das als Button eingesetzt wird, könnte als Title einen zusätzlichen Call-to-Action enthalten: „Klicken Sie jetzt, um mehr über Service X zu erfahren“

Während das Alt-Attribut unbedingt ausgefüllt werden sollte, ist das Title-Attribut weniger wichtig. Es kann für Benutzer durchaus nützlich sein, aber fehlende Title-Attribute haben keine negative Auswirkung bei Suchmaschinen.