HTML: Bild korrekt einbauen

Einbau eines Bildes mit KleinversionEinbau eines Bildes mit KleinversionEinbau eines Bildes mit Kleinversion

Einbau eines Bildes mit Kleinversion

Wie wird ein Bild korrekt eingebaut? Dabei geht es nicht um irgendeinen SEO-Voodoo sondern um einfaches HTML und ein paar Faktoren, die eine Rolle spielen. Hier die Basic-Infos, die wichtig sind.

Grundregel: Wir nutzen das, was uns das HTML und CSS in seiner einfachsten Form dafür anbietet. Natürlich geht es manchmal mit Javascript schöner. Aber – und hier wird dann doch wieder die Suchmaschinenoptimierung wichtig – nicht immer versteht der Google-Robot, was wir damit meinen…

Bild einbau I: Kleinversion/Großversion

Das Bild mit den Fischen weiter oben habe ich als kleine Version neben dem Text eingebaut. Die Orgnialdatei ist 470 Pixel breit, die JPG-Kompression auf 90 % und der Code für den Einbau sieht so aus:

<a href=”http://www.domain.net/wordpress/wp-content/uploads/2012/07/bild-html-fische.jpg”><img class=”size-thumbnail wp-image-4693 title=”bild-html-fischesrc=”http://www.kubitz.net/wordpress/wp-content/uploads/2012/07/bild-html-fische-150×150.jpg” alt=”Korrekter HTML-Einbau eines Bildes mit Kleinversion” width=”150″ height=”150″ /></a>

Darin zu finden:

  • Link auf die Großversion (<a href=”…”>): Einfache Verlinkung auf die größere Version. Diese kann bei Anklicken des Links über CSS schön gestaltet werden.
  • Positionierung (class): Hier wird via CSS dem Browser mitgeteilt, dass das Bild rechts neben dem Text stehen sollte. Ohne CSS würde hier “align=”right” stehen.
  • Image-Title (title=): wird bei Mouseover angezeigt.
  • Bild-Quelle und Bilddateiname (src): Deutet an, was drauf zu sehen ist, ist aber häufig auch nur eine Nummer
  • ALT-Tag (alt): Wäre zu sehen, wenn das Bild nicht zu finden wäre (und ist wichtig für SEO)
  • Größenangaben (widht, height): Geben an, wie groß das Bild angezeigt werden soll und sollte der Größe des Bildes entsprechen.
  • Ende des Links auf die Großversion (</a>): Schließt das alles ab.

Bild in der ganzen Breite

Schön, dass dieses Bild kein Video ist - und wir nicht erfahren, wie es weiter geht ;-)

Schön, dass dieses Bild kein Video ist – und wir nicht erfahren, wie es weiter geht 😉

 

Zum Einbau dieses Bildes gibt es dies zu sagen:

  • Größe: Je größer Bilder sind, umso besser – auch für Google. Dieses hat die in dem Blog hier maximale Breite von 470 Pixel. Kleiner als 300 Pixel sollte man keine Bilder einbauen (es sei denn wie unter 1.)
  • ALT-Tag, Title: Auch hier sind diese ausgefüllt. Diesmal mit unterschiedlichen Texten. Aber das ist in der Regel egal. Falls man nach guten Rankings bei Google schielt, wäre es natürlich gut, wenn im ALT-Tag das Keyword der Seite steht. Denn die Komination zwischen Bild-Optimierung und Seitenoptimierung ist ideal.
  • Komprimierung: Dieses Bild ist als PNG eingebaut. Das Bild oben als JPG mit der Qualität von 90 %. Man achte auf möglichst kleine Dateien, das macht das Downloaden geschmeidig.
  • Positionierung: Ideal sind Bilder positioniert zwischen Headline und Text (egal, ob in ganzer Breite wie hier oder wie unter 1.). Aber das geht ja immer nur mit einem Bild…
  • Seitenverhältnis: Querfomrate und Hochformate im 4:3-Stil sind vermutlich ideal. Extreme Formate – egal ob hoch oder quer – machen es Google schwer, sie in den SERPs einzubauen.
  • Zusatzdaten: Selbstverständlich gehöhren Credits – wenn nötig – direkt zum Bild. Auch die EXIF-Dateien können gefüllt sein. Allerdings spielt beides vermutlich für SEO keine Rolle.
  • Bildunterschrift: Hier wird einerseits beschrieben, was auf dem Bild zu sehen ist – aber andererseits ist das auch der Platz für Zusatzinformation. Am besten folgt man der Wahrnehmung der User: Diese sehen vor allem das Bild und die Headline einer Seite – und lesen sehr frühzeitig die BU. Deshalb sollten diese drei Inhalte gut zusammen passen.

Übrigens: Es ist kein (KEIN!) Fehler, wenn man ein Bild mehrfach in verschiedene Artiken einbindet. Wenn es passt, wird es für die Optimierung des Bildes günstig sein.

Mehr lesen? Gerne:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.