Christopher Wiegel » Body-Class http://www.christopherwiegel.de Internetdienstleistungen aus Hamburg Wed, 11 May 2011 12:24:14 +0000 http://wordpress.org/?v=2.8 en hourly 1 Suchmaschinenfreundliche Grafikheadlines http://www.christopherwiegel.de/suchmaschinenoptimierung/suchmaschinenfreundliche-grafikheadlines.html http://www.christopherwiegel.de/suchmaschinenoptimierung/suchmaschinenfreundliche-grafikheadlines.html#comments Mon, 30 Mar 2009 09:32:00 +0000 Christopher http://www.blog.christopherwiegel.de/?p=15 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.

]]> http://www.christopherwiegel.de/suchmaschinenoptimierung/suchmaschinenfreundliche-grafikheadlines.html/feed 1