Ein weiterer Artikel für die Artikelserie Bilder Suchmaschinenoptimierung soll diesmal die Optimierung am Bild selbst sein. Ich zeige hier, wie das optimal optimierte Bild aussehen sollte und warum verschiedene Elemente sehr wichtig sind.
Inhaltsverzeichnis:
- HTML Grundkenntnisse – optimales HTML Image
- HTML Attribute zum Image-Element erläutert
- HTML HEAD – Title und Description
- Inhalte um einem Bild
1. HTML Grundkenntnisse – optimales HTML Image
So sieht ein normal eingefügtes Bild im HTML Quelltext aus. Die vereinfachste Form:
<img src="bild.jpg" />
SEO-technisch ist es nicht optimiert für Suchmaschinen und beste Relevanz. Als nächstes die SEO-technische Bestform:
<img src="bild.jpg" alt="Blauer Himmel mit Schäfchenwolken" title="Blauer Himmel mit Schäfchenwolken" />
Optimalstes Bild (oftmals nicht so einfach lösbar und aufwendig) mit den richtigen Größenangaben, was den Seitenaufbau geringfügig beschleunigt, da der Browser die Bildgröße nicht selbst erst ermitteln muss:
<img src="bild.jpg" alt="Blauer Himmel mit Schäfchenwolken" title="Blauer Himmel mit Schäfchenwolken" width="800" height="600" />
2. HTML Attribute zum Image-Element erläutert
Das Image-Element ist inhaltsleer und sollte daher in diesem Syntax notiert werden:
<img … />
Hier unsere verwendeten Attribute mit Erläuterung
- src
Das source-Attrtibut gibt dem Pfad zum Bild an. Dieser kann relativ zur URL sein oder selbst eine URL enthalten. Bsp: bild.jpg oder http://domain.tld/images/bild.jpg - alt
Alternativer Text, welcher Angezeigt wird, wenn das Bild geladen wird oder nicht verfügbar ist. Dieser ist wichtig für die Suchmaschinenoptimierung von Bildern und sollte die schlagkräftigsten Stichwörter zum Bild beinhalten. - title
Wird als Tooltip benutzt und angezeigt, sobald der Nutzer mit seiner Mouse über das Bild fährt. Auch hier könnte man gleich dem alt-Attribut wichtige Umschreibung verschlagworten. - width
Die Bildbreite in Pixeln ohne Angabe der Einheit. Damit wird automatisch px für Pixel vom Browser gewählt. - height
Bestimmt die Bildhöhe. Wie das width-Attribut.
Bei width und height wären auch Prozentangaben erlaubt. Bsp: width="100%". Man kann die width oder auch height weglassen, um z.B. bei Prozentangaben eines Wertes das Seitenverhältnis des Bildes vom Browser selbst ermitteln zu lassen. Damit sind Verziehungen nicht mehr so stark.
3. HTML HEAD – Title und Description
Im HTML title und der description notieren wir die wichtigsten Beschreibungen für die aufgerufene Seite. Da das zu optimierende Bild zur Seite passen sollte, wären hier ähnliche oder auch gleiche Schlagworte/Keywords wichtig.
Notation für die HTML Head: title und description:
<html>
<head>
<title>ÜBERSCHRIFT</title>
<meta name="description" content="BESCHREIBUNG">
</head>
<body>
…
</body>
</html>
Für mehr Informationen des HTML Kopfes (head) gibt es ein paar schöne Beschreibungen auf selfHTML.
4. Inhalte um einem Bild
Inhalte waren schon immer sehr wichtig. Wenn man von Inhalt spricht, also Content, meint mein zumeist den Text auf einer Webseite. Für Suchmaschinen ist nur das lesbar und bewertbar. Auch wenn man reine Bilder-Seiten betreibt, kommt man um den Text nicht drum rum.
Das Bild, welches optimiert werden soll, sollte im Textfluss oder unmittelbar bei dem Text angezeigt werden. So erhält des Bild noch Textbezug und mehr Keywords umfließen das Bild.
Bilder-SEO: Image im Textfluss - Optimierung
Schaue dir etwas genauer meine Artikel mit Bild an. Darin sind die Bilder optimal im Textfluss und besitzen schlagkräftige Keywords zur Umschreibung.
In diesem Absatz habe ich ebenfalls ein Bild eingefügt. Dunkelgrau sollen die beiden Bilder sein. Eins im Textfluss, ein anderes als eigener Absatz im Text. Beides sind gute Möglichkeiten einer Optimierung.
Marcus alias Speedy86 ist Administrator dieser Webseite und veröffentlicht unter andem News und interessante Artikel rund um WordPress, Suchmaschinenoptimierung, Programmierung und Webdesign. Im Webmaster-Glossar.de gibt es viel wissenswerten Stoff für Webmaster, Webworker bzw. Selbständige im Internet.Artikel:
Bereits 439 Artikel verfasst!