closeAttenzione: Questo articolo/post è stato scritto 3 anni 7 mesi 19 giorni fa!

Tutto scorre, tutto cambia, molto probabilmente non sono più la stessa persona di allora. Smile

slider

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:

  • metadatiStudio 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”.
  • wireframeWireframe 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:

  1. Installazione di WordPress
  2. 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
  3. 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
  4. 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
  5. Configurazione della gestione dei metadati
    Ttramite plug-in Advanced custom fields ho aggiunto i vari metadati necessari al pannello di gestione
  6. Implementazione di codice semantico  Schema.org
    N
    el 2014 usare codice HTML compatibile con le specifiche Schema.org è un ottimo metodo per migliorare l’indicizzazione
  7. 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
  8. 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
  9. Personalizzazione dei breadcrumbs del sito
    Per ottimizzare l’indicizzazione ho impostato codice semantico (RDF breadcrumbs)
  10. Creazione dei vari template WordPress
    Basandomi sulla progettazione wireframe di cui sopra ho creato i vari template
  11. Implementazione di script personalizzati
    Ho ottimizzato la galleria di foto di WordPress ([ gallery shortcode] ) tramite il plugin Royal slider
  12. Ottimizzazione della gestione degli asset multimediali
    Per semplificare la gestione di immagini ed allegati ho usato plugin e codice ad hoc
  13. 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
  14. 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”
  15. 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
  16. 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
  17. Network di siti Quasar
    networkQuasar 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.
  18. 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 Smile.

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 Wink
  • 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
    socialsocialCounterQuasar 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”.

UPDATE 1 (07/05/2014 @ 13:10): come ho scritto su Twitter, ho ridotto i tempi di caricamento del 50% implementando una CDN. Resta ancora molto da fare, ma in 24 ore sono piccole soddisfazioni

 

UPDATE 2 (28/05/2014 @ 17:30): ennesima riduzione dei tempi di caricamento! Oltre ai tanti piccoli accorgimenti SEO, oggi finalmente il sito implementa tecniche di DEFERRED LOADING dei javascript/css per cui…beh i tempi dell’immagine parlano da soli! E se non bastasse “faster than 74% of all tested websites” dovrebbe chiarire il tutto Wink

speedtestQuasar

E ora continuiamo a lavorare per migliorare il tutto.