Google-sichere Methode für grafische Headlines?

13 Punkte

von sgtypo3 Rookie vor über 3 Jahren

Ich stehe immer wieder vor der Aufgabe grafische Headlines in Websites zu implementieren. Dafür lasse ich dann HTML-Markup erzeugen, das sowohl die Grafik, als auch den Klartext enthält (s.u.). Der Klartext wird dann per CSS versteckt. Eine Zeit lang saß ich dem Mythos auf, Google würde display:none in Überschriften abstrafen, text-indent:-9999px würde aber funktionieren. Inzwischen habe ich aus Erfahrung festgestellt, Google erkennt versteckte Überschriften, egal welche Methode ich eingesetzt habe, und ignoriert diese einfach. Zwar scheint keine explizite Abstrafung vorgenommen zu werden, aber das Ignorieren von Headlines reicht schon um Websites im SERP-Nirvana verschwinden zu lassen.

Gibt es derzeit ein Best-Practice wie grafische Headlines implementiert werden sollten, so dass sie von Screenreader und Suchmaschinen gleichermaßen beachtet werden?

Nachträglich bearbeitet am 28.06.10 10:35

Code

<h1 style="background-image:url('grafische_headline.gif')">Meine Headline</h1>

<h1><img src="grafische_headline.gif" title="Meine Headline"><span>Meine Headline</span></h1>

Kommentare

Melde dich an, um einen Kommentar zu schreiben.

2 Punkte

von alks Geek vor über 3 Jahren

Ich kann mir gut vorstellen, dass das nutzen von text-indent als Cloaking angesehen werden könnte. Schließlich werden Inhalte vor dem User/Bot “versteckt”. Könnte mir vorstellen, dass es der Grund dafür ist, dass die Überschriften ignoriert werden.

Nachträglich bearbeitet am 28.06.10 10:35

Kommentare

sgtypo3: Sehe ich auch so. Schade, dass der Google-Crawler anscheinend intelligent genug ist, CSS so weit parsen um zu prüfen ob ein Element sichgtbar ist, aber nicht erkennen kann, dass es sich hier nicht um eine böswillige Technik handelt.

vor über 3 Jahren
no5251: text-indent wird häufig bei Animationen eingesetzt. Daher dürfte das IMHO keine bis ganz wenig Strafpunkte geben.

vor über 3 Jahren

Melde dich an, um einen Kommentar zu schreiben.

TEAM

2 Punkte

von macx Alpha Geek vor über 3 Jahren

Grundsätzlich würde ich dir davon abraten, Überschriften unbedingt in einer Typo setzen zu wollen, die nicht überall installiert ist. Ich habe in den letzten Jahren den Kunden erklärt, dass das das Internet ist und die Priorität auf die Zugänglichkeit der Information liegt (Barrierefreiheit) und nicht auf das visuelle Erscheinungsbild. Nicht jede Webseite muss überall gleich aussehen – das ist das Medium.

Jede „alte“ Methode bringt Risiken mit sich, gerade aus Sicht der Barrierefreiheit. Und auch Inline-CSS, wie in deinem Beispiel oben, würde ich vermeiden. Setzte statt dessen die @font-face-Methode ein, um Schriften einzubetten, die es nicht auf dem Clientrechner gibt. Sofern der Browser das unterstützt, sieht es gut aus, falls nicht, kommt eben die Standardschriftart. Wen störts?

Randnotiz: display: none versteckt den Inhalt auch vor Screenreadern, text-indent nicht.

Nachträglich bearbeitet am 04.03.10 06:17

Kommentare

sgtypo3: Nicht-Standard-Fonts werde ich der Grafikabteilung und den Entscheidern nicht ausreden können, so gern ich es tun würde.

Soweit ich das gelesen hab, hängt das wohl vor allem von den Lizenzen der zu verwendenden Fonts ab, ob @font-face eine Alternative darstellt.

Zum Thema Browserkompatibilität: In meiner Firma wird zwar gemeinhin auf IE6-Pixelgeschubse verzichtet, doch zumindest im aktuellen IE sollten unsere Websites Ihre volle Funktionalität und Optik entfalten. Es sollte doch möglich sein in einem globalen CSS einen Font als .ttf zu hinterlegen und in einem per serverseitiger Browserweiche eingebundenem IE-CSS-Script eine .eot-Datei zu referenzieren, so dass man alle aktuellen Browser abdeckt oder?

Ich werde das Thema @font-face mal intern anregen und danke dir für den Hinweis.

vor über 3 Jahren
macx: Die Grafikabteilung und auch die Entscheider müssen sich mit dem Medium auseinandersetzen und verstehen, dass zur besseren Erreichbarkeit der Informationen auf einer Seite immer Kompromisse eingegangen werden müssen, die visuell beispielsweise in einer veränderten Schriftart oder -Größe sichtbar werden.
Hier kann man auch als Chef sich nicht über die „Physik des Internets“ hinwegsetzen. Ist ist es bisher gelungen, dies verständlich zu machen, denn schlussendlich bin auch ich es, der die Seite umsetzt und dafür gerade stehen muss, dass die Zielgruppe uneingeschränkt auf die Informationen zugreifen kann.

vor über 3 Jahren

Melde dich an, um einen Kommentar zu schreiben.

0 Punkte

von tacker Geek vor über 3 Jahren

Ich benutze die gleiche Methode, da sie am hübschesten und unkompliziertesten funktioniert.

Allerdings steht bei mir im Quelltext der ganz normal Hx-Tag mit der CSS-Klasse “textimage”. Mittels JavaScript ersetzte ich dann den Text in den Tags durch ein Bild … So sieht Google den ganz normalen Hx-Tag mit Plaintext nutzer mit JavaScript kommen aber in den Genuss der hübschen Headline.

Nachträglich bearbeitet am 02.03.10 09:49

Kommentare

sgtypo3: Das klingt dann aber so als würden Screenreader ausgeschlossen werden. Sobald der Browser den Text durch ein Bild ersetzt, kann der Screenreader nichts mehr vorlesen.
Vielleicht ist es sinnvoll per jQuery dem Klartext ein text-indent: ~~9999px zu geben. Ich könnte mir vorstellen, dass das Suchmaschinen~~ und Screenreaderfreundlich ist.

vor über 3 Jahren
tacker: Den ALT-Text des Bildes befülle ich natürlich mit dem ursprünglichen Text

vor über 3 Jahren

Melde dich an, um einen Kommentar zu schreiben.

0 Punkte

von phil Heavy User vor über 3 Jahren

Wo ist die Quelle für die behauptung, dass Google Image Replacement Überschriften Abstraft? IMHO interessiert sich Google relativ wenig für das CSS einer Webseite.

Kommentare

sgtypo3: Wie gesagt, basiert die Fragestellung auf meiner eigenen Erfahrung. Beispielsweise habe ich eine Website aufgesetzt, bei der der Überschriftklartext per text-indent: -9999px; unsichtbar gemacht wurde.

Wenn man nach auf der Website sehr prominenten Keywords gesucht hat, wurden nur Seiten angezeigt, bei denen das Keyword im Fließtext vorkam, nicht Seiten bei denen das Keyword nur in der Überschrift steht.
Außerdem war keine Meta-Description gesetzt, dann zeigt Google ja ein Snippet an, in dem das Keyword vorkommt. Das war nie die Überschrift sondern immer Fließtext. Insgesamt rankte die Site ungewöhnlich schlecht.
Diese Beobachtungen brachten mich zu meiner Behauptung und dieser Frage.

vor über 3 Jahren
phil: Interessant. Ich verwende auch immer text-indent, habe diese Erfahrung aber bisher noch nicht gemacht. Fände ich irgendwie ja seltsam, wenn grafische Überschriften abgestraft werden, hat ja nichts mit der Qualität des Kontent zu tun.

Werde das mal beobachten.

vor über 3 Jahren