Suchmaschinenfreundliche, grafische Überschriften
Mai 31, 2008 von Seolicious
Da ich mich nun endlich mal ein wenig mehr mit Cascading Style Sheets und barrierefreiem Webdesign beschäftigt habe, möchte ich euch nun einen kleinen “Trick” zeigen, wie ihr Grafiken als Überschriften verwenden könnt, aber trotzdem noch suchmaschinenfreundlich arbeitet.
Wenn man sich heute mal verschiedene suchmaschinenfreundlich aufgebaute Seiten näher anschaut, dann sieht man, dass die jeweiligen Keywords sehr geschickt in den H1, H2 … Hx – Überschriften verwendet werden. Die Überschriften werden natürlich als Text dargestellt, damit diese von Suchmaschinen auch gecrawlt werden können.
Oft hat sich allerdings herausgestellt, dass hübsch gestaltete, grafische Überschriften eine viel bessere Conversion erzielen, als normale Textüberschriften. Nun stellt sich für den Webmaster die Frage, ob für ihn eine bessere Onpage-Optimierung oder eine gut konvertierende Seite wichtiger ist. Für mich ist beides wichtig und von daher könnt ihr mit Hilfe eines kleinen Tricks und ein bisschen CSS-Wissen die Überschrift für den Browser als Bild , für Suchmaschinen aber als lesbaren Text darstellen.
HTML-Code:
<h1 id="versteckt"><span>Hier steht eure suchmaschinenfreundliche H1-Überschrift</span></h1>
CSS-Code:
h1#versteckt {
background-image: url(urldergrafik);
background-repeat: no-repeat;
width: 700px; // Breite der Grafik
height: 200px; // Höhe der Grafik
}
h1#versteckt span {
visibility: hidden; // Span wird ausgeblendet
}
Ich denke, dass sich der CSS-Code von selbst erklärt. Viel Spaß beim Ausprobieren!
Abonniere meinen RSS-Feed
Dir hat der Beitrag "Suchmaschinenfreundliche, grafische Überschriften" gefallen? Um auch demnächst über neue Artikel auf SEOlicious.de benachrichtigt zu werden, abonniere doch bitte meinen RSS-Feed. Ich freue mich über jeden Leser - Dankeschön!
Hallo, ich will dir ja nicht reinreden, aber ich würde den span mit text-indent: -999em; oder ähnlichem aus dem Viewport entfernen. Denn gerade wenn du barrierearme Gestaltung ansprichst solltest du auch Screenreader beachten und so weit ich weiß haben die noch Probleme mit visibility: hidden oder display: none was auch oft verwendet wird.
Hallo Johannes,
klar kannst du mir reinreden bzw. mich korrigieren – Dafür ist die Kommentarfunktion schließlich gedacht.
Ich habe diese CSS-Anwendung in einem CSS-Video gesehen und da es in allen von mir genutzten Browsern klappte, habe ich auch diesen Beitrag hier erstellt.
Von Screenreader habe ich leider noch überhaupt nichts gehört, so dass du diesbezüglich sicherlich Recht hast.
Gruß!
Das nennt man glaub Cloacking was du da ansprichst = nicht gut.
Warum ist das nicht gut ? Versteh ich nicht
Im Prinzip gibst du den Suchmaschinen anderen Content, als der User letztendlich sieht – Das habe ich leider nicht berücksichtigt, aber wenn man es, wie bei allen Sachen, nicht übertreibt, sollte nichts schlimmes passieren.
Manchmal sind SEOs zu sehr auf SEO konzentriert. Das was DU beschreibst ist gängige Praxis bei Webdevelopern und CSS Designern. Aber in der Praxis viel zu umständlich.
Meistesn arbeitest Du mit CMS und dort magst Du nciht für jede Überschrift ein Hintergrundbild erstellen sondern nutzt die Grafikengine um diese zu erstellen. Dein Alt-Text ist mindestens genauso erfolgreich. Oder eben gleich auf sIFR umsteigen. Google liebt das.
Also ich halte diese Variante nicht für zukunftsfähig, da Google das irgendwann verhindern wird. (Wie Keywords mit Farbe des Hintergrunds)
sIFR halte ich auch für die beste Lösung.
Barrierefrei. Google liest es. Es können kaum Darstellungsprobleme auftreten.
Und so weiter und sofort…