Attenzione che "text-indent: -9999px;" è proprio tra gli elementi analizzati dagli algoritmi di Google alla ricerca di elementi tali da fa catalogare la pagina come spammosa. Ci sono altri metodi, leciti, per fornire testo.
Sul post di Maile Ohye è spiegato come funziona l'algoritmo.

Valerio Notarfrancesco

Non metto in discussione l'autorevolezza di Maile Ohye, io sostenevo ciò perché avevo letto questo: thatwebguyblog.com/show_article.php?id=2675
In fondo alla pagina si precisa che il discrimine riguarda proprio le modalità di applicazione. Mah.
Comunque, nel mio caso (prima sintetizzavo), non era solo questione di un'immagine cui potevo assegnare l'attributo "alt", ma c'erano tasti di menù che cambiavano con effetto hover (tramite css), quindi nell'html non avevo fisicamente immagini, e il testo inserito replicava la scritta grafica del menù...

Io sapevo che il problema è se il text-indent viene usato per aumentare le key è considerato spam. Ma se metto un logo come background di un div, nel div scrivo "logo pippo" e metto text-indent -9999px non è considerato spam. L'importante dovrebbe essere la coerenza dei testi "indent" con il contenuto della pagina, sbaglio?

Non sbagli nel senso che non basta "text-indent -9999px" per far penalizzare la pagina, ma l'algoritmo prende in considerazione più parametri.
Avrei sicuramente dovuto evidenziare maggiormente questo visto che non voglio fare terrorismo psicolgico, penso che sia tra le cose peggiori nel lavoro.

Di sicuro "text-indent -9999px" è un fattore che fa scattare un campanello d'allarme in Google, poi ognuno deve valutare se all'interno delle proprie pagine ci potrebbero essere altri elementi che, anche se usati in modo lecito, potrebbero far ritenere agli algoritmi che la nostra pagina stia spammando keywords.

Io preferisco non usarlo in assoluto e ricorrere ad altre strade.

Valerio Notarfrancesco

Non mi trovo d'accordo (capita .D). Provo a motivare il mio disaccordo sulla base di un ragionamento che spero sia condiviso e discusso.
Da un po' di tempo ormai anche google stesso parla di ottimizzazione dei tempi di caricamento della pagina e si vede uno massiccio dei css sprites sui siti per ridurre il numero di chiamate al server. Per non contare che lo stesso page speed (e compagnia bella) segnala questo fattore solitamente tra i più importanti. E questi sprites tendenzialmente sostituiscono quasi sempre menù, alcune volte invece icone e rimpiazzano l'html scrivendo la descrizione dell'immagine o della voce di menù proprio come se fossero degli alt (usando il text-indent). Detto tutto ciò sono arrivato a considerare questo fattore come assolutamente non-influente in ottica spam se utilizzato con il criterio appena esposto. Che ne dite?

Io cerco di evitare tutte le tecniche dubbie, non mi sembra ne valga la pena.

@fabio19tdi said:

Io cerco di evitare tutte le tecniche dubbie, non mi sembra ne valga la pena.

Quindi se hai 40 icone in una pagina fai fare 40 chiamate al server?
Potresti dettagliare meglio la motivazione del perchè non farlo? Grazie

@gleenk said:

Non mi trovo d'accordo (capita .D).
Le opinioni differenti sono alla base della crescita di ogni comunità, quindi sono benvenute. Tuttavia gleenk qui dovrebbe essere Google a scendere dal suo piedistallo e a parlare con gli operatori del settore.

@gleenk said:

Quindi se hai 40 icone in una pagina fai fare 40 chiamate al server?
Sono cose differenti non confondiamoli.
Migliorare le prestazioni di una pagina è un'ottima cosa, sempre, quindi usare gli sprites è consigliabile, ma non c'entra niente con l'uso di "text-indent: -9999px;" che al momento è considerato da Google un campanello d'allarme (e qui evidenzio che non basta solo "text-indent: -9999px;" per far penalizzare una pagina).
Si possono ottenere gli stessi effetti con altre tecniche ed evitare quindi l'uso di "text-indent: -9999px;" ed è quello che Google suggerisce nelle sue best practises.

Valerio Notarfrancesco

Hehe! Si vede mi sono spiegato male.
Non ho siti con 40 icone, ma volevo dire che non nascondo testi ecc...

Se il titolo del sito è un Immagine che non posso rifare con i Java allora metto l'immagine nell'H1 e il titolo nel alt.

Non mi sembra che mi abbia creato problemi, cerco di far capire al cliente che qualcosa va scritto e quindi metto il testo visibile, nNiente tecniche speciali.

@vnotarfrancesco said:

quindi usare gli sprites è consigliabile, ma non c'entra niente con l'uso di "text-indent: -9999px;
Non c'entra se lasci i div, i link o chi per essi vuoti. Ma per i loghi ad esempio mi sembra che c'entri

@vnotarfrancesco said:

Si possono ottenere gli stessi effetti con altre tecniche ed evitare quindi l'uso di "text-indent: -9999px;" ed è quello che Google suggerisce nelle sue best practises.

Quali tecniche? Curiosità

Ogni caso è diverso e può essere risolto in modi diversi.
Ad esempio, visto che tu accennavi al logo, per questa esigenza un modo sarebbe questo:

<body>
<h1><a href="/"><img id="logo" src="logo.png" alt="Descrivi il logo con le keywords" /></a></h1>
...

Google legge l'attributo alt, quindi si ottengono 3 benefici:

• si può usare tranquillamente una sprite per ridurre le richieste http e ridurre l'esecuzione di codice js
• non si usano tecniche viste da Google come campanello d'allarme per la presenza di spam (text-indent: -9999px;)
• ci si può posizionare anche in Google Immagini e prendere un po' di visite (a volte sorprendenti)

Valerio Notarfrancesco

Non riesco a capire nel tuo esempio dove useresti la sprite però :D!

Logo.png è la mega immagine che è composta da tutte le icone.
Associandolo il tag img all'identificativo "logo" (id="logo") faccio visualizzare solo quella porzione della mega immagine che corrisponde a quello che voglio visualizzare io in quel punto (nel file css ovviamente sono definite tutte le posizioni delle icone).

Ho sempre pensato che le immagini sprite fossero queste (carico solo un'immagine e poi visualizzo un pezzo per volta), ma forse intendiamo cose diverse.

Valerio Notarfrancesco

Sono abbastanza stupito dalla forma utilizzata, non ho mai utilizzato gli sprites in questo modo, farò un tentativo perchè mi hai incuriosito. Io conosco la strada classica di usare un'immagine di background via css (anche perchè così si fa realmente una sola chiamata al server, con il metodo da te esplicato ogni volta che io metto img src faccio una chiamata) e poi sempre via css usare il background-position per "spostarla" dove mi interessa

Gleenk guarda l'HTML di una SERP di Google, usa un codice molto simile a quello.

C'è un solo tag IMG, quello del logo, tutto il resto è fatto con la proprietà CSS background-image su SPAN o DIV, e sfruttando l'immagine caricata dal logo:

Ho finalmente verificato bene e le cose stanno a metà tra quanto detto. O così pare. Diciamo che prendendo ad esempio Google non si riesce a scoprire molto di più, o meglio, guardando il sorgente si vede che si usano gli sprites, il richiamo al logo una volta col tag img non è indispensabile ai fini grafici. Avrebbero potuto usare tranquillamente anche lì uno span ed un background-image + background-position. Hanno fatto questa cosa carina che val la pena utilizzare per i loghi (farò tesoro). Purtroppo per quanto riguarda il text indent non è una fonte attendibile il sorgente di google perchè non ho mai link (a) in display block con immagini al posto del testo. Il caso specifico di cui parlavo (oltre ai loghi per cui ho capito il meccanismo di cui parlavate) è questo. Resta il fatto che personalmente reputo molto strano e sospettoso che bigG utilizzi un <img eccc logo.png> (senza mettere l'alt tra l'altro ^^) quando di fatto quello non è il logo. ma è l'immagine di più cose. Secondo me il non mettere l'alt serve a "pararsi" proprio da questo. In tutto ciò ho scoperto come evitare il text-indent sui loghi, è già un'ottima cosa

@gleenk said:

Avrebbero potuto usare tranquillamente anche lì uno span ed un background-image + background-position.

Graficamente puoi ottenere lo stesso risultato, ma piuttosto che

<a href="/" title="mio sito bello"><span id="logo"></span></a>
o
<a href="/" title="mio sito bello" id="logo"></a>

da un punto di vista semantico, e anche per i motori di ricerca, credo sia meglio qualcosa del tipo

<a href="/" title="mio sito bello"><img src="/logo.png" id="logo" /></a>

Anche se manca l'alt, viene preso il title del link, che dai motori (almeno da Google) viene considerato proprio solo per i link non testuali.

E dato che Google lato client fa delle ottimizzazioni estreme in nome della velocità (arriva a sacrificare la validazione HTML, la semantica, la SEO ...), magari questa tecnica l'aiuta. In ogni caso a me piace.

Tornando al text-indent:-9999 del thread, è come scrivere display:none, visibility:hidden ... è nascondere del testo, e siccome si può mettere nel title del link dietro al logo e/o nell'alt del logo, non ne vedo il motivo.

Concordo su ciò che dici e anzi ti ringrazio per lo spunto del "title". Sicuramente lo userò al posto del text-indent e farò dei confronti SEO se riesco. Non concordo però sull'ultima frase
Non ritengo possibile che Google penalizzi display:none ecc... Significherebbe penalizzare praticamente tutti i siti che utilizzano jquery per fare un banale accordion, una navigazione a tabs o in AJAX. Mi pare del tutto inverosimile e, forse, più aapropriato ciò che ho letto secondo cui (un po' in linea con tutto quello che dicono da sempre) l'importante è l'attinenza contenutistica e la possibilità di "vedere" quell'elemento.

@gleenk said:

Concordo su ciò che dici e anzi ti ringrazio per lo spunto del "title".
Prego.

@gleenk said:

Non concordo però sull'ultima frase
Non ritengo possibile che Google penalizzi display:none ecc...

Infatti non l'ho detto.
Penalizza solo se lo ritiene ingannevole. E anche Google può sbagliare.
Se la soluzione A non da problemi, e quella B ne potrebbe causare, anche se solo raramente, io preferisco la soluzione A.