Grafisches Layout für Suchmaschinen optimieren

Seite 12

1 Rudy

Hallo,

nicht zum ersten Mal begegnen mir Layouts, die voll auf grafische Elemente setzen und damit beispielsweise Text-Links überflüssig machen. Beispielsweise als Menü eine vertikale Tabelle *urgs* mit jeder Zelle befüllt mit einem jpg, das den Text und ein Bild enthält - oder der Seitentitel ist ein kleiner grafischer Banner, welcher die Seitenüberschrift enthält.

Da bin ich nun immer in einem Dilemma. Mein CSS-Verstand sagt mir "ersetze die Menü-Tabelle mit <ul>/<li>, setze die Links als Text in die li's, um das Layout vom Inhalt zu trennen.

Beispiel:

<ul>
   <li><a href="http://domain.it/" title="Domainname"><span>Domainname</span></a></li>
  <li><a href="http://domain.it/news.html" title="News"><span>News</span></a></li>
  <li><a href="http://domain.it/sitemap.html" title="Sitemap"><span>Sitemap</span></a></li>
</ul>

So, das kann ich jetzt super mit CSS gestalten, aber - hoppla - ich brauche da ja ein display:none für das Span! Google stuft das dann als verbotenen hidden content ein - obwohl das barrierefrei wäre - richtig? Super, was tun? Packe ich die imgs anstatt der spans ein, habe ich keinen hidden-content mehr und gebe damit die Trennung Inhalt/Layout sowie Barrierefreiheit auf, weil ohne css immer noch diese Layoutbilder im Menü rumfliegen, anstatt dass alles schön nur Text wäre?

<ul>
   <li><a href="http://domain.it/" title="Domainname"><img src="domain.jpg" alt="Domain" /></a></li>
  <li><a href="http://domain.it/news.html" title="News"><img src="news.jpg" alt="News" /></a></li>
  <li><a href="http://domain.it/sitemap.html" title="Sitemap"><img src="sitemap.jpg" alt="Sitemap" /></a></li>
</ul>

Oder die Titel:

<tr>
  <td><img src="titel_1.jpg"></td>
</tr>

würde ich ersetzen:

<h1><span>Titel</span></h1>

das span ausblenden, titel_1.jpg dem <h1> als background setzen.
Darf ich aber ja nicht... was soll ich da nur tun? Ist es in Googles Sinn, die Trennung von Inhalt und Layout durch solche fiesen CSS-Analyzer zu erschweren? Irgendwo habe ich mal gelesen, man könnte das CSS per robots.txt ausschließen und der Filter würde dann nicht wirken. Was soll der Filter dann aber überhaupt bringen - ich meine, die Spammer sind ja nicht von gestern, bestraft werden aber die ehrlichen Coder?

Danke für Tips,
Rudy

2 Jörg Kruse

Ich glaube nicht, dass ein simpler voll-automatisierter Filter Seiten ausschließt, die Seitenelemente mit display:none u.ä. behandeln, dies würde in der Tat zuviele unschuldige Seiten treffen. Möglicherweise spielen noch weitere Kriterien eine Rolle, möglicherweise trifft ein automatisierter Filter eine Vorauswahl für eine manuelle Inspektion.

Meine Hand ins Feuer legen dafür, dass Google keine False Positives kickt, würde ich allerdings auch nicht, man kennt die Mechanismen ja nicht, die da ineinandergreifen, ich bin da auch eher vorsichtig.

Für die alternative Darstellung von Bildern ist ja das alt Attribut zuständig. Dies wird auch von Google gewertet, wenn wohl auch nicht ganz so stark wie die eigentlichen Texte. Du kannst auch eine Überschrift so gestalten:

<h1><img src="titel_1.jpg" alt="Titel"></h1>

Besser hinsichtlich SEO wäre eine Kombination von Hintergrundbild + Text. In so einem Fall kannst du allerdings nur den Hintergrund frei gestalten, bei der Gestaltung der Schrift bist du schon etwas eingeschränkter

Die Lösung, die du propagiert hast, ist vielleicht etwas unorthodox, in dem Sinne, dass Hintergrundbilder eigentlich nicht dazu gedacht sind, Inhalte wiederzugeben?

3 Rudy

Was ich so in MC's Blog lese, ist hidden text erst einmal "evil" und ein "don't do it". Wird man gefiltert, bekommt man eine 30-Tage Frist für eine Reinclusion-Anfrage, nicht immer wird der Webmaster angemailt. Die Google Webmaster-Tools enthalten ja bekannterweise auch die Index-Statistik, wo man sieht, ob man gekickt wurde.

Besser hinsichtlich SEO wäre eine Kombination von Hintergrundbild + Text.

Sorry, das ist ausgeschlossen. Ich kann das Layout nicht verändern, wenn ich eine Seite optimiere. Ich bin nicht als Designer beschäftigt, sondern als Coder.

Die Lösung, die du propagiert hast, ist vielleicht etwas unorthodox, in dem Sinne, dass Hintergrundbilder eigentlich nicht dazu gedacht sind, Inhalte wiederzugeben?

Das halte ich für falsch. Der Gedankengang ist folgender: Ein Menü mit grafischen Elementen ist eine Mischung aus Inhalt und Layout. Der Inhalt sind die Links, der Text in den Grafiken gehört zum Inhalt, die Grafik selbst ist Layout. Was liegt da näher als den Text aus der Grafik in den Quellcode zu setzen und die Grafik in die Layoutdefinition sprich CSS zu packen? Ich fühle mich durch die Bot-Analyse nun während der Entwicklung in einer ständigen Gratwanderung zwischen "wende ich Spam-Methoden an?" und "trenne ich Inhalt und Layout nicht richtig?", das nervt.

Du würdest also die <img> zu Seitenelementen machen? Ich vertraue in SEO-Dingen immer Deinem Rat ;)

Nachtrag: Wenn ich das mache, kann ich per CSS nicht mehr das Layout verändern, sondern muss die Grafiken per Hand austauschen, muss also wieder an den Seitencode. Nicht so ganz in meinem Sinne...

4 Jörg Kruse

Was ich so in MC's Blog lese, ist hidden text erst einmal "evil" und ein "don't do it".

Hidden text ist aber wohl nicht gleichzusetzen mit der bloßen Verwendung von display:none; - sonst würden z.B. eine Menge Seiten mit Aufklappmenüs die Flatter machen. Hidden text ist denke ich eher ein "Tatbestand", der durch unterschiedlichen Techniken erreicht werden kann (die selbe Vorder- und Hintergrundfarbe, display:none, top:-1000px etc.).

Der Inhalt sind die Links, der Text in den Grafiken gehört zum Inhalt, die Grafik selbst ist Layout. Was liegt da näher als den Text aus der Grafik in den Quellcode zu setzen und die Grafik in die Layoutdefinition sprich CSS zu packen?

Naja, wenn man SEO berücksichtigt, liegt dies näher. Ansonsten wäre aus meiner Sicht die orthodoxe Lösung, den Text in das alt Attribut zu packen. ("Orthodox" auch in dem Sinne, dass dies wahrscheinlich weniger Aufmerksamkeit erregen könnte)

Du würdest also die <img> zu Seitenelementen machen?

Eigentlich sind die <img> nur der Inhalt der wichtigen Seitenelemente (<a>, <h1> etc.). Hinsichtlich SEO ist die Lösung natürlich nicht optimal, da alt Attribute nicht so stark gewichtet werden wie Texte.

Wenn du die von dir beschriebene Lösung benötigst, um Bilder über CSS auszutauschen, kannst du das CSS ja vom Spidern ausschließen, um das Risiko einer fälschlichen Identifizierung der Seite als Spam zu mindern. Und falls dann mal manuell kontrolliert werden sollte, ist dann ja ersichtlich, dass nichts versteckt wird

5 Rudy

sonst würden z.B. eine Menge Seiten mit Aufklappmenüs die Flatter machen.

Richtig, genau das ist die große Diskussion - im Grunde enthalten die hidden Layers von Aufklappmenüs dann Text und Links - wie will der Filter erkennen, dass dies ein Aufklappmenü ist und nicht bloß versteckte Links und Text? Sofort aus dem Index verbannt werden die Seiten klarerweise nicht.

Hidden text ist denke ich eher ein "Tatbestand", der durch unterschiedlichen Techniken erreicht werden kann [..]

Jep, laut MC wird sogar unterschieden zwischen fast sichtbaren und unsichtbarem Text, das ist schon krass.

Ich will auch nicht eine "orthodoxe" Lösung wählen, nur weil sie weniger Aufmerksamkeit erregt - ich spamme nicht - ich möchte einfach eine gut optimierte Seite haben, deren Inhalt unabhängig vom Layout ist, die aber zugleich nicht in jede Spam-Falle tappt. Es wäre einfach schade, auf den Text des Menüs und der Überschriften und auf die CSS-Dynamik verzichten zu müssen - wenn es aber die einzige Lösung ist ... so what :/

Wenn du die von dir beschriebene Lösung benötigst, um Bilder über CSS auszutauschen, kannst du das CSS ja vom Spidern ausschließen [...]

Ja, Teile sind Rollover-Menüs, deren Bilder muss ich austauschen, und zwar ohne Javascript. Also ist die Disallow-Methode zuverlässig? Nicht dass die Analyse aller Seitenteile erfolgt, und der Ausschluss nur bestimmt, dass CSS nicht in den Index aufgenommen wird?

6 Jörg Kruse

wie will der Filter erkennen, dass dies ein Aufklappmenü ist und nicht bloß versteckte Links und Text?

Verständlicherweise verrät Google nicht, wie sie genau dabei vorgeht, um den Spammern nicht Hinweise zu liefern, wie sie die Filtern umgehen können. So tappen wir alle ein wenig im Dunkeln ;)

Also ist die Disallow-Methode zuverlässig?

Müsste man vielleicht nochmal testen (meine Bottraps habe ich schon so abgesichert, dass Googlebot nicht reinfällt). Nach eigenen Aussagen hält Google sich an die Standards der robots.txt und diese besagen, dass die in der robots.txt verbotenen Dateien nicht gecrawlt, also abgerufen werden dürfen

Eine manuelle Kontrolle ist dann gleichwohl gestattet, ein Browser braucht sich nicht an die robots.txt halten. Eine manuelle Kontrolle würde allerdings auch ergeben, dass die Seite keinen Text versteckt

7 Rudy

Verständlicherweise verrät Google nicht, wie sie genau dabei vorgeht

Wie schade ;)

die in der robots.txt verbotenen Dateien nicht gecrawlt, also abgerufen werden dürfen

Gut, dann werde ich mal die css ausschließen. Wäre doch gelacht :) Schlimmstenfalls rutsche ich dann eben irgendwo rein, dann werde ich das Alt-System verwenden.

Abermals danke!

8 Gustafsson

Moin,

ich kann das nicht so recht glauben das ein display:none

#heading_3{
	color: #FF9900;
	background-image: url(heading_3.gif);
	display:none;
	height: 60px;
	width: 320px;
}

bei

<div id="heading_3">
<h3><span>Ueberschrift 3</span></h3>
<p class="p1">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat...</p>

einen schon in den Filter schiesst, bzw. zum Ausschluss führt. Gut, wie Jörg schon sagte, die Hand ins Feuer würde ich nicht legen, schon gar nicht bei Kundenpräsenzen. Hier bleibt wohl zur absoluten Gewissheit nur die Frage beim Google-Gott selbst. Vielleicht fragt ja mal jemand, der recht flüssig ist im englischen, bei denen an ?? ;-)

Auf der anderen Seite glaube ich sehr wohl, das das Google Sprachrohr fürs gemeine Fußvolk, wenn überhaupt nicht immer die Wahrheit sagt und bewusst auch ein bischen übertreibt, mit dem was Google alles kann, erkennt und in der Lage ist zu machen.

Es sollte doch für Google schon rein aus der Struktur und Aufbau der Website klar erkennbar sein das, wenn wie in Deinem wie in meinem Fall, ein display:none ein Mittel zum "stylistischem und saubern Code- Zweck" und nicht als Spam gedacht ist?

9 Jörg Kruse

Ein in diesem Zusammenhang vielleicht interessantes Zitat von Matt Cutts vom Oktober 2005:

Zitat von Matt Cutts

If you're straight-out using CSS to hide text, don't be surprised if that is called spam. I'm not saying that mouseovers or DHTML text or have-a-logo-but-also-have-text is spam; I answered that last one at a conference when I said "imagine how it would look to a visitor, a competitor, or someone checking out a spam report. If you show your company's name and it's Expo Markers instead of an Expo Markers logo, you should be fine. If the text you decide to show is 'Expo Markers cheap online discount buy online Expo Markers sale ...' then I would be more cautious, because that can look bad."

Quelle

Und noch eins:

We can flag text that appears to be hidden using CSS at Google. To date we have not algorithmically removed sites for doing that. We try hard to avoid throwing babies out with bathwater.

Quelle

10 Gustafsson

mein englisch ist so schlecht... :-(

Seite 12

nach oben weiter >

Thema	Autor	Forum	Beiträge	Letzter Beitrag
Was kostet Webdesign?	Jörg Kruse	Sonstiges	6	16.09.2010 11:34
Hintergrundbild verlinken	Christian	HTML und CSS	6	22.01.2009 03:53

Grafisches Layout für Suchmaschinen optimieren

Verwandte Themen