Il restyling di un sito internet: non solo grafica

Da quando hai messo online il tuo sito, o quello di un tuo cliente, di tempo ne è passato ed è giunto davvero il momento di dare il via a un’operazione di restyling grafico e dei contenuti.

Con la nuova grafica il design del sito è nettamente migliorato, si adatta ai trend del momento e il prodotto finale risulta molto più fresco, pulito e accattivante.

Ma lavorare al restyling di un sito web è solo e soltanto questione di grafica o bisogna tener conto anche di altri aspetti altrettanto importanti?

Un esempio? Non bisogna sicuramente dimenticare di effettuare un’analisi del posizionamento del sito e delle singole pagine per evitare di perdere dati e posizioni importanti sui motori di ricerca.

Ecco quindi una serie di accorgimenti da mettere in pratica prima di pubblicare la nuova versione grafica del vostro sito (o di quello di un cliente).

Da dove iniziare

21_01_01

La maggior parte dei siti web online sta attraversando una fase di restyling in modo da traslare verso una struttura responsive che si adegui al 100% alla navigazione da device diversi dal classico pc.

Le statistiche ormai parlano chiaro:

  • l’accesso a internet da telefono cellulare/smartphone è stato confermato dal 40,9% degli individui (19,3 milioni di utenti)
  •  l’accesso da tablet confermato dal 10,1% degli individui (4,8 milioni di utenti) (Fonte Audiweb di Giugno 2013)

Avere un sito che abbia un design completamente responsive è quindi senza ombra di dubbio una porta di accesso in più alla visibilità del proprio cliente sul web rispetto ai competitors.

Gli step potrebbero essere i seguenti:

  • Scegliere la struttura: semplice, essenziale, in modo che si adatti al meglio al design responsive. Questo elemento è importante perché chi naviga da smartphone deve poter caricare le pagine web in pochi secondi, senza dover perdere tempo per intuire dove sia possibile trovare il contenuto che gli interessa. La semplicità della struttura è essenziale perché nessun utente che ha bisogno di dati immediati ha voglia di vedere scorrere avanti agli occhi km di testo.
  • Organizzare i contenuti creando un’organigramma di come li vorremmo presentare: Più si è semplici e chiari e meglio è. Creare una struttura logica e immediata per raggiungere i contenuti vi farà ricordare, tra gli utenti, come brand esaustivo.
  • Verificare quali pagine hanno avuto numerosi link che puntassero a esse: Per capire cosa può essere andato bene nel progetto iniziale e quindi cosa ottimizzare nel restyling.
  • Individuare quali sono le pagine indicizzate dai motori di ricerca: A quali parole chiave i motori di ricerca hanno fatto più caso? Perché? La semantica delle pagine era migliore rispetto alle altre? I meta tag erano più ricchi? Porsi queste domande è importante per capire quali punti vanno ottimizzati nell’operazione di aggiornamento del sito.
  • Individuare quali pagine hanno avuto il miglior posizionamento sui motori di ricerca: Consiglio sempre di valutare bene ciò che si eredita dal vecchio sito per poterlo migliorare ancora.
  • Prendere nota di tutti i tag, meta tag e titoli delle pagine: Possono sempre tornar utili per studiare ciò che si è fatto, ed eventualmente decidere di cambiare strategia o mantenere la linea d’azione adottata sino al momento di restyling grafico del sito.
  • Verificare quali sono le immagini indicizzate e ormai facenti parte dell’omogeneità del brand: Personalmente le reputo molto importanti. Ancor di più se sono ben posizionate sui motori di ricerca.
  • Individuare quali sono state le pagine più amate dagli utenti dal punto di vista della navigazione e quali quelle con il maggior numero di condivisioni sui social: Sicuramente verificare quali pagine hanno portato maggiori conversioni e su quali social sono stati condivisi i contenuti del sito è molto importante per capire in che modo un’azienda potrebbe presentarsi meglio sul web. Converrebbe aprire una fan page su Facebook, un profilo Twitter o entrambi? Ad esempio, se sto facendo il restyling a un mio cliente fotografo e le sue foto son state molto apprezzate, valuterei lo sbarco su Pinterest e così via.
  • Capire quali sono le pagine peggiori che hanno avuto un’alta frequenza di rimbalzo: Se la pagina era utilizzata per l’atterraggio di campagne AdWords bisognerà migliorarla per la call to action o quantomeno nei contenuti che probabilmente non sono inerenti a ciò che gli utenti stanno cercando.
  • Verificare quali pagine sono ancora attive come atterraggio per il PPCÈ importante non lasciare link orfani per il pagamento di campagne, sia in termini di budget che di serietà del sito verso gli utenti.
  • Ricordare di attivare i code “301”, “503” e rivedere, magari anche graficamente, i “404”: 301 è utile per il reindirizzamento di vecchie pagine o di link orfani; il 503 serve a indicare ai motori di ricerca che il sito è solamente in manutenzione, pertanto di non considerare eventuali errori; 404 è la pagina rimossa e non trovata, il classico “Not found”.

Una volta stabilito che il sito dopo il restyling dovrà essere completamente fruibile anche da mobile, bisogna valutare quali contenuti ereditare dal vecchio, rinfrescandone i testi e, magari, implementando qualche sezione che ha portato più visite da parole chiave specifiche.

Riuscirai così a non far perdere al sito posizioni importanti nelle SERP che potrai invece incrementare ulteriormente.

Ti elenco alcuni degli strumenti che potresti utilizzare per le tue analisi:

Un esempio di restyling

21_01_02

Questo è un portale che cercherò, prima o poi, di rimettere a nuovo.

Il portale era nato come un progetto di gestione del tempo libero e quindi anche come portale di consultazione di numeri utili relativi alla città di Alba (CN) (eventi, orari dei trasporti, orari delle varie farmacie di turno, ecc). Col tempo è stato abbandonato ed è diventato, più che altro, quasi una directory.

La mia intenzione, a breve, sarà quello di ottimizzarlo per proporre agli utenti altre info relative alla città, ma non solo.

Schermata 2014-01-16 alle 13.04.37

Per prima cosa faccio un’analisi dei backlinks utilizzando il servizio fornito da Integrity (con cui mi trovo bene) e passo ad esportare solamente i bad links.

integrity

Sopra: un’immagine dell’elaborazione di Integrity

Una volta individuati i link errati (in rosso), proseguo creandomi un export in .xls, avendo cura di separare quelli che puntavano a link esterni da quelli che erano i link interni.

Valuto quindi quali tenere e quali correggere.

Per esempio, nel caso del mio sito da sistemare, aggiornerei i link esterni che rimandano a informazioni sui mezzi di trasposto e i collegamenti urbani e interurbani, fonti importanti per chi consulta le pagine degli orari.

Mantengo, invece, tutti quei link che puntano a numerose pagine interne al portale, che potranno essere rinominate o cestinate subendo un reindirizzamento verso le nuove pagine.

È bene conservare le pagine a cui puntano molti link, se di qualità, poiché in questo modo il sito risulterà più appetibile ai motori di ricerca.

Questo perché per i motori di ricerca vale il seguente ragionamento: “se molti link di qualità puntano verso quella pagina vorrà dire che la pagina è buona”.

Ovviamente vale lo stesso discorso per la situazione opposta. Se pochi (o nessun) link punta verso quella pagina, vorrà dire che non ha grande valore.

Modificherei, quindi, le pagine che non convertono, che hanno avuto poche visite o che non hanno link che puntino ad esse.

Inizio così a creare la disposizione delle voci del nuovo menù di navigazione. Lo studio dell’architettura di informazione potrà per molti essere tediosa, ma la buona riuscita di questa porterà benefici in termini di navigabilità ed organizzazione.

Manutenzione e inizio lavori

21_01_03

Prima di mettere mano al restyling del sito e cominciare a cambiare qualcosa internamente, posiziono il sito in code 503, giusto per comunicare ai motori di ricerca che il sito è in manutenzione e non fargli perdere posizionamenti.

 Pagine interne: cosa farne?

21_01_04

Inizio con il reindirizzare le vecchie pagine a quelle nuove create, usando il code “301” seguendo la logica:

- www.albafreetime.it/vecchia_pagina.html > www.albafreetime.it/nuova_pagina.html

Se hai cambiato dominio, CMS o codice con cui hai programmato il sito è bene utilizzare un 301 da .htaccess

Esempio: www.albafreetime.it > www.albafreetime.co.uk

Per maggiori info sul code “301” rimando i lettori a questa guida di Google.

Per un ritiro di cambiamento di indirizzo, consiglio di guardare anche questo link di Google.

Con Majestic SEO mi faccio un’idea dei link in entrata più influenti e tengo conto delle pagine a cui puntano per non perdere quelle mie pagine appetibili per i siti esterni.

Su quelle che decido di mantenere, e che hanno avuto più visite, incremento i meta tag e i title con le parole specifiche che gli utenti hanno digitato nelle loro ricerche: rivedo i titoli dei paragrafi senza variarli di molto, arricchisco i contenuti dell’argomento e decido di creare una serie di link che da questa pagina puntino, a tema, a quelle che andrò creando.

organigramma

  • “Approfondimento A”: parola chiave più ricercata dagli utenti e quindi sfruttata per creare una nuova pagina che parli di quell’argomento più nello specifico.
  • Argomento: pagina più vista dagli utenti e/o egregiamente posizionata sui motori di ricerca con titolo “Approfondimento A” che linkerà alla pagina chiamata “Approfondimento A” e avente come argomento Approfondimento A.

Proseguendo con l’eredità di pagine da migliorare tengo conto anche delle immagini a cui i navigatori sono abituati o che associano al brand, oltre che all’importanza del posizionamento sui motori di ricerca.

Per quanto riguarda le vecchie pagine che hanno avuto una frequenza di rimbalzo piuttosto elevata, decido di gestirle con l’errore 404 che mi restituisce, magari, anche una grafica piacevole.

404

Es.: La pagina 404 di YIThemes

schermata404

oppure

404_altra

Conclusioni

21_01_05

Una volta inserite le pagine e ricontrollato il tutto, per essere certa di non aver lasciato link orfani, rilancio Integrity e verifico che il tutto funzioni.

Prima di pubblicare è d’obbligo testare, testare, testare.

Un consiglio: al lancio del nuovo sito sarebbe carino informare tutte le persone, aziende e clienti di cui abbiamo la email con una DEM creata con un programma per newsletter gratuito, gradevole e di facile utilizzo.

mailchimp

E tu? Come gestisci i tuoi restyling?

Cosa consiglieresti ancora per migliorare il nuovo sito?

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: , , ,

L'autore

Monica è consulente Web e SEO. Tra i prodotti Adobe quelli che predilige sono Photoshop, Illustrator ed InDesign. Tra un cartaceo ed un e-book è pronta a divorare libri su libri. Perché, in fondo, nel mestiere del web non ci si può mai definire dei grandi esperti: bisogna esser sempre pronti ad imparare e ad aggiornarsi.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

17 commenti

  1. Antonio
  2. Marco
  3. Claudia
  4. Sara

Trackback e pingback

  1. Il restyling di un sito internet: non solo graf...
    […] Da quando hai messo online il tuo sito o quello di un tuo cliente, di tempo ne è passato …

Lascia un Commento

Current day month ye@r *