Motori di ricerca e testi nascosti

di: Roberto Federico     08 Giugno 2007

Gli sviluppatori che si occupano di progettare siti web, in particolare usabili e/o accessibili, si saranno magari posti il dubbio, soprattutto per l'eventualità di essere interdetti dagli indici di Google e di altri motori di ricerca attenti a "ripulire" la rete da pagine non aderenti alle regole della corretta ottimizzazione.

Il problema è quello del testo nascosto eventualmente presente all'interno di una pagina, una questione che potrebbe, se spinta al limite, suscitare questa paradossale domanda: un sito usabile o accessibile può essere tecnicamente non conforme al regolamento di Google?

Tutto nasce quando parti di codice vengono nascoste per permetterne la lettura a motori di ricerca, browser testuali, screen reader o dispositivi mobili, ma non ai browser comuni. Le finalità possono essere diverse:

- Per predisporre dei menu alternativi ad animazioni Flash

In questo caso si tratta di un'esigenza puramente grafica/estetica: se per un menu si opta per l'uso di Flash, al fine di ottenere un layout più accattivante, può essere utile permettere ai link di essere rilevati inserendo codice HTML alternativo, atto a sostituire i collegamenti presenti nell'swf.

- Per inserire degli strumenti dedicati all'accessibilità

Nel rendere un sito accessibile ad utenti diversamente abili, ad esempio non vedenti, o impossibilitati, anche solo temporaneamente, ad utilizzare il mouse (limitati quindi all'uso della tastiera), è pratica diffusa usare testi nascosti:

  • per una mappatura alternativa delle pagine (una sorta di menu "veloce" all'inizio del codice al fine di orientare l'utente)
  • per lo skip verso i contenuti del sito (saltando quindi la lettura dei menu e della testata e consentendo un accesso diretto al corpo della stessa pagina)
  • per impostare delle access keys (combinazioni di tasti in grado di sostituire il classico click) che permettano la navigazione senza mouse tra le sezioni.

- Per avvalersi di servizi di statistiche di accesso

Molti servizi di statistiche per il rilevamento degli accessi offrono la possibilità di installare contatori, rilasciando codici che, inseriti nelle pagine, permettano di renderli invisibili.

- Per creare menu a tendina con CSS

Avvalendosi di pulsanti invisibili fino al passaggio del cursore, questi menu sono spesso utilissimi per contemplare più sottosezioni quando la struttura e la varietà di contenuti del progetto lo renda necessario. Con l'avvento dei layout CSS-based questi tipi di menu vengono molto apprezzati per la versatilità (tutto il "lavoro" sull'aspetto e l'interattività è gestibile esternamente dai fogli di stile), e per la leggerezza in termini di byte rispetto alle alternative basate su altri linguaggi (Javascript, Java, ecc.).

Le tecniche per "nascondere" sono diverse, e sempre più spesso si avvalgono di proprietà dei fogli di stile, in grado di annullare la visibilità di una parte dei contenuti oppure di posizionare tale porzione al di fuori dei margini della pagina, ad esempio con questo codice, tra i più utilizzati:

.nomestile{
position: absolute;
top: -9999px; left:-9999px;
}

Altre due tecniche molto usate sono le seguenti:

.nomestile{
display:none;
}

e

.nomestile{
visibility:hidden;
}

Molto più rapide e semplici, sfruttano le proprietà display e visibility dei CSS, capaci di nascondere gli elementi associati alla classe, con la differenza che con visibility tali elementi non verranno mostrati, ma occuperanno lo spazio nella pagina proprio come se fossero visibili, mentre con display non occuperanno nessuno spazio.

In aggiunta alle tecniche precedentemente descritte, è possibile citare anche il tag <noscript>, spesso utilizzato da contatori visite e altri oggetti dinamici, oltre che per fornire testo alternativo, ad esempio in caso di lettura da parte di browser non abilitati a Javascript:

<noscript>
Attenzione!
Per visualizzare correttamente il contenuto di questa pagina occorre avere JavaScript abilitato.
</noscript>

Guide Web marketing

Guida Google Webmaster Tools

Webmaster Tools è uno strumento gratuito messo a disposizione da...

Guida Google Analytics

Percorso pratico per la creazione e gestione di un account...

Guida Google AdWords

Guida alla piattaforma di advertising di Google. Per creare annunci...

Altre guide

Newsletter @Web marketing e SEO

Ogni giovedì, direttamente nella tua e-mail: notizie e articoli sui motori di ricerca rivolte a SEO e Webmaster.

Iscriviti alla newsletter

Altre newsletter

Corsi in aula

Corso Google AdWords Base

25 Giugno 2012 a Milano
Disponibilità: 7 Posti

Corso Posizionamento Motori di Ricerca (SEO)

29 Giugno 2012 a Milano
Disponibilità: 5 Posti

Corso Google AdWords Base

05 Giugno 2012 a Roma
Disponibilità: 7 Posti

Corso Posizionamento Motori di Ricerca (SEO)

19 Giugno 2012 a Roma
Disponibilità: 6 Posti