fatti trovare dai tuoi clienti
Corso SEO & HTML: #11 Style CSS
CSS (Cascading Style Sheets) è il linguaggio adatto a descrivere come un sito web deve apparire all'utente. Usa un unico file CSS per decorare il tuo sito!
« Corso SEO & HTML: #10 Schema.org
- CSS, cos'è?
- CSS a cosa serve, come si usa?
- Come si inserisce il foglio di stile CSS in una pagina web?
In questa rubrica sulla SEO dedicata alla scrittura di codice HTML ti spiego con parole semplici quali sono i tag HTML fondamentali di ogni pagina web per farti capire come è fatto un sito web in modo da sfruttare al meglio le conoscenze sulla SEO ed essere in prima pagina su Google, senza farti necessariamente diventare un webmaster o un hacker!
CSS
Cascading Style Sheets
I file CSS detti anche fogli di stile, rappresentano un elemento decisivo nella valutazione che porta un sito in prima pagina su Google!
Il foglio di style CSS serve a descrivere la pagina web in modo che ogni browser sia in grado di "disegnarla" proprio come il grafico e il webmaster vogliono che essa sia.
In origine per conferire alle pagine web un aspetto grafico più o meno piacevole, il webmaster utilizzava solo HTML e inseriva le indicazioni relative all'aspetto grafico desiderato direttamente nel codice HTML, mediante gli attributi dei vari elementi che componevano la pagina web stessa.
Il risultato era una "cozzaglia" di codice HTML, impossibile da leggere e modificare, spesso costruito direttamente utilizzando tools grafici a Drag&Drop tipo MS Front Page o Adobe Dreamweaver.
Questo tipo di approccio era semplicemente devastante per la SEO, per due principali motivi:
- le pagine web scritte usando un solo file HTML che contiene tutte le informazioni sul contenuto e anche sull'aspetto grafico sono estremamente pesanti da caricare (in termini di kilobytes);
- le pagine web che incorporano la descrizione della parte grafica all'interno degli attributi dei tag HTML, non riescono ad adattarsi al dispositivo e quindi è quasi impossibile realizzare un "design responsive" che si adatti ai dispositivi mobili (smartphone).
Dunque — se hai studiato il Corso SEO Operativo Basic non avrai bisogno di altre spiegazioni — utilizzando un file CSS separato per descrivere l'estetica delle tue pagine web, oltre ad avere il vantaggio di poter sfruttare i potentissimi strumenti offerti dal CSS3, avrai i seguenti notevoli vantaggi:
- i file HTML dovranno semplicemente descrivere la struttura e contenere i contenuti (Testo e Immagini);
- il file CSS che descrive l'estetica solitamente è lo stesso per tutta la navigazione nel sito, quindi verrà caricato una sola volta per tutte e conservato nella cache del dispositivo;
- il linguaggio CSS3 contiene definizioni estremamente moderne per creare design ed effetti grafici di grande impatto e dunque facendo leva sul fattore umano si raggiunge un pubblico ancor più vasto e si fidelizza con più facilità;
- la definizione di più layout a seconda della grandezza dello schermo che deve visualizzare la pagina web, consente al webmaster di creare un'esperienza d'uso estremamente piacevole su qualsiasi piattaforma: desktop, tablet o smartphone!
Tutti questi aspetti hanno risvolti positivi in termini di SEO, dovuti a una esperienza utente positiva e velocità di caricamento ottimizzate.
Ora vorrai sapere come si fa a inserire il CSS in una pagina web, molto semplice.
CSS come si fa
Come inserire lo style CSS nel tuo sito
Solitamente lo stile di una pagina si inserisce nella sezione "invisibile" dell'HTML, ovvero nella sezione <head>, però può essere inserita anche tra i vari tag HTML all'interno del <body>.
Va ricordato che il CSS segue il flusso di lettura del testo, dall'alto verso il basso, e una definizione che si trova più in basso può sovrascrivere un'altra precedente definizione che è stata scritta più in alto!
Come abbiamo già visto per gli script, anche lo stile CSS di una pagina web può essere scritto direttamente nell'HTML (INTERNAL CSS):
<style>
p { text-align: left; width: 100%; margin: 10px 20px; padding: 0; }
</style>
o caricato attraverso un file esterno (EXTERNAL CSS):
<link rel="stylesheet" href="css/style.css">
o come attributo di un singolo elemento HTML della pagina web (INLINE CSS):
<p style="text-align: center;">Testo centrato</p>
Oggi ci fermiamo qui, perché altrimenti l'articolo diventa troppo lungo, ma in futuro tratteremo come si deve l'argomento CSS.
L'obiettivo di oggi era semplicemente quello di farti capire l'importanza di avere un file CSS che descrive come devono apparire gli elementi decorativi della pagina web, evitando di creare dei file HTML monolitici di enormi dimensioni e di difficile gestione!
Naturalmente se vuoi diventare un grafico del web o un webmaster, vorrai approfondire l'argomento e imparare ogni segreto del CSS 3, ma per oggi ci fermiamo qui.
Conclusioni
Hai capito che il CSS deve essere utilizzato per trarre vantaggi anche in termini di SEO e che anche i fogli di stile CSS concorrono per portarti in prima pagina su Google.
Con i fogli di style CSS concludiamo la parte di corso HTML dedicata al tag <head> — dove quello che scriviamo serve solo al browser e al crawler di GoogleBot — dalla prossima volta incominceremo a parlare di Body e tutto ciò che possiamo inserire al suo interno, quindi fai click su "Seguimi" per ricevere una notifica!
Ti do appuntamento alla prossima settimana, nel frattempo metti un like se questo articolo ti è stato utile e condividilo con tutti i tuoi amici che — come te — vogliono essere in prima pagina su Google, te ne saranno immensamente grati.
Se qualcosa non ti è chiaro, fammi le tue domande nei commenti, risponderò a tutti, oppure scrivimi in privato.
Iscriviti al Corso SEO Operativo per poter entrare nel gruppo privato dove parliamo ogni giorno di SEO e di come fare per essere in prima pagina su Google, a presto.
Corso SEO & HTML: #12 Tag Body »