Johannes Fritsch Online Marketing Beratung und Suchmaschinenoptimierung

Wie bindet man Logos korrekt ein?

In der Beratung zum Online-Marketing sehe ich häufig, dass Logos nicht korrekt eingebunden sind. Für Suchmaschinen ist die korrekte Einbindung aber sehr wichtig. In diesem Beitrag möchte ich erklären, wie man sein grafisches Logo semantisch richtig auf der eigenen Internetseite verwendet.

Logo falsch einbinden

Ein gutes Beispiel dafür, wie man sein grafisches Logo oder Signet falsch in die eigene Seite einbindet stellt der folgende Quelltext dar.

Für eine Suchmaschine gibt es keinerlei Hinweis zur Semantik des Dokumentes. Es sind einfach nur zwei geschachtelte DIVs mit unterschiedlichen Klassen. Die Erfahrung zeigt, dass die Bezeichnung der Klassen geringen bis keinen Einfluss auf die Indexierung von Google nimmt. Darüber hinaus gibt auch die URL oder das ALT-Attribut der Bilder wenig Aufschluss über die Bedeutung des DIV-Konstrukts. Außerdem wurden in den URLs der Bilder mit Unterstrichen als Trennzeichen von Worten gearbeitet. Der Bindestrich ist allerdings als Wortgrenze zu bevorzugen.

Logo richtig einbinden

Um ein Logo korrekt einzubinden muss man zunächst die Semantik des Dokuments von der Darstellung trennen. Auf Seiten der Semantik müsste der Quelltext in etwa so aussehen:

<h1>Mein Firmenname</h1>

Um dieses Tag nun korrekt zu stylen, benötigen wir ein wenig CSS. Der folgende Ausschnitt genügt bereits:

h1 {
      display: block;
      width: 200px;
      height: 200px;
      background-image: url(images/logo-mein-firmenname.png);
}

Wir adressieren mit dem Selektor "h1" alle H1-Tags im Dokument. Da jede Seite nur ein einzelnes H1-Element enthalten soll und dieses Element in der Regel die gesamte Seite repräsentiert, sollte hier der Firmen- oder Seitenname stehen.
Mit der Display-Eigenschaft ändern wir die Art, wie das Element im Dokument "fließt". Es handelt sich jetzt nicht mehr um ein Text-Element, das im Textfluss des Dokumentes mitfließt, sondern um ein Blockelement mit einer definierten Breite und Höhe (die natürlich der Logo-Höhe und -Breite entsprechen soll).
Dieses Blockelement können wir jetzt mit dem Logo als Hintergrund versehen.

Als Ergebnis erhalten wir im Browser nun das Logo in der gewählten Breite. Leider steht auch noch der Firmenname in h1-Schriftgröße darin. Für dieses Problem gibt es einige Lösungswege. Ich beschreibe den von mir bevorzugten.

Wir ändern unseren HTML-Code nochmals geringfügig. Innerhalb des H1-Tags schachteln wir ein SPAN-Tag. Dieses dient nur dazu, den Text innerhalb unseres Haupt-Logo-Elementes verschwinden zu lassen. Es hat keine semantische Bedeutung. Andere Elemente wie DIV würden ebenso funktionieren, stellen aber in meinen Augen einen größeren Eingriff in die Semantik dar. Der Code sieht jetzt folgendermaßen aus:

<h1><span>Mein Firmennamespan></span></h1>

Jetzt haben wir eine Möglichkeit, den textuellen Inhalt in CSS zu referenzieren. Der folgende CSS-Code blendet den Text innerhalb des Logo-H1 aus.

h1 > * {
      display: none;
}

Durch diesen Code wird jedes Element direkt unterhalb des H1 referenziert und mit der Display-Eigenschaft ausgeblendet. Bisher habe ich durch diese Verfahrensweise keine negativen Erfahrungen gemacht. Es ist auch eine sehr übliche, weit verbreitete Art, das gewünschte Ergebnis zu erreichen.