Einbau von Bildern

Einbau von Bildern
Einbau von Bildern

Die erste Regel beim Einbau von Bildern in HTML-Seiten ist: So einfach wie möglich! Jedenfalls sollte es so einfach wie möglich aussehen. Und das alles, damit der Google-Crawler das Bild erfassen und so gut wie möglich “verstehen” kann.

“Einfach” heißt in diesem Fall, dass für den Einbau lediglich das IMG-Tag mit den notwendigen Attributen verwendet wird. Das sind “width” und “height” für die Bildgröße, “align” für die Positionierung und das ALT-Attribut. Mehr braucht es nicht. Wer möchte, kann noch das Title-Attribut mit Leben füllen. Dieser Text ist dann zu sehen, wenn die User mit dem Mauszeiger über das Bild gehen.

Und wie erscheint etwa ein Rahmen um das Bild herum? Dieser wird in HTML5 über das FIGURE-Element ins Layout gebracht, welches dann via CSS entsprechend gestaltet werden kann. Die Bildunterschrift wird mit Hilfe des FIGCAPTION-Elements realisiert, welches im Grunde zum umschließenden FIGURE-Element dazu gehört. Diese beiden Elemente sind mit HTML5 neu hinzugekommen.

Vor HTML5 waren in der Auszeichnungssprache keine Unterschriften für Bilder vorgesehen. Man musste sich mit einem Workarround behelfen. Eine Möglichkeit Bildunterschriften auch in HTML4 zu realisieren, sind sogenannte Defintionslisten (Beispiel-Quellcode siehe unten).

Auch eine Großversion des Bildes kann via Stylesheet und Javascript angezeigt werden. Dann wird die größere Bilddatei mit dem üblichen “a href”-Tag verlinkt - und der Browser erstellt die Darstellung entsprechend der grafischen Anweisungen (Beispiel Lightbox2).

Natürlich könnte ein Bild mit Großversion oder gar einer Bildergalerie als reine Javascript-Funktion in den Code eingebaut werden. Allerdings ist in diesem Fall unsicher, ob Google tatsächlich die Bild-Datei erkennt und der Seite zuordnen kann. Deshalb sollte - wie bei SEO fast immer - auf komplexe Codes verzichtet werden.

Korrekter Einbau von Bildern

Bilder, insbesondere Artikelbilder, sollten möglichst wie folgt eingebunden werden:

  • der Bereich in dem das Bild eingebaut wird, wird mit dem HTML5-Befehl (<figure>) ausgezeichnet
  • das eigentliche Bild wird mit dem HTML-Element (<img />) eingebunden
  • das IMG-Element erhält die Attribute für die Auszeichnung der Bilddimensionen (width="300" height="300")
  • das Bild wird möglichst zwischen der Hauptüberschrift (<h1>) und dem Teaser-Text (<p>) eingebaut
  • bei der Bildgröße sollte es sich um ein für die Bildersuche gängiges Format handeln
  • die Großversion des Bildes sollte mit einem Hyperlink (<a href="">) angelinkt werden, dazu kann JavaScript eingesetzt werden

Das Keyword der jeweiligen Seite sollte an folgenden Stellen verwendet werden:

  • im Dateinamen des Bildes (einbau-von-bildern.png)
  • im ALT-Attribut des Bildes (alt="Einbau von Bildern")
  • im TITLE-Attribut des Bildes (title="Einbau von Bildern")
  • in der Bildunterschrift (<figcaption>)
Quellcode

Der Quellcode zum Einbau von Bildern könnte beispielsweise wie folgt aussehen:

HTML5: Mit Hilfe des figure-Attributs:

<figure>
<img src="/images/einbau-von-bildern.png" width="300" height="300" alt="Einbau von Bildern" />
<figcaption>Einbau von Bildern</figcaption>
</figure>

HTML4: Mit Hilfe von Definitionslisten

<dl class="imgLeft">
<dt><img src="/images/dateiname-mit-keyword.png" alt="Keyword" title="Keyword" width="300" height="300" /></dt>
<dd>Bildunterschrift mit Keyword</dd>
</dl>Teaser-Text mit Vorspann...

Weiterführende Links zum seo-konformen Einbau von Bildern
Bildmaterial

Foto: istockphoto © vtorous