Cell. +39 3479684755
Il Blog di Instant Websites
SEO: tecniche, aspettative e … fantasie
“Per ora nel sito mettiamo solo qualche riga di testo e poche immagini, tanto se qualcuno è interessato può scriverci o telefonarci. Inoltre non avremo proprio tempo per gli aggiornamenti. Oh, ovviamente il sito deve comparire tra i primissimi risultati in Google nel giro di qualche giorno.”
D’accordo, lo ammetto, sto esagerando … ma solo un po’.
Anche se, nel corso degli anni, si è diffusa una migliore conoscenza dei meccanismi del web e del funzionamento dei motori di ricerca, capita ancora che le aspettative riguardo al proprio sito siano generate più dai desideri personali (quando non da vere e proprie fantasie) che da una preliminare valutazione del materiale e dall’applicazione del lavoro indispensabile per concretizzarle.
Ogni volta che affronto un nuovo lavoro, mi premuro di esporre un principio basilare che deve essere chiaro:
- non esistono trucchi né tecniche più o meno segrete per portare il sito nelle prime posizioni dei motori ricerca
Esistono, queste sì, tecniche applicate al codice delle pagine ed al sito (meta-tag, tag, una corretta semantica, sitemap ecc.) che devono essere messe in pratica senza eccezioni o scorciatoie ma fondamentalmente:
- una buona indicizzazione del sito dipende innanzitutto da due fattori: 1) contenuti originali, 2) aggiornamenti regolari
Ad essi si affianca un terzo elemento che è il tempo. E’ possibile ottenere un rapido, diciamo pressoché immediato inserimento del sito negli indici di Google e Bing attraverso la creazione di una sitemap e la sua segnalazione tramite i rispettivi Strumenti per webmaster ma il vero risultato è raggiunto se e quando il sito stesso viene mostrato nei risultati di una ricerca, in abbinamento alle parole chiave importanti. Ciò di solito richiede un certo tempo perché i robot del motore devono scansire le pagine e valutarle.
Uso dei template nei CMS
La personalizzazione grafica di un’installazione di WordPress, Joomla! o altro CMS (Content Management System, Sistema di gestione dei contenuti) può avvenire in uno dei modi seguenti:
- Utilizzo di un tema grafico compreso nel pacchetto di installazione (per WordPress: Twentyfifteen, Twentfourteen ecc.)
- Utilizzo di un tema gratuito dal repository ufficiale del CMS (per WordPress: https://wordpress.org/themes/)
- Creazione di un tema “figlio” o child theme dei suddetti o di altri temi
- Utilizzo di un template a pagamento acquistato su un sito specializzato
- Sviluppo di un tema originale da zero
Ognuna di queste soluzioni comporta vantaggi e svantaggi.
Escludiamo, ai fini della nostra analisi, le scelte “limite” – per così dire – e cioè 1, perché troppo banale, e 5 perché oggettivamente molto complesso.
Tralasciamo per il momento anche la scelta 3 che sarà ragionevolmente oggetto di un articolo specifico nel prossimo futuro.
Concentriamoci perciò sul caso in cui lo sviluppatore del sito opti per l’utilizzo di un template reperito nel repository ufficiale del CMS adottato ovvero acquistato su uno dei numerosi siti-mercato.
Alcuni potrebbero erroneamente pensare che l’uso di un template pronto costituisca una soluzione “out of the box“, in altri termini: basta applicare il tema ed ecco che la piattaforma funziona alla perfezione ed il sito è pronto.
Ciò non corrisponde alla realtà fattuale: d’altronde anche solo la corretta installazione del CMS costituisce procedura tutt’altro che immediata, inoltre ci sono numerose avvertenze ed accorgimenti che debbono essere messi in pratica sia nella scelta del template, sia nella sua implementazione.
Le osservazioni che seguono si rivolgono idealmente agli sviluppatori, in quanto presuppongono la conoscenza di HTML, CSS ed almeno le nozioni base di PHP e Javascript (e magari Bootstrap e qualcos’altro!) ma in buona parte sono valide anche per i semplici utilizzatori “avanzati”:
L’uso della dichiarazione display:none; nel design reattivo
Quando nei nostri corsi introduciamo i principi di base del design reattivo (o adattivo), spieghiamo che si tratta di un tipo di design con relativo sviluppo del codice, che consente di ridisporre gli elementi della struttura di pagina ed i rispettivi contenuti in funzione della viewport del dispositivo su cui il sito viene visualizzato (in parole più semplici e con una certa dose di imprecisione: in funzione dello spazio disponibile).
Questa affermazione costituisce una valida approssimazione di partenza ma è incompleta.
Innanzitutto occorre considerare che esistono due possibili approcci:
- la tecnica Mobile-First: disegnare la struttura di pagina per i dispositivi mobili, poi svilupparla per le viewport di dimensioni maggiori;
- la tecnica opposta, ovverosia disegnare per una viewport corrispondente ad uno schermo da tavolo, poi aggiungere le regole (media query) per i dispositivi mobili.
I sostenitori di 1) motivano la loro scelta con la diffusione capillare dei dispositivi mobili al punto che questi vengono usati più dei tradizionali PC da tavolo per navigare Internet.
Chi preferisce la soluzione 2), invece, si basa più che altro su un presupposto di tipo logico: fino a poco tempo fa non esistevano le media query quindi si creavano i layout a dimensione fissa o variabile ma comunque partendo da una certa risoluzione orizzontale “ottimale” dello schermo, per cui è normale partire comunque da tale riferimento e poi considerare le viewport minori (tablet e smartphone) introducendo un certo numero di breakpoint.
Occorre anche aggiungere che è possibile aggiornare i siti esistenti – purché non troppo vecchi – modificandone il DTD in HTML5 ed aggiungendo le media query in modo tale che divengano reattivi. In questo tipo di interventi si procede per forza di cose secondo la tecnica 2).
A prescindere dalla prassi individuale, è possibile integrare la definizione di partenza aggiungendo che: nel design reattivo, è possibile prevedere che alcuni contenuti di pagina vengano visualizzati o meno in funzione della viewport del dispositivo.
Non solo, quindi, riposizionare gli stessi elementi bensì mostrarne di aggiuntivi ovvero nasconderne alcuni in base allo spazio.
Una tecnica molto semplice che consente di ottenere questo risultato, è quella di impiegare la dichiarazione: display:none; all’elemento che si vuole nascondere in corrispondenza di una certa risoluzione video.