Attenzione: Questo articolo/post è stato scritto 9 anni 1 mese 8 giorni fa!Tutto scorre, tutto cambia, molto probabilmente non sono più la stessa persona di allora.
Dopo tre mesi di lavorazione, il 12 Aprile ho messo on-line il nuovo sito di Quasar Design University. Si tratta di una delle più importanti realtà italiane della formazione in ambito grafica/creatività ed il lancio del nuovo sito si inserisce in un piano più ampio, una vera e propria strategia di riposizionamento digitale.
Provo qui a mettere nero su bianco i passaggi affrontati durante questi mesi scrivendo una sorta di “web marketing case history” che non vuole avere nessuna pretesa di completezza o perfezione, quanto piuttosto raccontare una storia e magari dare qualche spunto a chi si dovesse trovare in una situazione simile nel pianificare l’ottimizzazione SEO del proprio sito.
FASE 1: Analisi strutturale
La prima fase importante del progetto è stata l’analisi della vecchia versione del sito istitutoquasar.com alla ricerca di un’ispirazione per la nuova versione riguardo funzionalità richieste, project assumptions, errori da evitare e possibili criticità. Ho dedicato quindi quasi un mese all’analisi del sito, stilando un documento di oltre venti pagine che evidenziava tutta una serie di difetti piuttosto gravi:
- codice HTML non SEO-oriented
- architettura dell’informazione totalmente assente/incoerente
- pessima compatibilità con gli algoritmi di Google
- pessima integrazione dei social network
- pessima visibilità dei contenuti
Naturalmente è stato fondamentale stilare un elenco completo di tutti i competitors per fare benchmarking e capire come affrontassero la loro presenza in Rete gli altri player del mercato.
FASE 2: Progettazione
Dopo aver capito quali erano le aree di intervento più urgenti, la seconda fase del progetto è stata la creazione di un cronodiagramma di Gantt per avere una calendarizzazione dei task e fissare delle fasi di rilascio del progetto (milestones). Ho quindi utilizzato una suite di progettazione online (Gantter.com) ed una di task management (Trello.com) per fissare insieme al committente delle date plausibili.
Durante la progettazione ho lavorato tra le altre cose su due aspetti assolutamente fondamentali del rilascio di un sito così grande ed articolato:
Studio dell’architettura dell’informazione
Ho messo nero su bianco insieme al committente tutti i vari tipi di dato (notizie, docenti, staff, corsi) che sarebbe stato necessario gestire sul sito ed i relativi metadati (nomi, cognomi, date, file allegati, durate, immagini etc) così da ottimizzare tanto i menu del sito quanto (soprattutto!) l’interfaccia di gestione “backend”.
Wireframe design
Un errore comune nel lancio di siti web è la progettazione della grafica del sito senza tener conto delle possibilità offerte dai wireframe. Uno dei vantaggi dello studio dell’architettura dell’informazione di cui parlavo poco fa è che rende chiaro immediatamente quali dati saranno visualizzati in ogni pagina. Una volta completato l’elenco delle tipologie di contenuto ho quindi iniziato a pensare fin da subito alla loro visualizzazione tramite wireframe. La velocità di prototipazione ultra-rapida offerta da questo approccio ha reso possibile una grande chiarezza di comunicazione ed il coinvolgimento immediato del cliente.
FASE 3a: Realizzazione
Terminata la fase di progettazione ho messo subito online un sito su un dominio secondario “nascosto” (zzz.istitutoquasar.com) ed ho quindi proceduto a:
- Installazione di WordPress
- Protezione del sito
Ho protetto con una password il tutto per evitare possibili indicizzazioni non volute da parte di Google del nuovo sito in sviluppo. Troppe, troppe volte ho visto siti in sviluppo venire indicizzati da Google e andare a danneggiare il posizionamento del sito principale, quindi ho utilizzato il plugin “Site PIN” per proteggere il mio lavoro ed il brand del cliente - Acquisto / personalizzazione di un tema grafico
ho scelto Dynamix su Themeforest , un tema davvero potente e versatile. Ovviamente sono partito dal tema ma ho dovuto implementare oltre 5.000 righe di codice personalizzato per “piegarlo” alle mie esigenze - Configurazione di custom post types e taxonomies
Tramite il plugin wp-types ho impostato il pannello di controllo del sito per la gestione di corsi, docenti, storie di successo, convenzioni etc etc - Configurazione della gestione dei metadati
Ttramite plug-in Advanced custom fields ho aggiunto i vari metadati necessari al pannello di gestione - Implementazione di codice semantico Schema.org
Nel 2014 usare codice HTML compatibile con le specifiche Schema.org è un ottimo metodo per migliorare l’indicizzazione - Implementazione di un editor drag&drop
Il sogno di tutti i clienti: poter modificare “drag&drop” il proprio sito. Ecco, tramite il plugin visual composer ci sono andato molto vicino, ora l’interfaccia di gestione delle pagine è davvero modulare - Personalizzazione dello slider Revolution slider
Si tratta di un plugin molto potente per creare slider “pubblicitari”, dei veri e propri “mini spot” in html. Per aderire alla brand identity Quasar ho impostato font, colori, icone etc - Personalizzazione dei breadcrumbs del sito
Per ottimizzare l’indicizzazione ho impostato codice semantico (RDF breadcrumbs) - Creazione dei vari template WordPress
Basandomi sulla progettazione wireframe di cui sopra ho creato i vari template - Implementazione di script personalizzati
Ho ottimizzato la galleria di foto di WordPress ([ gallery shortcode] ) tramite il plugin Royal slider - Ottimizzazione della gestione degli asset multimediali
Per semplificare la gestione di immagini ed allegati ho usato plugin e codice ad hoc - Ottimizzazione delle impostazioni SEO
Ho installato e poi personalizzato ad hoc tramite codice PHP personalizzato il plugin Yoast SEO. Un software piuttosto potente che si occupa di aiutare nella gestione degli aspetti “SEO” di un sito WordPress - Ottimizzazione della permalink structure
Rispettando l’architettura dell’informazione di cui sopra, le varie “directory” o “sezioni”
http://istitutoquasar.com/corsi/
http://istitutoquasar.com/corsi/storia-giardino
http://istitutoquasar.com/docenti/
http://istitutoquasar.com/convenzioni/
etc etc sono tutte indipendenti tra loro, facilmente identificabili tramite analytics e assolutamente “leggibili” - Implementazione dei tag Open graph e delle Twitter Cards
Per migliorare l’esperienza di condivisione delle pagine sui social network, titoli, immagini e descrizioni testuali sono ottimizzati per Google+, Facebook & Twitter - Sistema di Customer Relationship Management
Come ogni sito moderno su istitutoquasar.com ci sono vari “moduli di contatto” per inviare messaggi o richiedere informazioni. Il sito implementa però una piccola “chicca”, un sistema che salva ogni interazione dei vari utenti in un database, creando uno storico comodissimo per sapere ogni utente che tipo di relazione ha con Quasar (per quanti e quali corsi ha richiesto informazioni, se ha scaricato dei file etc). Un vero e proprio modulo di Customer Relationship Management che permette interessanti esperimenti di marketing - Network di siti Quasar
Quasar non è “solo” il sito istitutoquasar.com , da sempre ci sono almeno 5/6 siti collegati al principale dedicati a grafica 3d, ex-alunni etc etc. In fase di progettazione ho intuito che questo “network” nascondeva un bel potenziale di marketing latente, visto che su nessuno dei vari siti veniva pubblicato alcun link agli altri del network. Ho quindi scelto di utilizzare il rosso, colore forte e caratterizzante del brand Quasar, per creare una sottile barra nella parte superiore dello schermo dove elencare i vari siti. Questo piccolo accorgimento avrà notevoli ricadute tanto a livello di branding quanto a livello di tempo medio di permanenza sul sito e numero di pagine medie per utente. - e-commerce
Il sito attualmente usa dei “bottoni” Paypal per il pagamento della prenotazione. Si tratta di un sistema tanto semplice da implementare quanto diffuso. Ho però interfacciato il codice di Paypal con il sistema di CRM di cui sopra così da avere un tracciamento delle interazioni anche a livello di prenotazione e pagamento. A breve verrà pubblicato un e-commerce dedicato su un sottodominio a parte dove permettere l’acquisto dei corsi, di voucher regalo et similia con un vero e proprio sistema di carrello elettronico ancora più potente
FASE 3b: Graphic design
La mole di lavoro era troppa e la tipologia di compiti da portare a termine per rispettare le varie deadline troppo variegata. Ho quindi coinvolto molto volentieri in questo progetto una persona esperta di grafica che mi ha aiutato a definire un codice visivo ed a ultimare i template. L’aiuto di Chiara Muccitelli è stato determinante e credo entrambi faremo volentieri una statua a Google Drive: oggi come oggi è semplicemente impossibile pensare di coordinare un progetto del genere a distanza senza una suite di condivisione documentale così potente (e gratuita .
FASE 4: Deployment
La fase di lancio del sito è arrivata dopo una (necessaria) fase di test che ha evidenziato gli inevitabili problemi dell’ultimo minuto. Una volta risolti, il sito si poteva definire quasi pronto per la messa on-line ed ho quindi fatto partire le ultime fasi:
- Hardening del sito
Uno dei problemi di WordPress è la sicurezza. Trattandosi di un sistema informatico è impossibile essere certi al 100% che il sito sia inattaccabile, ma è sempre buona norma procedere ad una protezione del codice del sito (eh no, qui dettagli su plugin e metodi mi sa che è meglio non darne
- Migrazione dei contenuti
I contenuti del sito precedente sono stati migrati utilizzando Import.io , uno scraper PHP scritto ad hoc e un plugin geniale come HTML import . Nonostante il sito precedente fosse basato su un CMS non open source e quindi difficilmente “migrabile”, Quasar non ha perso nessun dato ed ha potuto continuare a lavorare “come se niente fosse” con la certezza di avere conservato testi ed immagini, un asset prezioso ed insostituibile. - Migrazione delle URL
Il lancio di un nuovo sito equivale nella maggior parte dei casi ad una penalizzazione su Google. Questo perché non viene implementata una qualche tecnica di migrazione dei permalink dal vecchio sito al nuovo e Google troverà tutta una serie di “errori 404” sul sito. Se sul vecchio sito la pagina contatti si chiama ad esempio “scrivici.html” e sul nuovo “contatti.html”, Google continuerà a cercare la vecchia e non trovandola si comporterà come un qualsiasi cliente che entrando in un negozio non trova un prodotto: si innervosisce. Per Quasar è stata approntata una tecnica di monitoring delle pagine 404 e di redirect 301 che ha già ridotto dell’80% gli errori 404 e che permetterà di portare a zero le pagine con errore 404 entro due mesi. In soldoni, chi aveva nei “preferiti” una pagina del vecchio sito, potrà cliccare sul sito e vedere la nuova versione della pagina anche se in realtà la pagina ha cambiato indirizzo. - Ottimizzazione robots.txt
Wordpress è un sistema davvero potente di gestione siti. Peccato che sia rischioso da un punto di vista SEO se usato male. Basta saper ottimizzare un minimo il file robots.txt e configurare in maniera decente le tassonomie/custom post types per evitare i classici gravi errori di contenuti duplicati di cui viene accusato WordPress. Per chi è interessato all’argomento, il file robots.txt è liberamente accessibile sul sito istitutoquasar.com/robots.txt - Versione responsive del sito
Il precedente sito Quasar non era responsive e quindi si vedeva piuttosto male sui dispositivi mobile. Nel 2014 lanciare un sito responsive è stata una scelta quasi obbligata. Resta ancora qualche ottimizzazione da fare, ma sicuramente i tantissimi che navigano da cellulare possono finalmente interagire con semplicità coi contenuti offerti - Social fans counter
Quasar ha 7/8 profili social ed uno dei difetti del sito precedente era la pochissima rilevanza data ai vari profili. Ho scelto quindi di rendere altamente visibili le icone dei profili posizionandole nell’header, nel footer e nella sidebar del sito. In particolare nella sidebar ho usato un plugin (social fans counter) per sommare i fans dei vari profili e quantificare così numericamente il totale di “passione”/emozione/interesse generato dal brand Quasar. Una scelta semplice che molto probabilmente aiuterà a far crescere le interazioni con i profili Quasar tramite un ovvio meccanismo di “awareness” - Implementazione di algoritmi di caching
Tramite il plugin w3 total cache ho generato una versione “statica” del sito per ridurre al minimo il carico sul processore del server che ci ospita. WordPress è un software molto comodo da usare ma è piuttosto “pesante” e tende a rallentare parecchio i siti che lo usano. Il che si traduce in una pessima esperienza di navigazione per gli utenti e in una probabile penalizzazione da parte di Google (che tra i vari fattori SEO usa anche la velocità di caricamento delle pagine). - Implementazione di logiche di JS/CSS minification
Un sito così avanzato richiede decine di file Javascript e fogli di stile CSS. Si tratta di oltre 20 file differenti e per chi naviga sul sito scaricare contemporaneamente una tale quantità di file è un ulteriore rallentamento. Tramite tecniche di JS/CSS minification i vari file vengono fusi tra loro dinamicamente ed ora il sito ne impiega poco più di 5, rendendo così l’esperienza di navigazione decisamente più rapida e snella
FASE 5: Work in progress
Ovviamente il rilascio di un sito così complesso è un work in progress continuo, quindi ci sono ancora molti errori da risolvere e tante funzionalità da implementare. Tra questi sicuramente:
- Ottimizzazione dei link attributes in ottica SEO
Follow, nofollow, rel canonical sono ancora da “limare” - Ottimizzazione dei vari profili social
Duplicati, informazioni mancanti e poco coerenti, immagini etc vanno tutte ottimizzate in ottica SEO e di brand identity - Ottimizzazione di Adwords e relative landing pages
- Implementazione di funzionalità di e-commerce avanzate
Shhhh, questo è top-secret - Gestione del sito multilingua
- Gestione di API json
Per interfacciamento ad applicazioni mobile. Shhhh, top secret anche questo! - Ottimizzazione dei contenuti in ottica SEO
Tanto, tanto content marketing e link building Implementazione di una CDN(fatto!)
L’uso di una Content Delivery Network è una tecnica piuttosto avanzata per ridurre al minimo il tempo di caricamento del sito. Tramite MaxCDN o Amazon Cloudstorage si possono raggiugnere velocità semplicemente inarrivabili tramite hosting “tradizionali”
Tutto qui? No, c’è altro, parecchio altro in pentola. Ma è difficile essere esaustivi senza risultare noiosi o troppo tecnici ed ho l’impressione di aver già sforato da un po’. Questa mini case-history la voglio chiudere con i dovuti ringraziamenti. Prima di tutto il team di Quasar con cui mi sono interfacciato (Luna, Tiziana, Chiara, Giulia, Eva, Federica, Francesco): siete stati fantastici! Ma soprattutto Grazie ad Emanuele Mancini, senza il suo costante entusiasmo quest’esperienza neppure sarebbe iniziata.
Il grazie più grande va a Alessandra. Un progetto così articolato prosciuga energie vitali, è davvero difficile trovare una persona capace di “sopportare” tutto questo con amore. Ma questa è tutta un’altra storia, tutta un’altra “case-history”.
In less than 24 hours I managed to reduce load times by 50%! Thanks @CloudFlare , you make #webmarketing easier
— Dario Caregnato (@dariocaregnato) May 7, 2014
"Your site (http://t.co/H03PKAjYWR ) is faster than 73% of all tested sites". Thanks to your plugin @w3edge! pic.twitter.com/A8DubMmw7X
— Dario Caregnato (@dariocaregnato) May 28, 2014
E ora continuiamo a lavorare per migliorare il tutto.