Architettura del sito e menu prima del design: guida al rifacimento del sito aziendale
Come decidere mappa del sito e menu prima della grafica: gruppi di pagine, profondità, link scansionabili e URL chiari, con esempio e checklist.
- Nº
- 08
- Pubblicato
- Lettura
- 11 min
- Categoria
- Notes
- Scritto da
- Revylio
Architettura del sito e menu prima del design: la risposta in breve
Fissare architettura del sito e menu prima del design significa decidere quali pagine esistono, come si raggruppano e come si collegano. Tutto questo avviene prima di disegnare qualsiasi schermata. In un rifacimento questa sequenza evita di ridisegnare layout già approvati. Il risultato è anche una navigazione coerente, verificabile per l'accessibilità e leggibile dai motori di ricerca.
L'architettura del sito è l'elenco ordinato delle pagine di un sito, con i loro gruppi e i loro livelli. Comprende anche i collegamenti tra una pagina e l'altra. Il menu ne è la parte visibile: mostra al visitatore i gruppi principali e le pagine che l'azienda considera più importanti.
Questa guida tratta quattro decisioni:
- come raggruppare le pagine;
- quanti livelli di profondità ammettere;
- come costruire link che Google riesce a seguire;
- come scrivere URL che descrivono la pagina.
Il lavoro sui testi viene prima di queste quattro decisioni. La guida su come preparare i contenuti per il nuovo sito con inventario e decisioni lo spiega passo per passo. Qui si parte dall'inventario già fatto.
Perché decidere la struttura prima del design evita rifacimenti costosi
La struttura decide la forma del design, non il contrario. Un menu con cinque voci richiede un'intestazione diversa da un menu con nove voci e due livelli di sottomenu. Se il numero di voci cambia dopo l'approvazione grafica, intestazione, versione mobile e piè di pagina vanno ridisegnati.
Lo stesso vale per i modelli di pagina. Una pagina di categoria che elenca dieci servizi ha bisogno di un modello diverso da una pagina che ne elenca due. Se i gruppi non sono decisi, il designer disegna su ipotesi. Ogni ipotesi sbagliata diventa una revisione da pagare.
Nei rifacimenti che seguiamo in Svennis facciamo approvare per iscritto la mappa delle pagine e le etichette del menu prima di aprire il primo bozzetto. Quando questo passaggio salta, vediamo il menu cambiare a grafica già consegnata e i modelli di pagina tornare sul tavolo del designer.
C'è poi un motivo di tempo. Google indica che alcune modifiche hanno effetto in poche ore e altre richiedono diversi mesi, come spiega la guida introduttiva alla SEO di Google Search Central. Cambiare struttura e URL due volte nello stesso anno significa chiedere due volte a Google di riordinare il sito. Per capire se il Suo caso richiede un rifacimento completo, è utile la guida su quando conviene rifare il sito e quando basta un intervento mirato.
Come Google legge menu e link interni di un sito aziendale
Google trova le pagine soprattutto attraverso i link presenti in pagine che ha già scansionato. I suoi programmi di scansione, chiamati crawler, esplorano il web di continuo in cerca di pagine da aggiungere all'indice. Il menu e i link interni sono quindi la strada che il crawler percorre dentro il Suo sito.
Google dichiara che le strutture di navigazione, come i menu e i link tra pagine, possono influire sulla sua comprensione della struttura del sito. Analizza le relazioni tra le pagine in base ai collegamenti per individuare i contenuti migliori. Una pagina linkata dal menu, dalla home e da molte altre pagine viene letta come più importante.
Due conseguenze pratiche
La prima riguarda la ricerca interna. Google afferma che Googlebot in genere non inserisce ricerche nella casella di ricerca di un sito durante la scansione. Una pagina raggiungibile solo cercandola con il motore interno rischia di non essere trovata.
La seconda riguarda le pagine orfane, cioè pagine che nessun'altra pagina collega. Google raccomanda che ogni pagina importante riceva un link da almeno un'altra pagina dello stesso sito. Quando non è possibile collegarle tutte, suggerisce una sitemap. La sitemap è un file che contiene tutti gli URL del sito che Le interessano. La sitemap è un complemento ai link, non un sostituto della struttura.
Raggruppare le pagine per argomento e per domanda del visitatore
Le pagine si raggruppano in base a ciò che il visitatore cerca, non in base all'organigramma aziendale. Un cliente cerca "finestre in PVC" o "assistenza dopo l'installazione". Non cerca "Ufficio commerciale" o "Divisione B2C". I gruppi del menu dovrebbero usare le stesse parole del cliente.
Un metodo semplice parte dall'inventario dei contenuti e procede in tre passaggi:
- scrivere ogni pagina su una riga, con lo scopo in una frase;
- unire le pagine che rispondono alla stessa domanda del visitatore;
- dare a ogni gruppo un nome che il cliente userebbe in una ricerca.
Due pagine che rispondono alla stessa domanda vanno spesso fuse. Google chiama contenuto duplicato lo stesso contenuto mostrato sotto URL diversi. In quel caso il motore sceglie un solo URL da mostrare, l'URL canonico. Google precisa che il duplicato non viola le sue norme antispam, ma può dare un'esperienza peggiore. Fondere le pagine in fase di architettura è più economico che gestire i duplicati dopo il lancio.
Ogni gruppo diventa poi una voce del menu principale o una pagina di categoria. Le pagine che non rientrano in nessun gruppo sono un segnale. Possono essere superflue, oppure manca un gruppo.
Profondità del sito: quanti clic servono per arrivare alle pagine importanti
La profondità del sito è il numero di clic necessari per raggiungere una pagina partendo dalla home. Google indica di poter usare il numero di link da seguire per raggiungere una pagina, insieme al numero di link verso quella pagina, per dedurne l'importanza relativa. Una pagina sepolta in profondità e collegata da un solo punto comunica poca importanza.
Per un sito aziendale questo si traduce in una regola di progetto. Le pagine che portano richieste, come i servizi principali e la pagina contatti, devono stare vicine alla home e ricevere link da più punti. Le pagine di approfondimento possono stare un livello più in basso.
Google suggerisce un'idea simile per i negozi online. Se un prodotto vende molto, conviene collegarlo dalla home o da altri contenuti, come articoli del blog o newsletter. Lo stesso ragionamento vale per il servizio di punta di un'azienda.
Quando la profondità diventa un problema serio
Google precisa che, oltre qualche migliaio di URL, l'organizzazione dei contenuti può influire su scansione e indicizzazione. Avverte anche che, se le pagine di categoria non collegano tutti i prodotti, Googlebot potrebbe non trovarli con la sola scansione. Per un catalogo esteso la struttura delle categorie va quindi progettata insieme ai link verso ogni scheda.
Link scansionabili nel menu: elemento a con href e testo descrittivo
Un link scansionabile è un link che il crawler di Google riesce a leggere e a seguire. Google spiega che, in generale, può seguire un link solo se è un elemento HTML <a> con attributo href. I link in altri formati, in gran parte, non vengono estratti. Lo stesso vale per gli elementi che funzionano da link solo grazie a eventi JavaScript.
L'esempio seguente mette a confronto link corretti e link da evitare. Non va incollato in una pagina: va consegnato a chi sviluppa il menu, insieme alla mappa del sito.
<!-- Link che Google puo seguire: elemento a con href -->
<a href="/serramenti/finestre-pvc">Finestre in PVC</a>
<a href="/assistenza/richiedi-preventivo">Richiedi un preventivo</a>
<!-- Logo come link: il testo alt dell'immagine fa da testo del link -->
<a href="/"><img src="/logo.svg" alt="Serramenti Esempio, pagina iniziale"></a>
<!-- Da evitare: Google non estrae in modo affidabile questi URL -->
<a onclick="goto('/serramenti/finestre-pvc')">Finestre in PVC</a>
<span onclick="goto('/assistenza')">Assistenza</span>Nelle prime righe si cambiano l'indirizzo dopo href e il testo tra i tag. Nella riga del logo si cambia il testo alt: per le immagini usate come link, Google usa quel testo come testo del link. Le ultime due righe mostrano il formato da non usare.
Il testo del link (anchor text) è il testo visibile di un link. Dice alle persone e a Google qualcosa della pagina di destinazione. Google lo vuole descrittivo, ragionevolmente conciso e pertinente alle due pagine. Se il menu inserisce il testo con JavaScript, Google consiglia di verificarlo nell'HTML visualizzato con lo strumento Controllo URL. I dettagli sono nella guida di Google sui link scansionabili.
URL che descrivono la pagina, e cosa Google ne fa davvero
Un URL descrittivo è un indirizzo che dice di cosa parla la pagina, come /serramenti/finestre-pvc al posto di /pagina.php?id=482. Va deciso in fase di architettura, perché ogni URL cambiato dopo il lancio richiede un reindirizzamento.
Su un punto conviene essere precisi. Google afferma che, in genere, non guarda la struttura degli URL per capire la struttura del sito. Per Google contano i link: menu, link tra pagine, testo dei link. Un URL con le cartelle in ordine non sostituisce quindi un menu ben costruito.
Gli URL descrittivi restano comunque utili, per ragioni che riguardano le persone. Chi riceve un link via email capisce dove porta. Chi gestisce il sito riconosce le pagine nei report. Chi pianifica la migrazione abbina più facilmente vecchi e nuovi indirizzi.
Tre regole pratiche per gli URL del nuovo sito:
- usare parole in minuscolo separate da trattini;
- evitare date e numeri che invecchiano;
- non riempire l'indirizzo di parole chiave ripetute.
L'ultima regola ha una base precisa: Google considera il keyword stuffing una violazione delle sue norme antispam. Se il rifacimento cambia gli indirizzi esistenti, la checklist della migrazione per non perdere traffico da Google spiega come gestire i reindirizzamenti.
Esempio guidato: la mappa del sito di un'azienda di serramenti
L'esempio riguarda un'azienda immaginaria di serramenti con 34 pagine nel vecchio sito. Il menu attuale ha nove voci: tra queste "Chi siamo", "Mission", "Storia", "Prodotti", "Novità" e "Area riservata". Le finestre in PVC, il servizio più richiesto, si raggiungono solo con quattro clic o con la ricerca interna.
Dall'inventario dei contenuti emergono tre domande ricorrenti dei clienti: quali prodotti esistono, come si chiede un preventivo, cosa succede dopo l'installazione. "Chi siamo", "Mission" e "Storia" rispondono alla stessa domanda. Vengono fuse in un'unica pagina "L'azienda".
Il nuovo menu principale ha cinque voci:
- Serramenti, con le pagine Finestre in PVC, Finestre in legno, Porte d'ingresso;
- Preventivo, una pagina con il modulo di richiesta;
- Assistenza, con manutenzione e garanzia;
- L'azienda, con storia e certificazioni;
- Contatti.
Ora le Finestre in PVC sono a due clic dalla home. Ricevono link dal menu, da un riquadro in home e dalle pagine di assistenza. Il loro URL diventa /serramenti/finestre-pvc. L'"Area riservata" esce dal menu principale e va nel piè di pagina, perché serve solo ai clienti esistenti.
Le notizie restano sul sito ma lasciano il menu principale. Ogni notizia collega la pagina prodotto di cui parla, quindi nessuna pagina resta orfana. Solo a questo punto il designer riceve la mappa: sa quante voci ha l'intestazione e quanti modelli di pagina disegnare.
Checklist delle decisioni da prendere prima del primo bozzetto
La tabella riassume le decisioni di architettura da chiudere prima della grafica. Per ciascuna indica come verificarla e su quale indicazione di Google si appoggia, dove esiste.
| Decisione | Come verificarla | Indicazione di Google |
|---|---|---|
| Gruppi del menu principale | Ogni gruppo risponde a una domanda del cliente | Menu e link tra pagine influiscono sulla comprensione della struttura |
| Pagine che portano richieste | Raggiungibili in pochi clic e linkate da più punti | Numero di link e clic per arrivarci indicano l'importanza |
| Pagine orfane | Ogni pagina riceve almeno un link interno | Ogni pagina importante va collegata da un'altra pagina |
| Formato dei link del menu | Elementi <a> con href, niente eventi JavaScript | Google segue in genere solo link di questo tipo |
| Testo dei link | Descrittivo, conciso, senza parole chiave ripetute | Il keyword stuffing viola le norme antispam |
| Pagine fuse o eliminate | Nessuna coppia di pagine con lo stesso scopo | Il contenuto duplicato peggiora l'esperienza |
| URL delle nuove pagine | Parole chiare, minuscole, separate da trattini | Google in genere non usa gli URL per capire la struttura |
| Pagine non collegabili | Elencate nella sitemap | Sitemap quando non si possono collegare tutte le pagine |
Google raccomanda inoltre i dati strutturati per aiutarlo a capire lo scopo delle diverse pagine. È una decisione da segnare già nella mappa, accanto a ogni modello di pagina. Dopo il lancio, Google suggerisce di attendere qualche settimana prima di valutare l'effetto delle modifiche nei risultati di ricerca.
Cosa significa per un'azienda italiana: lingue, accessibilità e crawler dagli Stati Uniti
Per un'azienda italiana l'architettura deve funzionare anche per un visitatore che arriva dall'estero. Google indica che il suo crawler opera in genere dagli Stati Uniti. Se il sito reindirizza i visitatori in base al Paese, Google potrebbe vedere una versione diversa da quella pensata per i clienti italiani. Ogni versione linguistica va quindi raggiunta con link normali nel menu, non solo con un reindirizzamento automatico.
Un sito in italiano e inglese ha in pratica due architetture. Le decisioni della checklist vanno ripetute per ciascuna lingua. Le etichette del menu vanno scritte nelle parole che usano i clienti di quel mercato, non tradotte alla lettera.
Accessibilità del menu
Il menu è uno degli elementi su cui si verifica la conformità a WCAG 2.1 AA, lo standard di riferimento per l'accessibilità dei siti. Se la Sua azienda rientra nell'European Accessibility Act, la struttura della navigazione va pensata già con quei requisiti. La guida su chi è obbligato dall'EAA e cosa verificare per primo aiuta a capire se il Suo sito è coinvolto.
Una nota sui titoli interni. Google precisa che, dal punto di vista della ricerca, non conta se i titoli seguono l'ordine gerarchico. L'ordine dei titoli resta però una scelta da fissare per i visitatori, non per Google.
Prossimi passi: dalla mappa del sito al brief per il designer
Il primo passo concreto è mettere la mappa del sito su un unico documento condiviso. Per ogni pagina servono una riga con il titolo, il gruppo di appartenenza, l'URL previsto e le pagine da cui riceve link.
La sequenza consigliata, prima di qualsiasi bozzetto grafico:
- completare l'inventario dei contenuti e decidere cosa fondere o eliminare;
- definire i gruppi del menu con le parole dei clienti;
- controllare la profondità delle pagine che portano richieste;
- scrivere gli URL delle nuove pagine;
- passare la checklist e farla approvare per iscritto.
La mappa approvata entra poi nel brief per il designer e per chi sviluppa il sito. La guida su come scrivere il brief per il rifacimento del sito aziendale mostra dove inserirla e con quale livello di dettaglio.
Se preferisce affidare l'intero percorso, dalla struttura alla messa online, la pagina dedicata al rifacimento e restyling del sito web descrive come Revylio lo organizza.