Menu a discesa compatibili con i Motori di Ricerca: come creare, con i soli Css

I menu a discesa JavaScript sono impiegati da molti siti Web di medie e grandi dimensioni come strumento di navigazione principale a disposizione dei visitatori del sito. I menu a discesa offrono molti vantaggi. Innanzi tutto sono già familiari a chi utilizza il computer dal momento che sono presenti in quasi tutto il software tradizionale. Inoltre i menu a discesa, oltre a chiudersi quando non sono necessari e dunque occupare poco spazio sullo schermo, offrono una buona ricchezza di opzioni quando l’utente sfiora una delle categorie visibili.

Tecnicamente, l’uso del linguaggio JavaScript per codificare un menu a discesa è problematico. Mentre una parte di codice può essere tenuto in un file JavaScript esterno, molto JavaScript finisce di solito per gonfiare le pagine Html. Inoltre nella maggior parte dei casi, i crawlers dei motori di ricerca non sono in grado di seguire i collegamenti di navigazione fatti con JavaScript, il che comporta un’indicizzazione povera e una scarsa visibilità nei motori di ricerca.

Con la diffusione dei moderni browser conformi al livello 2 dei Css come Netscape, SeaMonkey (già Mozilla), Opera, Firefox e Safari, l’uso dei menu a discesa creati solo mediante Css è diventato possibile. Una volta realizzati, sono molto facili da modificare nel caso in cui la navigazione del sito dovesse cambiare. L’uso di file Css esterni per disegnare i menu riduce le dimensioni delle pagine rendendo il sito più veloce. Inoltre l’uso di Css, a differenza del loro antenato JavaScript, fa si che i motori di ricerca possano scorrere le voci di navigazione dei menu.

Notizie anche migliori all’orizzonte: IE 7 supporta le funzionalità Css richieste per far funzionare i menu a discesa Css (hover sulle liste). Il supporto delle altre funzioni dei Css in IE 7 non è male, ma rimane ancora indietro rispetto a browser quali Opera e Firefox. Ad esempio, il margine negativo non funziona ancora nelle sottoliste (la scheda di menu corrente in questo sito non mostra una linea sotto di sé se viene esaminata utilizzando un buon browser; IE 7 mostra invece una riga, come fanno le versioni di IE precedenti). Abbiamo osservato anche che non sembra che l’attributo max-width venga supportato. Gli utenti dovrebbero passare a un browser moderno come Firefox o Opera visto che il supporto degli standard del web in IE avviene sempre in ritardo e in modo approssimativo.

Le funzionalità di menu a discesa Css necessarie possono essere simulate nell’obsoleto IE 6 e precedenti utilizzando il csshover.htc. Se è vero che questo file viene caricato ogni volta che un utente visita il sito, è altrettanto vero che dovrà essere caricato soltanto una volta – e solo per i vecchi browser IE se si codifica il sito correttamente.

Un approccio sensato per la messa a punto dei Css è quello di creare un file principale Css compatibile con tutti i browser principali conformi agli standard del web (tipo Firefox Opera e Safari). I difetti IE possono quindi essere affrontati utilizzando un file Css aggiuntivo dopo il file Css principale, a seconda della versione IE. Qualsiasi voce nel file aggiuntivo avrà la precedenza sui livelli principali, visto che sfrutta l’aspetto a cascata di Css.

Il seguente codice carica un file di stile principale “sito.css”. Utilizzando i commenti condizionali specifici per IE, carica anche il file “ie6.css” per qualsiasi browser IE fino alla versione 6. Oltre a correggere i problemi con i Css di IE, questo file carica il file htc JavaScript necessario a emulare le funzionalità Css mancanti. Per IE 7 o superiore, sarà caricato ie7.css. Il file .htc non è referenziato poiché non è più necessario.

css" rel="stylesheet" media="all" type="text/css" title="Screen Stylesheet" />

L’eleganza di questa soluzione consiste nel fatto che gli utenti con browser moderni (IE 6 è stato rilasciato 5 anni fa, facendo riferimento alle tecnologie precedenti…) non devono caricare file supplementari necessari per supportare IE < 7.

Istruzioni specifiche per la realizzazione possono essere trovate consultando le risorse di alistapart così come il libro di Christopher Schmitt (O’Reilly Media, 2004).

Una doverosa riflessione sui Css e sul testo nascosto.

I motori di ricerca hanno detto chiaramente che l’uso di testo nascosto per manipolare la graduatoria di un sito è uno dei motivi validi per la rimozione dai loro indici. L’uso di Css per nascondere il testo sul sito può innescare una revisione manuale da parte di un motore di ricerca. Consigliamo di assicurarsi che il proprio sito non abbia nulla da temere nel caso di una revisione! Alcune società, come BMW, hanno dovuto constatare amaramente che il loro sito non era più visibile su Google.

Post correlate:

• Le Web Analytics e l’Enigma dei Clic Destri Mancanti
• Web Analytics: log file del Web Server oppure codice JavaScript da inserire nelle Pagine Html?