Come strutturare un sito Web

Finalmente hai deciso di realizzare il tuo sito Web ma, sebbene le idee siano tante e valide, ancora non ti è ben chiaro come organizzarle. Non temere allora: se vuoi, oggi sono qui proprio per darti una mano in tal senso e spiegarti come strutturare un sito Web a seconda delle tue esigenze di comunicazione.

Assodate alcune regole generali, imparerai quali sono le pagine fondamentali da avere all’interno di un sito, sia esso un sito personale, un blog o un sito aziendale. Ma non solo: capirai come definire la gerarchia dei contenuti su di un e-commerce e, se già sei un po’ esperto in materia, potrai destreggiarti nello strutturare un sito con il linguaggio HTML. Ti suggerirò anche alcuni strumenti per facilitarti il lavoro.

Scommetto che, a questo punto, vorrai sapere sùbito in che modo iniziare per mettere online il tuo sito Web quanto prima. Ho indovinato? Bene, allora non devi fare altro che prenderti qualche minuto di tempo libero e leggere quello che ho da consigliarti: vedrai che, in men che non si dica, avrai le idee chiare sulla struttura più funzionale per il sito che realizzerai.

Indice

• Informazioni preliminari
• Come strutturare un sito Web personale
• Come strutturare un sito Web aziendale
• Come strutturare un e-commerce
• Come strutturare un sito Web HTML
• Altri consigli utili

Informazioni preliminari

Perché è importante capire bene come strutturare un sito Web? Tanto per cominciare, i motivi principali possono essere riassunti secondo due punti.

Il primo di essi riguarda la chiarezza di comunicazione: chi navigherà sul tuo sito dovrà capire subito di cosa ti occupi, per poi approfondire cercando maggiori informazioni sul tuo conto e, infine, magari avere la possibilità di interagire, contattandoti.

Con ogni probabilità, in questa descrizione hai già potuto individuare alcuni degli elementi più facilmente riconoscibili della struttura base di un sito, cioè le pagine definite Home page, Chi siamo e Contatti.

Forse avrai anche notato che, nella maggior parte dei casi, il punto di accesso a queste aree di un sito si trova collocato all’interno della parte superiore di esso (sotto forma di menu), quella che tecnicamente è chiamata header.

Potresti, inoltre, imbatterti in delle barre di navigazione laterali (sidebar) e scorrere il corpo centrale di ogni singola pagina, fino a raggiungere la zona situata più in basso, detta footer, che di solito contiene informazioni più tecniche, come ad esempio il link alla pagina della Privacy e Cookie Policy, la cui presenza è obbligatoria su tutti i siti Web. A tal proposito, ti segnalo il servizio iubenda, che con il suo team di avvocati permette di adeguare siti Web e app alle normative di più Paesi e legislazioni senza alcuna fatica.

Già semplicemente riconoscere tutte queste sezioni, quando apri un sito, ti aiuta in modo intuitivo a capire come cercare le informazioni che desideri.

Il secondo punto, per cui è fondamentale strutturare bene i contenuti online, riguarda i browser e i motori di ricerca, il più usato dei quali è senza dubbio Google. Per far sì che il tuo sito possa entrare nella SERP di Google (cioè la pagina con i risultati delle ricerche), devi instaurare un “dialogo” con il suo crawler (cioè quello che si occupa di “scandagliare” i siti da indicizzare poi nel motore di ricerca).

Se vuoi posizionarti bene su Google, devi lavorare in ottica SEO (cioè Search Engine Optimization, ottimizzazione per i motori di ricerca) sul codice sorgente che c’è dietro ogni singolo elemento del sito (non spaventarti, molte cose sono già ottimizzate di default e non dovrai lavorare necessariamente al codice in maniera profonda); inoltre dovrai realizzare contenuti (in primis testi, ma anche immagini e altri elementi multimediali) in maniera “appetibile” per i motori di ricerca (senza perdere mai di vista il valore intrinseco di ciascun contenuto proposto al lettore, che è sempre la cosa più importante).

Per il resto, posso dirti che, in linea di massima un buon sito dovrebbe avere una struttura in cui si pongono le Categorie più generiche di temi trattati in primo piano e, direttamente dipendenti da esse, se ne trovano altre, di volta in volta più specifiche. Questo tipo di struttura è definita a silos e, figurativamente, ogni singola categoria, con i suoi argomenti correlati, rappresenta uno di questi grandi contenitori (devi proprio immaginarti i silos che, ad esempio, contengono diversi tipi di cereali nelle grandi fattorie, affiancati uno accanto all’altro). In questo modello, ciò che si trova dentro un silos non dovrebbe mai “contaminare” il silos collocato vicino.

Tornando a far riferimento a un sito Web, tutto ciò che è descritto mediante precise parole chiave (dette anche keyword) dovrebbe appartenere a una sola categoria, senza essere riprodotto in un’altra sezione del sito, descritta con parole chiave diverse: altrimenti, come si dice in gergo tecnico, gli argomenti finirebbero per essere cannibalizzati da loro stessi e i motori di ricerca non saprebbero più quali indicizzare.

Non temere, non è per niente difficile individuare una struttura del genere all’interno di un sito: ti faccio un esempio pratico proprio attraverso questo blog. Se torni in cima a questa pagina, o quella di un qualsiasi altro articolo, sotto al menu principale della stessa puoi notare delle diciture come Home > Internet > Servizi online > Creare siti internet > Titolo dell’articolo.

Tale schema, che ti consiglio di rendere sempre visibile sul tuo sito Web, è determinato da termini detti breadcrumbs, cioè letteralmente briciole di pane. Proprio come nella famosa fiaba di “Pollicino”, le briciole di pane hanno lo scopo di farsi seguire per condurti a destinazione e, nel caso di un sito Web, di rivelarne la struttura.

Le informazioni che ne ricaverai ti diranno che, nel caso di questo blog, all’interno della Home page, troverai una grande macro-categoria, quella chiamata “Internet”, che contiene tutti gli articoli riguardanti i “Servizi online”, e, a sua volta, racchiude tutti i topic sul tema “Creare siti internet”, in cui è compreso anche il tutorial che adesso stai leggendo.

Lo schema a silos, che va dal tema più generale all’argomento specifico, viene detto verticale. Per evidenziare dei precisi aspetti trasversali, comuni a più argomenti, si usa un sistema orizzontale, cioè i tag.

Un’organizzazione precisa dei contenuti di un sito Web, fa in modo che i visitatori ne percepiscano la leggibilità immediata e, al contempo, gli algoritmi dei motori di ricerca interpretino coerentemente la logica dietro la struttura.

Prima di costruire il tuo sito Web, puoi progettarne la struttura, anche semplicemente disegnando il suo schema (wireframe) su di un foglio. Quindi, quando passerai alla fase operativa vera e propria, ricorda anche di scrivere i testi usando degli strumenti in grado di suggerirti le giuste parole chiave (ti suggerisco lo Strumento di pianificazione delle parole chiave di Google), di utilizzare immagini leggere (ad esempio in formato .png) e di nominare i loro file usando le parole chiave sfruttate pure nei testi, insieme a termini che descrivano effettivamente ciò che le foto rappresentano. Lo stesso vale per altri, eventuali, contenuti multimediali.

Ricordati di inserire dei link interni nelle pagine del tuo sito, cioè che rimandano proprio ad altre pagine presenti nel sito stesso. Questo aiuterà molto i visitatori a velocizzare la navigazione.

Infine, domandati che tipo di sito fa al caso tuo: una pagina personale o un blog, sono chiaramente diversi da un sito aziendale, utile se hai servizi da offrire, così come differente è una landing page o un sito e-commerce, necessario se la tua intenzione è vendere prodotti.

Nei paragrafi che seguiranno ti descriverò proprio le differenze che intercorrono tra i diversi tipi di sito, la loro struttura e gli strumenti migliori per costruirli. Tieni sempre presente che, per quanto questi ultimi possano essere gratuiti, avrai bisogno di registrare un dominio (il nome del sito) e di acquistare uno spazio hosting, che lo ospiterà, insieme ai contenuti che caricherai online. Alcuni servizi forniscono tutto in comodi pacchetti “all-inclusive”, quindi non temere: anche in questo caso, nulla di particolarmente complesso.

Come strutturare un sito Web personale

Quando capisci che conosci degli argomenti interessanti, per i quali hai maturato una certa competenza, oppure vuoi diffondere i tuoi lavori, le migliori soluzioni per te sono il blog (perfetto se prediligi una struttura ad articoli e cerchi un sistema già pronto all’uso per la gestione dei contenuti) e/o il sito portfolio (che puoi sempre strutturare come un blog o anche creare in formato più statico, se il tuo focus sono la promozione personale e i tuoi progetti esterni, di cui magari parli meglio su altri siti dedicati): ecco, dunque, le mie indicazioni su come strutturare un sito Web personale.

In questa tipologia di sito Web, ciò che avrà più spazio saranno gli articoli che scriverai, oppure immagini, video o altri contenuti multimediali in grado di mostrare, ad esempio, i tuoi lavori. Già dalla Home page potrebbero essere richiamati i tuoi argomenti più importanti, gli ultimi post pubblicati e quelli che hanno un’importanza periodica.

Nel caso in cui avessi in mente un vero e proprio blog, puoi prendere ad esempio proprio il mio, per determinarne la struttura, come ti ho spiegato nelle informazioni preliminari di questa guida.

Se i tuoi contenuti sono prevalentemente visivi, nella classica struttura del sito dovrebbe essere integrata una galleria per foto e/o video.

Per far nascere il tuo blog, puoi utilizzare diversi strumenti, anche gratuiti. Tra di essi, quello forse più completo e versatile, che ti permette di strutturare il sito come appena accennato, è un CMS, sigla che significa Content Management System e rappresenta un sistema “prontouso” abbastanza facile per la configurazione di un sito e/o di un blog, destinato anche a chi non è un webmaster. Uno dei CMS più noti, usati e duttili è WordPress: dopo aver acquistato dominio e hosting per il tuo sito, ti basterà raggiungere il sito ufficiale di WordPress, scaricare il CMS e installarlo sul tuo spazio Web, per dare immediatamente vita al tuo sito. In alternativa, puoi creare un blog WordPress, gratuito o a pagamento (con acquisto di dominio e spazio Web direttamente tramite il servizio) partendo da quest’altro sito di WordPress. Tieni presente che la versione gratuita di WordPress non permette di monetizzare il sito con le pubblicità.

In alternativa a WordPress, se la tua intenzione è creare un blog gratuito senza troppe pretese, puoi prendere in considerazione la piattaforma Blogger di Google, che permette anche di monetizzare i contenuti tramite gli annunci di AdSense. Maggiori info qui.

Quando avrai maturato un po’ di esperienza, se lo vorrai potrai anche mettere a frutto i tuoi sforzi spesi per mettere su il blog: si tratta infatti di uno strumento particolarmente adatto per vendere spazi pubblicitari o link. A tal proposito, puoi provare a leggere la mia guida su come fare link building e, più in generale, su come guadagnare con un blog.

Qualora, poi, desiderassi davvero impegnarti per ottenere risultati con il tuo sito Web personale, leggi anche la mia guida su come creare un blog di successo.

Come strutturare un sito Web aziendale

Magari hai un’attività che desideri far conoscere e promuovere, quindi ciò che ti starai chiedendo è come strutturare un sito Web aziendale.

Anche in questo caso, il ragionamento che farai a monte si rifletterà sulla struttura del sito. Molto importante è avere ben a fuoco qual è la mission della tua azienda, cioè il motivo per cui i tuoi servizi dovrebbero attrarre e interessare uno specifico target di pubblico e qual è la sua vision, cioè con quali modalità pensi di creare e mantenere vivo l’interesse presso la tua audience. Questi dettagli saranno preziosi per dare l’impronta ai contenuti che, successivamente, caricherai online (registro dei testi, tipo di call to action, tono delle immagini e così via).

Sarà poi il momento di scegliere il nome del dominio e acquistare uno spazio hosting, quindi decidere il sistema più adatto per la gestione dei tuoi contenuti Web, presumibilmente un sistema CMS.

Per quanto riguarda la struttura rappresentata dalle pagine, oltre alla Home page, alla pagina Chi siamo e a quella Contatti, sempre indispensabili, è logico pensare di crearne una per ospitare un Portfolio dei lavori eseguiti e/o dei clienti con i quali si è collaborato. Fondamentale sarà la pagina in cui si descrivono i Servizi proposti e in cui avrai cura di evidenziare i Vantaggi che possono portare all’utente. In un’ottica promozionale, potrebbe essere utile anche aggiungere una sezione dedicata a commenti positivi, testimonianze attendibili circa l’attività, cioè delle Storie di successo.

Qualora offrissi anche sconti o vendessi prodotti, potresti pensare alla costruzione di una landing page o a un e-commerce (di questo argomento, però, te ne parlerò nel capitolo successivo).

La struttura di un sito Web aziendale può essere costruita anche utilizzando un sistema CMS, come spiegato nel capitolo dedicato al sito Web personale. Quasi scontato dire che WordPress sia il migliore strumento adatto allo scopo, sebbene possa consigliarti pure Joomla, per la creazione di landing page e Drupal. Per orientarti meglio nel mondo dei CMS, ho scritto una guida che descrive quali sono i migliori CMS in circolazione e, pertanto, ti suggerisco di darle un’occhiata.

Invece, per rendere salde le basi dell’argomento trattato in questo capitolo, ti consiglio di leggere la mia guida su come creare un sito Web aziendale, completa di tutti i passaggi per portare a termine il compito.

Come strutturare un e-commerce

Di questi tempi, avresti proprio bisogno di digitalizzare il tuo negozio, oppure hai proprio intenzione di aprire direttamente una rivendita online. Ottima strategia, ma come strutturare un e-commerce in maniera adeguata e funzionale? Se la questione ti assilla, queste sono le mie indicazioni in merito.

Sebbene progettare un e-commerce sia più elaborato rispetto ad altre tipologie di sito Web, l’importante è sempre andare con ordine, per “sbrogliare la matassa”.
Per prima cosa, come per un sito Web aziendale, è importante che tu conosca i tuoi clienti, il target di riferimento cui interessano i prodotti che vendi. Ciò ti aiuterà nella stesura dei testi e dei contenuti presenti in quelle che sono le pagine più canoniche di un sito, presenti, quindi, anche su di un e-commerce: Home page, Chi siamo, Contatti, alle quali, anche in questo caso, può aggiungersi una pagina Portfolio, quella di relativa a dei Servizi particolari che offri e vuoi porre in evidenza, nonché le opinioni di clienti soddisfatti, se già ne hai.

Oltre a questo, il cuore di un e-commerce sarà rappresentato dai Prodotti e dalle schede che li descrivono. Ognuna di esse, di base, dovrà contenere, nell’ordine, il nome del prodotto, un’immagine, o più di una, che lo mostra in maniera quanto più veritiera possibile, una descrizione precisa e accurata, le eventuali caratteristiche tecniche, taglie, colori, pezzi disponibili in magazzino, prezzo, il pulsante Acquista ben in evidenza e, magari, anche dei prodotti correlati che potrebbero stimolare l’utente a comprare anche altro dal tuo e-commerce.

Dovrai poi prestare attenzione nella gestione del Catalogo, strutturandolo preferibilmente secondo il modello a silos, che ho descritto all’inizio del tutorial, alla configurazione dei Metodi di pagamento e dei contatti che lasciano i loro dati personali: a tal proposito, se svolgi azioni di marketing (tra di esse si possono menzionare anche un eventuale sistema di Login al sito, i cookie e la proposta d’iscrizione alla newsletter ai visitatori del sito) dovrai dichiararlo nella pagina destinata alla privacy policy, così come pensare a inserire delle pagine molto accurate sulle condizioni di vendita, di reso, di recesso e sulle modalità di spedizione della merce. per questi documenti, ti consiglio di rivolgerti a un professionista, ad esempio un avvocato esperto in materia.

Per semplificarti la vita nella creazione di un e-commerce, puoi rivolgerti a servizi come Shopify, il quale permette di avviare un negozio online in pochi clic, sia da desktop che da smartphone o tablet (è disponibile come app per Android e iOS/iPadOS) con prova gratuita di 14 giorni e scegliendo poi fra vari piani: Basic Shopify (29$ al mese) che, tra le altre cose, include la possibilità di gestire un e-commerce e un blog; Shopify (79$ al mese) che aggiunge la possibilità di avere 5 account staff e la possibilità di inserire dei buoni regalo; e infine Advanced Shopify (299$ al mese) che offre il massimo per i business più grandi.

Fatto ciò, in buona sostanza, non ti resterà che creare un account e seguire le indicazioni fornite dal sistema per gestire il negozio, i prodotti al suo interno e gli ordini. Per tutti i dettagli leggi la mia guida su come creare un e-commerce con Shopify.

Se preferisci un’altra soluzione e hai modo di approcciarti a un CMS, prova a utilizzare WooCommerce, l’estensione per l’e-commerce ufficiale di WordPress, disponibile anch’essa in soluzioni pronte all’uso, come quella di Aruba. Per farti un’idea sulle altre piattaforme e-commerce disponibili, leggi la mia guida sul tema.

La mia guida incentrata sul creare un sito ecommerce, invece, può aiutarti ad avere una visione d’insieme del tema.

Come strutturare un sito Web HTML

L’idea di costruire il tuo sito Web senza utilizzare necessariamente un sistema “preconfezionato” ti stimola e, in fondo, sai che con un po’ d’impegno puoi riuscire facilmente nell’impresa. Se vuoi posso darti anche qualche suggerimento su come strutturare un sito Web HTML.

Per cominciare, HTML è un linguaggio dichiarativo di markup, cioè un sistema che aiuta i programmi in grado di interpretare il codice sorgente ad avere indicazioni precise sulla gerarchia degli elementi presenti, ad esempio, all’interno di una pagina Web (che, se costruita con tale linguaggio, è definita anche statica).

Ti avviso già che, molto probabilmente, per la realizzazione del tuo sito Web HTML, dovrai abbinare a questo linguaggio anche il CSS, per il design e il tratto stilistico delle pagine, e quello JavaScript, adatto a creare delle azioni interattive sul sito.

A questo punto, ti consiglio di leggere la mia guida su come creare un sito Web HTML, per capire come costruire ogni singola pagina, strutturando gerarchicamente i contenuti. Dopodiché potrai unirle in un framework, un metodo che aiuta a strutturare un sito Web in modo tale da adeguare la sua visualizzazione in base ai diversi browser, di ottimizzarne la velocità di caricamento, personalizzare gli aspetti grafici e così via.

Tra le migliori risorse liberamente utilizzabili per strutturare un sito Web HTML non posso che consigliarti Bootstrap: una sorta di libreria che contiene innumerevoli modelli HTML, CSS e anche JavaScript. Se t’intendi un po’ della materia, potresti anche domandarti come strutturare un sito Web PHP: in tal caso prova a consultare questo link.

Altri consigli utili

Per concludere questo tutorial, vorrei lasciarti poche altre informazioni utili, che possono comunque aiutarti nel tuo approccio su come strutturare un sito Web.

• Ottimizza il sito per smartphone e tablet, tieni presente che oggi tutti noi navighiamo prevalentemente con questi strumenti. La maggior parte dei CMS prevede questo tipo di ottimizzazione in maniera automatica (responsive), tuttavia ti consiglio di fare sempre una verifica, mentre costruisci il sito.
• Cura l’esperienza di utilizzo del sito Web, ad esempio calcolando il minor quantitativo possibile di clic che permetteranno al futuro utente di raggiungere le informazioni che cerca. Studia tali possibilità nella fase di costruzione di menu e categorie del sito (alberatura o architettura di navigazione).
• Usa I social network per promuovere il tuo sito. Ormai, se non si è sui social network non si “esiste”, dunque cerca di promuoverti su Instagram, Facebook, Twitter, TikTok e così via, in modo da ampliare il tuo pubblico e instaurare un dialogo con quest’ultimo.
• Usa Yoast SEO, un plugin per l’ottimizzazione dei contenuti, se lo strumento di cui ti servi per realizzare il sito lo consente.
• Una volta terminato il sito, invia la sitemap (proprio la mappa del sito) a Google attraverso lo strumento Google Search Console: se usi WordPress e Yoast il tuo compito sarà molto facilitato, infatti ti basterà caricare un file .xml fornito, che racchiude la struttura del sito. Questa sarà messa a disposizione del motore di ricerca.
• Utilizza Google Analytics per capire, nel tempo, come gli utenti interagiscono con il tuo sito e, dai dati ricavati, cambia parti della struttura se ritieni che non ti portano i risultati sperati, in quanto, magari, chi naviga può trovarle poco intuitive o funzionali.
• Se hai un e-commerce, o in ogni caso vendi qualcosa, leggi la mia guida su come fare business online.

Autore

Salvatore Aranzulla

Salvatore Aranzulla è il blogger e divulgatore informatico più letto in Italia. Noto per aver scoperto delle vulnerabilità nei siti di Google e Microsoft. Collabora con riviste di informatica e cura la rubrica tecnologica del quotidiano Il Messaggero. È il fondatore di Aranzulla.it, uno dei trenta siti più visitati d'Italia, nel quale risponde con semplicità a migliaia di dubbi di tipo informatico. Ha pubblicato per Mondadori e Mondadori Informatica.