CSS SEO - ottimizzare i fogli di stile per i motori di ricercaUna delle cose che mi fa rabbrividire è vedere ancora nel 2009 Web Designer (se così li possiamo definire), che realizzano interi siti web senza ricorrere, quasi per niente, all’utilizzo dei CSS.
Si vedono ancora pagine formattate con attributi di carattere come il “font face”. Per non parlare delle tante Web Agency, che usano le tabelle per organizzare la grafica delle pagine, impiegando Javascript e Flash per creare dei semplici menu dinamici a tendina.

Utilizzare i CSS porta solo vantaggi!
Non solo i siti saranno facilmente gestibili con poche modifiche, ma vogliamo parlare dell’importanza dei avere siti con contenuto accessibile, sia da parte dei sistemi di navigazione automatica (browser per non vedenti) sia dagli spider dei motori di ricerca.
Come tutti i SEO sanno (o dovrebbero sapere), l’utilizzo inappropriato di JavaScript e Flash impediscono spesso una corretta indicizzazione e ciò non è assolutamente ammissibile in un buon progetto SEO.

I fogli di stile e la loro interazione con l’HTML, offrono una vasta gamma di tecniche, suggerimenti e trucchi che ogni Web Designer che si rispetti dovrebbe conoscere e utilizzare.

Come i CSS possono migliorare al posizionamento di un sito?
Utilizzare tecniche errate e obsolete, riempirà di codice inutile le pagine HTML, rallentando la spiderizzazione riempiendo le pance dei crawler, prima che questi raggiungano la portata principale: il contenuto!
Quindi a parte evitare layout fatti di tabelle nidificate sino alla nausea e gli stili in linea, bisognerebbe strutturare semanticamente i blocchi, in modo tale da far trovare il contenuto importante, nella parte alta della pagina, non necessariamente stravolgendone la grafica.
Nella maggior parte dei template il testo principale si trova nella colonna centrale, ma con l’utilizzo di piccoli “trucchi” CSS possiamo controllare l’ordine dei blocchi.

Inserite le colonne nell’ordine desiderato:
#content #right #left (menu di navigazione)
chiudete #content e #right in un div #wrapper e posizionatelo a destra con l'uso dei fogli di stile (float:right), poi fate scorrere a sinistra sia #content che #right (float:left). Infine fate spostare sulla sinistra la colonna #left

Ho inserito una pagina di esempio, basterà aprire il file di “esempio ottimizzazione css” con un file di testo per vederne il codice.

Spero possa esservi utile.