L'indent di testo: -9999px è una cattiva tecnica per sostituire il testo con le immagini e quali sono le alternative?

Question

Questo articolo Supponiamo che dovremmo evitare di usare questa tecnica. Questo dice che è fantastico. È vero che Google guarda all'interno dei file CSS per text-indent: -9999px; E ti punisce? : |

Sto usando quella proprietà Un sacco per nascondere il testo. Ad esempio, ho un pulsante rappresentato da un'icona:

<a href="#" class="mybutton">do Stuff</a>

Il CSS:

.mybutton{
  text-indent: -9999px;
  background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
  display: block;
  width: 16px;
  height: 16px;
}

Non vedo alcuna alternativa al mio codice. Se lo sostituisco con un'immagine ottengo automaticamente +20 richieste HTTP per ogni immagine del pulsante.

Se faccio vuoto il link, è meno accessibile perché i lettori degli screen non sapranno cosa sia. E i link vuoti sembrano strani, probabilmente a Google non piace neanche ...

Allora qual è il modo migliore per gestire tali situazioni?

Answer 1

Un buon motivo per non utilizzare il metodo -9999px è che il browser deve disegnare una scatola da 9999px per ogni elemento a cui viene applicato. Ovviamente, ciò crea potenzialmente un vero colpo per le prestazioni, soprattutto se lo stai applicando a più elementi.

I metodi alternativi includono questo (da Zeldman.com):

text-indent: 100%; white-space: nowrap; overflow: hidden;

... o in alternativa (da qui):

height: 0; overflow: hidden; padding-top: 20px;

(dove "imbottitura" è l'altezza che si desidera che l'elemento sia).

Penso che il primo metodo sia più ordinato, dal momento che ti consente di impostare l'altezza in modo normale, ma ho trovato il secondo a funzionare meglio in IE7

Answer 2

Ho letto che Google non promuove il concetto di usare un negatve text-indent su tag di ancoraggio - http://maileohye.com/html-text-indent-not-messing-up-your-nankings/. Idealmente, dovresti utilizzare tag del titolo e attributi Rel per dire di più ai motori di ricerca sui collegamenti.

Inoltre, potresti voler leggere questi thread:

• http://www.google.com/support/forum/p/webmasters/thread?tid=1a51b7310162d1aa&hl=en

• http://websiteSesigningTips.com/5-tips-web-Designers-developers-Optimize-site-Search-engines/ (l'ultimo punto)

Sitemaps, robot, tag di ancoraggio che utilizzano tag Rel e titolo ove possibile e applicare tag ALT alle tue immagini dovrebbero aiutare a migliorare il SEO.

Google attraversa anche i contenuti guidati da Ajax ora usando l'operatore Shebang (#!) Quindi forse è qualcosa su cui vorresti leggere - http://www.seomoz.org/blog/how-to-allow-google-to-crawl-ajax-content

Usando HTML5 e JQuery, ci sono un certo numero di plugin che consentono il bookmarking e il collegamento profondo dei collegamenti AJAX.

Spero che sia di aiuto.

Answer 3

Il trucco del testo del testo dovrebbe essere OK per i pulsanti di azione, e forse non è così ok se si desidera che i motori di ricerca considerino il testo del collegamento mentre pesano il grado di pagina della pagina di destinazione.

A proposito, credo fermamente che Google utilizzerà più euristiche prima di considerare il tuo markup come spam, quindi dovresti cavartela usando casualmente l'indent.

Answer 4

Non ho idea se Google abbia problemi (anche se l'articolo hai collegato ai collegamenti a Un post sul blog da un dipendente di Google, in modo che porti un po 'di peso), ma penso che l'alternativa sia usare un <img> tagga con una gif trasparente e il tuo sprite come il suo background-image:

Html

<a href="#" class="mybutton"><img alt="do Stuff" src="1-pixel-spacer-image.gif" width="16" height="16"></a>

CSS

.mybutton,
.mybutton img {
  display: block;
  width: 16px;
  height: 16px;
}

.mybutton img {
  background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
}

Immagini di sfondo su <img> I tag funzionano in modo affidabile, anche in IE 6.

Naturalmente, ciò che Google sta cercando di fare è evitare di indicizzare il testo che non è visibile e alt Il testo non è nemmeno visibile. Ma forse eviterà il rischio che la tua pagina possa essere contrassegnata come spamy da un algoritmo di Google.

E questo metodo provoca almeno il testo mostrato se l'utente disabilita le immagini nel proprio browser, che text-indent no.

Answer 5

Bene, c'è un'alternativa (che uso abbastanza frequentemente).

<a href="#" class="mybutton"><span>do Stuff</span></a>

Puoi cambiare intervallo in forte/H1 ecc. In base al contesto.

.mybutton{
  background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
  display: block;
  width: 16px;
  height: 16px;
}
.mybutton span{
    display: none;
}