Suchmaschinenfreundliche Grafikheadlines
Im Sinne der Suchmaschinenoptimierung stelle ich hier eine Möglichkeit vor wie man Grafikheadlines suchmaschinenfreundlich einbinden kann.
Wenn Headlines wegen einer besonderen Schriftart oder Formatierung als Grafik eingebunden werden sollen, geht die eigentliche Textinformation für die Suchmaschine verloren. Eine Möglichkeit ist natürlich das Alt-Tag. Meiner Meinung nach ist die folgende Variante allerdings für Suchmaschinen besser geeignet.
Im HTML wird die entsprechende Überschrift wie eine “ganz normale” Textüberschrift eingebunden:
<html>
<head>...</head>
<body class="beispiel">
<h1>Beispielüberschrift</h1>
</body>
</html>
Die Suchmaschine sieht also nur eine “ganz normale” Headline mit Text. Damit die Überschrift jetzt im Browser mit der gewünschten Grafik dargestellt wird, werden im CSS folgende Anweisungen festgelegt:
.beispiel h1 {
height:0px;
padding-top:30px;
background:url(../images/headline.gif) top left no-repeat;
overflow:hidden;
}
Bei diesem Beispiel ist die Grafikheadline 30 Pixel hoch. Der Headline-Text im HTML wird durch die Anweisungen im CSS versteckt und die Hintergrundgrafik wird angezeigt.
Um diese Methode auf mehreren Seiten einer Homepage anwenden zu können gibt man dem Body-Tag jeder Seite am besten jeweils eine entsprechende Body-Class. In diesem Beispiel wurde die Body-Class “Beispiel” verwendet.
Das ist doch mal ne schöne Alternative. Werd ich bei meinem nächsten Projekt mal ausprobieren.