Google und display:none

[Kuno]

kann Google unterscheiden, ob ein Element per CSS sichtbar bzw. unsichtbar gemacht wurde?
Ich habe einige Elemente so gestaltet, dass man sie per Klick sichtbar machen kann. Es wäre schade, wenn Google diesen wertvollen Content übersieht.

[Kuno]

gefunden:

http://www.webdesign-in.de/mts/google-bestraft-display-none-visibility-hidden/

Das ist mal wieder ein typischen Beispiel dafür, dass ehrliche Menschen die qualitativ hochwertigen Content einstellen wollen für die missbräuchlichen Methoden von Suchmaschinen-Spammern bestraft werden.

Wenn das so weitergeht und Webseiten nur noch für Suchmaschinen entwickelt werden, wie es zu 80% der Fall ist (Backlinks wo man nur hinsieht), hab ich bald auch kein Bock mehr aufs Internet.

Schämt Euch!

[Cheatah]

Hi,

Das ist mal wieder ein typischen Beispiel dafür, dass ehrliche Menschen die qualitativ hochwertigen Content einstellen wollen für die missbräuchlichen Methoden von Suchmaschinen-Spammern bestraft werden.

Abusus non tollit usus. Aber: Wenn Deine Elemente bereits von sich aus ausgeblendet sind, dann vermittelst Du keinen Content. Er ist weg. Um ihn einzublenden, setzt Du auf eine zusätzliche, optionale Technik. Was also liegt näher, als exakt diese Technik einzusetzen, um die betreffenden Elemente initial auszublenden?

Wenn das so weitergeht und Webseiten nur noch für Suchmaschinen entwickelt werden,

Wieso "wenn"? Fast alle Besucher handelsüblicher Websites benutzen primär einen Suchmaschinen-Robot als Client.

Schämt Euch!

Wer? Die Leute, die Content verstecken, so dass er nur noch unter bestimmten Bedingungen erreichbar ist? Einverstanden :-)

Cheatah

[Kuno]

Damit sind Leute gemeint, die Google & Co absichtlich mit themenfremden Backlink,-Backdoor-Verstrickungen in die Irre führen um mehr Besucher oder einen höheren PageRank zu bekommen.
Teilweise werden Texte nur noch für Google geschrieben!
Ich mache meine unsichtbaren Felder via hover oder Klick sichtbar. Der darin enthaltene content ist wenig, aber wichtig und entält gute und THEMENRELEVANTE Keywords.

[Andy]

Hallo!

Abusus non tollit usus. Aber: Wenn Deine Elemente bereits von sich aus ausgeblendet sind, dann vermittelst Du keinen Content. Er ist weg. Um ihn einzublenden, setzt Du auf eine zusätzliche, optionale Technik. Was also liegt näher, als exakt diese Technik einzusetzen, um die betreffenden Elemente initial auszublenden?

Das einfachste Beispiel, was auch Kuno genannt hat und vielfach eingesetzt wird, ist das Ersetzen der Überschriften mit Grafiken.

So zum Beispiel:
HTML:

  
<h1 id="gbm"><span>Google baut Mist!</span></h1>  

CSS:

  
h1 span {  
  display:none;  
}  
h1#gbm {  
  display:block;  
  width:200px;  
  height:40px;  
  background-image:url(ueberschriften/gbm.gif);  
}  

Hierzu verweise ich auch nochmal auf den CSS Zen Garden!

Wieso sollte ich da Javascript einsetzen?

Gruß,
Andy

[Detlef G.]

Hallo Andy

Das einfachste Beispiel, was auch Kuno genannt hat und vielfach eingesetzt wird, ist das Ersetzen der Überschriften mit Grafiken.

So zum Beispiel:
HTML:

<h1 id="gbm"><span>Google baut Mist!</span></h1>

> CSS:  
> ~~~css
  

> h1 span {  
>   display:none;  
> }  
> h1#gbm {  
>   display:block;  
>   width:200px;  
>   height:40px;  
>   background-image:url(ueberschriften/gbm.gif);  
> }  
> 

Wodurch dann überhaupt keine Überschrift erscheint, wenn aus irgendwelchen Gründen die Grafik nicht geladen wird.
Warum nicht einfach:

<h1><img src="ueberschriften/gbm.gif" alt="Google baut Mist!"></h1>  

Oder etwas aufwändiger:

HTML:

<h1 id="gbm"><span></span>Google baut Mist!</h1>  

CSS:

h1#gbm, h1#gbm span {  
  display:block;  
  width:200px;  
  height:40px;  
  position:relative;  
}  
 h1#gbm span {  
  background-image:url(ueberschriften/gbm.gif);  
  position:absolute;  
  top:0;  
  left:0;  
}

(Natürlich müssen dabei die Schriftgröße und die Größe von h1 und der Grafik angepasst werden.)

Auf Wiederlesen
Detlef

[Andy]

Hallo Detlef,

HTML:

<h1 id="gbm"><span>Google baut Mist!</span></h1>

> > CSS:  
> > ~~~css
  

> > h1 span {  
> >   display:none;  
> > }  
> > h1#gbm {  
> >   display:block;  
> >   width:200px;  
> >   height:40px;  
> >   background-image:url(ueberschriften/gbm.gif);  
> > }  
> > 

Wodurch dann überhaupt keine Überschrift erscheint, wenn aus irgendwelchen Gründen die Grafik nicht geladen wird.

Schön, schön, schlecht für die, die grafiklastige Layouts bauen!

Warum nicht einfach:

<h1><img src="ueberschriften/gbm.gif" alt="Google baut Mist!"></h1>

Ja, warum nicht? Weil es in dem Kontext nicht die richtige Vorgehensweise ist. Man will ja eine Überschrift und keine Grafik an dieser Stelle!  
  

> Oder etwas aufwändiger:  
>   
> HTML:  
> ~~~html

<h1 id="gbm"><span></span>Google baut Mist!</h1>  

> 

CSS:

h1#gbm, h1#gbm span {

display:block;
  width:200px;
  height:40px;
  position:relative;
}
h1#gbm span {
  background-image:url(ueberschriften/gbm.gif);
  position:absolute;
  top:0;
  left:0;
}

>   
> (Natürlich müssen dabei die Schriftgröße und die Größe von h1 und der Grafik angepasst werden.)  

Schönes Beispiel, aber das Markup gefällt mir gar nicht! Ein leeres span-tag? Ich hab das mal auf mein Markup umgebaut, leider spielt der Internetexplorer dann nicht mit, da ich mit z-index gearbeitet habe und er einfach keine Ebene in den Hintergrund schieben wollte.  
Ausserdem: Was komplett gegen diesen Ansatz spricht sind Überschriftsgrafiken, die einen transparenten Hintergrund haben (bzw. haben müssen) und somit die ursprüngliche Überschrift durchscheinen lassen!  
  
Gruß,  
Andy

[Detlef G.]

Hallo Andy

Wodurch dann überhaupt keine Überschrift erscheint, wenn aus irgendwelchen Gründen die Grafik nicht geladen wird.
Schön, schön, schlecht für die, die grafiklastige Layouts bauen!

Dann geht zwar das tolle Layout flöten, die (textlichen) Inhalte bleiben aber erhalten.

<h1><img src="ueberschriften/gbm.gif" alt="Google baut Mist!"></h1>

> Ja, warum nicht? Weil es in dem Kontext nicht die richtige Vorgehensweise ist. Man will ja eine Überschrift und keine Grafik an dieser Stelle!  
  
Ja, da hast du recht, es bleibt aber wenigstens der Text des alt-Attributs als Überschrift, wenn die Grafik nicht geladen werden kann.  
  

> Schönes Beispiel, aber das Markup gefällt mir gar nicht! Ein leeres span-tag?  
  
Ob ein leeres span-Element wirklich viel schlimmer ist, als eine zusätzliche nur für diesen Effekt nötige Verschachtelung? Beides stellt zusätzliches Markup dar.  
  

> Ich hab das mal auf mein Markup umgebaut, leider spielt der Internetexplorer dann nicht mit, da ich mit z-index gearbeitet habe und er einfach keine Ebene in den Hintergrund schieben wollte.  
  
Warum das bei dir nicht klappt, kann ich jetzt nicht nachvollziehen.  
  

> Ausserdem: Was komplett gegen diesen Ansatz spricht sind Überschriftsgrafiken, die einen transparenten Hintergrund haben (bzw. haben müssen) und somit die ursprüngliche Überschrift durchscheinen lassen!  
  
Warum "komplett gegen diesen Ansatz"?  
Selbstverständlich ist er für transparente Grafiken nicht geeignet.  
Es gibt noch eine Reihe weiterer Techniken, Text gegen eine Grafik auszutauschen, und so ziemlich jede Möglichkeit hat Vor- \_und\_ Nachteile. Es muss jeweils entschieden werden, bei welcher Technik für den konkreten Anwendungsfall die Vorteile überwiegen.  
  
Mit meinem Beispiel wollte lediglich darauf hinweisen, dass es auch Möglichkeiten gibt, die kein `display: none;`{:.language-css} oder `visibility: hidden;`{:.language-css} benötigen.  
  
  
Auf Wiederlesen  
Detlef  

-- 
- Wissen ist gut  
- Können ist besser  
  
- aber das Beste und Interessanteste ist der Weg dahin!