Come creare un sito web per un’attività locale con l’IA, ottimizzato e capace di convertire

È successo a tutti noi che realizziamo siti web.

Parliamo con un potenziale cliente che gestisce un'attività locale — di quelle in cui i clienti vanno in sede o che offrono servizi nel raggio di pochi chilometri — e se ne esce con: «Un sito semplicino, così possono chiamarmi o scrivermi su WhatsApp».

Semplicino. Certo.

Ovviamente un e-commerce con migliaia di prodotti o un SaaS sono molto più complessi, ma se un'attività vuole trovare clienti attraverso il sito (e di solito spendendo poco o niente in pubblicità), ti assicuro che di semplice c'è ben poco.

Perché, prima ancora di iniziare, bisogna capire cosa offre l'azienda, scoprire come lo cercano i clienti, decidere quali pagine servono, scrivere i testi, scegliere le immagini, costruire moduli, misurare i lead e verificare che tutto funzioni da smartphone.

Se poi vuoi pubblicarlo in più lingue, le decisioni da prendere si moltiplicano.

Ne ho realizzati parecchi. E tutti, tutti, tutti, assolutamente tutti hanno superato gli obiettivi e generato più lead di quelli previsti inizialmente. Ecco perché so di cosa parlo.

Finora avevo un metodo, che comprendeva il marketing indispensabile e che veniva implementato praticamente sempre con WordPress, per ovvi motivi.

Ma ora è arrivata l'IA. E rende facili cose che prima richiedevano molto tempo, erano addirittura ingestibili o semplicemente non valevano la pena. Ora sì. Per questo l'ultimo sito che ho realizzato, quello dell'azienda di trasporti Rondabus, l'ho creato senza CMS, usando un framework di sviluppo, Astro, che non conoscevo, ma che ChatGPT mi ha consigliato dopo che gli ho spiegato cosa cercavo.

E credo sia stata una scelta azzeccata, perché si basa su un'idea che sostengo da sempre: per i siti aziendali che restano invariati per mesi e non servono a pubblicare nuovi contenuti, l'HTML statico offre tre chiari vantaggi:

1. Più veloce.
2. Più sicuro.
3. Non richiede un hosting a pagamento.

Quando parlerò dello stack tecnologico entrerò più nel dettaglio, nel caso il terzo punto ti abbia sorpreso.

Perché avere un sito aziendale con tutto il necessario per generare lead (modulo, email, telefono e WhatsApp), pagando soltanto i circa 3–10 € all'anno del dominio, sembra fin troppo bello.

E invece è vero.

In questa guida ti spiego passo dopo passo come replicare il procedimento. Oltre al dominio, ti serve solo un account ChatGPT a pagamento per analizzare, strutturare, scrivere, tradurre e revisionare, mentre Codex lavora sul codice..

Ovviamente puoi sostituire questi strumenti con altri. Lo dico soprattutto se paghi anche Claude, perché la combinazione di ChatGPT come analista e Claude come sviluppatore è ancora migliore.

Chiarite le esigenze, passiamo alla procedura.

1. Comprendi il progetto e definisci tutto prima di iniziare

La prima cosa è chiedere al cliente di spiegarti:

1. In cosa consiste l'attività.
2. Quali servizi offre.
3. A chi si rivolge.
4. In quali zone opera realmente.
5. Chi sono i suoi concorrenti.
6. Cosa lo distingue da loro.
7. Quali prove può mostrare.
8. Quali azioni vuoi che compia chi visita il sito. In altre parole, come il canale digitale porterà clienti e lavoro all'azienda.

Insieme a queste informazioni, bisogna definire (tu, il cliente o entrambi):

• Il dominio.
• Canali di contatto (telefono, WhatsApp, email, modulo…)
• Lingue previste.
• Stesura dei testi.
• Fotografie o immagini.
• Se verranno pubblicati regolarmente nuovi contenuti.

Tutto questo servirà sia a te sia all'IA.

Qui distinguiamo tre tipi di decisioni:

1. Quelle di business stabiliscono cosa si vende e a chi.
2. Quelle relative a contenuti e design stabiliscono cosa si comunica e come lo si presenta.
3. Quelle tecniche stabiliscono come il sito viene realizzato, pubblicato e mantenuto.

Una volta definito tutto, annota le decisioni in un brief e un documento dei requisiti (PRD) prima di iniziare a costruire le pagine. Passandoli a ChatGPT come documento, evitiamo di dovergli rispiegare in ogni conversazione qual era il dominio giusto, quali pagine erano state approvate o da dove arrivassero telefono ed email.

La tecnologia, a questo punto, è indifferente. Il metodo funziona con WordPress, Astro o qualsiasi altro sistema: tieni un riferimento chiaro per le decisioni e una fonte distinta per i dati aziendali.

Consegna prevista

Un breve brief e un PRD completo, con approvazioni, decisioni in sospeso, obiettivi di conversione, materiali disponibili e responsabili.

Quando cambia una decisione, aggiorna il PRD di persona oppure chiedi a Codex di farlo per te.

2. Crea dei mockup per decidere il design

Prima di chiedere a Codex di programmare qualcosa, è meglio preparare due o tre proposte che permettano di confrontare gli approcci. Non devono essere tre siti completi: di solito basta la homepage o una pagina di servizio per ogni proposta, per farsi un'idea dell'aspetto generale del progetto.

Attenzione, però: è importante mostrare anche la versione mobile per evitare sorprese.

È la prima cosa che chiederemo a Codex.

Come punto di partenza, esploriamo tre concept per una pagina di servizio. Possono essere chiari o scuri, oppure usare colori e stili diversi. Scegli ciò che credi più adatto al progetto, ma chiedine tre. Due sono pochi, quattro o cinque cominciano a essere troppi.

Una volta affiancate le alternative, controlla che la proposta includa i moduli necessari, che i testi siano corretti (tuoi o generati da ChatGPT), che il numero di telefono o WhatsApp sia ben visibile, che il modulo chieda solo le informazioni indispensabili, che le immagini rappresentino bene il servizio e così via. Insomma, verifica che rispetti i principi essenziali della CRO..

Dopo aver apportato le modifiche necessarie, puoi mostrarle al cliente per avere un parere e spiegargli quale delle tre ritieni migliore. Ma fai attenzione che ciò che gli mostri sia il più vicino possibile al design finale, non una vaga approssimazione. Il cliente non è necessariamente abituato al tuo stesso livello di astrazione nella progettazione dei siti.

Consegna prevista

Mockup con direzione visiva approvata, versioni desktop e mobile, elenco dei componenti comuni (header, footer, icone, hero con modulo…) e dei dettagli da rispettare durante l'implementazione.

3. Fai una rapida analisi di mercato sul campo

Non serve uno studio di cento pagine per decidere la struttura iniziale di un sito locale. Servono abbastanza dati per non scegliere le pagine a intuito: né al tuo né, peggio ancora, a quello del cliente. L'analisi comprende due parti: domanda e concorrenza..

Analisi della domanda: cosa, quanto e dove cercano gli utenti

La prima cosa da capire è se esiste una domanda per ciò che offre il cliente o se bisogna crearla. E, soprattutto nel caso delle attività locali, quanta domanda esiste nella sua area di servizio..

A questo proposito trovi qui un articolo completo, passo dopo passo, sullo studio della domanda per l'e-commerce, ma qui sotto te lo riassumo e lo adatto a un sito per un'attività locale.

Prepara un primo elenco di servizi usando le parole che userebbe un cliente. Aggiungi varianti, esigenze e riferimenti geografici. Ecco un esempio del mio caso:

• Noleggio autobus.
• Noleggio autobus Ronda.
• Trasporto per matrimoni.
• Autobus matrimonio Ronda.
• …

Chiaro, no?

Poi controlla quali ricerche mostrano un'intenzione di acquisto, quali cercano informazioni e quali combinano servizi che dovrebbero condividere la stessa pagina. Per esempio, «noleggio autobus per matrimoni», «pullman per invitati al matrimonio» e «trasporto per una cerimonia» rispondono a esigenze simili. Non servono tre pagine solo perché esistono tre formulazioni. Invece, «trasporto scolastico» e «trasferimento aeroportuale» riguardano pubblici, condizioni e domande abbastanza diversi da meritare pagine dedicate.

In questa prima fase, mentre definisci la struttura del sito, concentrati soltanto sulle ricerche con intento commerciale. Le altre potranno andare nel blog, se mai ce ne sarà uno.

Usa lo Strumento di pianificazione delle parole chiave di Google Ads per fare le stime, delimitando l'area geografica. Ti darà un'idea del traffico che possiamo raggiungere, sapendo che un intervallo di ricerche non corrisponde al totale delle visite organiche che riceveremo, ma solo a una parte. Da qui, applicando un tasso di conversione stimato, possiamo valutare quanti lead acquisire ogni mese.

Concorrenza: con chi ti giochi i soldi

Anche qui trovi un articolo in cui spiego nel dettaglio come svolgere un' analisi della concorrenza nell'e-commerce. È un po' datato e alcune cose sono cambiate, ma la base rimane la stessa.

Per un'attività locale, cerca come farebbe un cliente nelle zone rilevanti e annota quali aziende compaiono nei risultati organici e locali. Osserva questi aspetti:

• Servizi.
• Copy, CTA e contenuti.
• Struttura del sito.
• Copertura geografica.
• Inviti all'azione.
• Metodi di contatto.
• Reputazione online (valutazione in directory come Google Maps o Trustpilot).
• Lead magnet, se ne hanno uno (di solito no, perché non fanno email marketing).
• Prezzi.

Non devi copiare il primo della lista. Il confronto deve aiutarti a individuare domande a cui i tuoi contenuti non rispondono, chiarire le tue proposte di valore e scoprire opportunità che la tua attività possa effettivamente sfruttare.

Se non hai accesso ai dati economici di un concorrente, non inventarli: chiedi a ChatGPT, magari tramite Deep research..

Consegna prevista

Due elementi:

Una tabella con le keyword, raggruppate per URL di destinazione provvisorio (di solito homepage e pagine di servizio), ambito geografico se necessario, priorità commerciale, concorrenti presenti e conclusioni. Serve a prendere decisioni sul sito, sulla sua struttura e sui contenuti (soprattutto i titoli) di ciascuna pagina.

Inoltre, aggiungeremo un documento con tutte le buone idee dei concorrenti che possiamo applicare alla nostra attività e al nostro sito.

4. Definisci la struttura del sito e di ogni URL partendo dalla domanda

Ora trasforma i gruppi provvisori di keyword in una mappa delle pagine concreta. Per ogni URL proposto annota:

• Quale esigenza soddisfa, a chi si rivolge e quale servizio rappresenta.
• Quale azione deve ottenere (modulo, clic sul telefono o WhatsApp, prenotazione di un appuntamento…).
• Di quali contenuti ha bisogno.
• Se posso procurarmi testimonianze autentiche oppure no.
• Da quali pagine riceverà link interni.
• A quale zona geografica sarà rivolta (magari una sola, ma potrebbe convenire ripetere la pagina del servizio se acquisisco clienti in due paesi o città diverse).

Decidi anche quali pagine indicizzare. O meglio, al contrario: quali pagine non indicizzare. Esempio: quelle legali e quelle con contenuti duplicati (chi sono e homepage).

Dal punto di vista dei contenuti è importante anche che, se l'attività ha un Profilo dell'attività su Google, le informazioni pubblicate lì (nome, servizi, contatti, orari e zone realmente coperte) siano esattamente identiche a quelle del sito.

Consegna prevista

Mappa con:

• URL.
• Keyword a cui punta.
• Decisioni specifiche sui contenuti della pagina.
• Indicizzazione sì o no.

5. Completa i requisiti e scegli la tecnologia adatta

Prima di iniziare lo sviluppo, bisogna trasformare tutte le decisioni prese in un documento operativo, una versione nuova e completa del nostro PRD iniziale. Il documento deve consentire a un'altra persona — o, in questo caso, all'IA — di capire cosa costruire e come verificare che il lavoro sia finito.

Di solito è più pratico raccogliere tutte queste informazioni in un progetto ChatGPT e chiedergli di preparare una bozza, facendo domande su qualsiasi informazione necessaria che manca. Poi dovrai soltanto rileggerla e modificarla. È molto più veloce.

Ora che abbiamo tutte queste informazioni, è il momento di scegliere la tecnologia. Per questi siti ti consiglio di valutare due sistemi: il framework Astro (qui trovi i suoi vantaggi e svantaggi) oppure WordPress. In questo articolo trovi un confronto diretto tra i due, per capire perché, a oggi, io scelgo Astro per progetti del genere.

La combinazione vincente è quella che uso io e che seguirò in questo tutorial::

• Astro per generare il sito.
• GitHub come repository del codice.
• Cloudflare per pubblicare (non è indispensabile, ma è più facile se hai acquistato il dominio anche lì).
• Zoho Mail per la posta elettronica aziendale e l'API per il modulo.

Certo, per un'azienda il cui team deve modificare spesso molti contenuti attraverso un pannello, WordPress potrebbe essere la scelta iniziale migliore.

Oltre a scegliere la tecnologia, è anche il momento di organizzare le fonti. Crea quindi una cartella sul PC con diverse sottocartelle, per esempio:

• Materiali originali del cliente.
• Materiale tuo (analisi della domanda, mockup, PSD, testi…).
• Codice.
• Risorse finali necessarie al sito (ciò che verrà caricato su Cloudflare: soprattutto HTML, CSS, JS e immagini).
• Segreti di produzione (password).

Non tutto questo materiale finirà nel repository: soltanto ciò che serve per ricostruire il sito, senza password né enormi documenti originali che conserveremo come materiale di riferimento.

Una volta organizzata questa struttura, è il momento di creare un progetto in Codex, distinto da quello creato in ChatGPT. Sono due progetti diversi che condivideranno materiali come il PRD. Da qui in poi pensa di avere due persone che lavorano per te:

1. ChatGPT: l'analista, che progetterà il sistema secondo le tue specifiche e proporrà soluzioni.
2. Codex: lo sviluppatore, che costruirà il sito sulla base delle istruzioni suggerite dall'analista.

Per creare il progetto in Codex devi semplicemente:

1. Crearne uno nuovo nell'applicazione.
2. Assegnargli un nome.
3. Condividere la cartella principale del progetto che abbiamo creato sul PC.
4. Spiegargli dove si trova il PRD e chiedergli di valutare tutto prima di iniziare.

Per concludere questa fase, resta soltanto da definire gli ultimi aspetti prima dello sviluppo:

• Come verificare le modifiche prima della pubblicazione (vuoi che lo faccia Codex o preferisci farlo tu manualmente?).
• Come pubblicare (Codex fa il commit su GitHub e da lì su Cloudflare, oppure te ne occupi tu manualmente?).
• Se il sito sarà multilingue e da quale lingua partiremo.

Quando avrai deciso, chiedigli di aggiungere queste decisioni al PRD. Dato che ha il permesso di scrivere nella cartella, apporterà le modifiche necessarie al documento. Da questo momento, il metodo di lavoro sarà questo:

1. Tu pensi a ciò che ti serve. Sei il proprietario (owner) del progetto.
2. Lo comunichi a ChatGPT e valutate insieme ogni punto e gli eventuali dubbi.
3. Una volta chiarito tutto, chiedi a ChatGPT di prepararti il prompt per Codex.
4. Lo incolli in Codex, che lo eseguirà.
5. Valuti ciò che ha fatto Codex e apporti modifiche, se servono.
6. Passi alla fase successiva dello sviluppo.

Da questo momento, il tuo unico compito è pensare, decidere e definire. L'analista e lo sviluppatore si occuperanno di costruire il sito.

Consegne previste

• PRD preliminare allo sviluppo approvato (potrebbe subire modifiche durante il progetto).
• Cartella con la struttura del repository.
• Piano di pubblicazione e collaudo.

6. Scrivi i testi

Se non l'hai già fatto, ora che hai definito la struttura del sito e avviato il progetto, è il momento di creare i contenuti di ogni URL.

La homepage deve presentare l'offerta generale e indirizzare ai servizi. Ogni pagina di servizio deve spiegare cosa viene offerto, a chi, in quali situazioni, quali dubbi hanno di solito i clienti e come contattare l'azienda. Qui i testi SEO non sostituiscono quelli utili alle persone: quando sono ben progettati, i due aspetti lavorano insieme.

Usa l'IA per preparare bozze contestualizzate. Spiegale:

• Il servizio.
• La tua proposta di valore unica.
• Il pubblico.
• L'area geografica.
• Il tono.
• Le vere domande frequenti.
• Le testimonianze disponibili. Se esiste un Profilo dell'attività su Google, potremmo ricavarne delle buone recensioni.

Rivedi e modifica il risultato finché non ottieni qualcosa di pubblicabile. Poi pensa a come distribuirlo in diversi moduli o chiedi a ChatGPT di proporti delle soluzioni. Potrebbero emergere moduli ripetuti in tutto il sito (un modulo di contatto, una mappa, vantaggi generali). Per ora non preoccupartene: ne terremo conto nel prossimo passaggio.

Ti lascio un prompt indicativo per la bozza di una pagina di servizio:

Scrivi la pagina del servizio [servicio] per [negocio] in [zona]. Proposta di valore unica: [propuesta]. Pubblico: [audiencia]. Intenzione principale: [necesidad]. Testimonianze: [lista]. Domande frequenti: [lista]. CTA: [acción]. Mantieni un tono [tono]. Proponi struttura, copy, metadati SEO e schema. Segnala ogni affermazione che richieda una prova e non inventare cifre, recensioni, veicoli o aree coperte.

Crea i contenuti di tutte le pagine, una alla volta.

Consegna prevista

Schede delle pagine approvate con i contenuti: testo, CTA, metadati, prove e materiali visivi. Puoi costruire prima la homepage e una pagina di servizio rappresentativa per verificare che il sistema funzioni, prima di estenderlo agli altri servizi e ai contatti.

7. Separa i componenti riutilizzabili

Con i mockup e le schede delle pagine davanti, individua ciò che si ripete davvero: intestazione, navigazione, piè di pagina, pulsanti, modulo, schede dei vantaggi, blocchi con immagini, CTA finali e avvisi…

Il motivo è che per questi elementi useremo componenti riutilizzabili: così, se cambia il numero di telefono, lo modificheremo soltanto nel componente e l'aggiornamento si applicherà a tutti gli URL. Ovviamente header e footer sono riutilizzabili, ma potrebbero essercene altri.

Inoltre, potresti voler dare a tutte le pagine di servizio lo stesso design o la stessa struttura. Per questo separa la struttura dai dati. Esempi:

• Un template di pagina di servizio può assemblare blocchi comuni senza imporre lo stesso testo a ogni pagina.
• Più in concreto: un componente dei vantaggi può mantenere il layout, cambiando titolo, spiegazione e icona.

Fai una prova pratica prima di replicare il modello: chiedi a ChatGPT il prompt per far impaginare a Codex la homepage e una pagina di servizio, confrontale con i mockup e modifica sia i singoli contenuti sia i componenti comuni.

Controlla come appaiono su desktop e mobile. Quando tutto sarà corretto, estendi il sistema al resto del sito.

Consegna prevista

Homepage e una pagina di servizio impaginate.

Inventario dei componenti, dei dati che ricevono e delle pagine che li utilizzano.

8. Prepara le immagini per la produzione

Dai, finiti i testi è il momento di definire le immagini.

Idealmente il cliente ti avrà passato delle foto decenti da utilizzare. Nella pratica succede raramente. Per fortuna, se non sei pratico di Photoshop, ChatGPT è tuo amico e il suo sistema per creare e modificare immagini è davvero, davvero ottimo. Quindi, diamoci da fare.

Non complicarti la vita: tra una e tre immagini al massimo per URL dovrebbero bastare. E probabilmente alcune si ripeteranno. Idealmente la prima, quella di apertura, dovrebbe essere diversa in ogni pagina.

Conserva gli originali del cliente e, quando produci un'immagine nuova, salva un master di buona qualità in cartelle che non caricheremo nel repository.

Poi chiedi a ChatGPT di dire a Codex di adattare ogni immagine alla posizione in cui comparirà nel sito e, per farlo, di:

• Generare versioni con dimensioni e formati adeguati, generalmente .webp per le fotografie e SVG per le icone.
• Definire dimensioni responsive ed evitare di inviare a uno smartphone un file pensato per riempire uno schermo grande.
• Riservare lo spazio necessario affinché la pagina non salti durante il caricamento. L'immagine principale potrebbe richiedere priorità di download, mentre una foto molto in basso può aspettare.
• Un testo alternativo utile descrive le informazioni contenute nell'immagine; se riesci a inserirci una keyword pertinente, tanto meglio.

Consegna prevista

Immagini definitive per il sito.

9. Crea le icone

Probabilmente è la parte più difficile da ottimizzare nei siti che ne contengono molte (più di 20 o 30).

Il problema è che è difficile generarne tante varianti con uno stile coerente, soprattutto tutte nello stesso foglio di icone. Alla fine finisci per sistemarle una per una, e ci vuole tempo.

E poi c'è una cosa ancora più complicata: trasformarle in SVG ottenendo un buon risultato. Per questo ti dico che, se devi usare PNG ritagliati a mano o ricavati da un foglio di icone creato con Photoshop, fallo pure. Non raggiungerai il 100% dell'ottimizzazione possibile, ma risparmierai moltissimo tempo. Parlo per esperienza.

Per esempio, su Rondabus ho provato diverse soluzioni perché i primi disegni si discostavano dai riferimenti: alcuni erano troppo semplici, altri avevano dimensioni visive diverse nonostante occupassero lo stesso riquadro. Ho persino valutato ritagli e PNG ricavati dalle tavole approvate, ma la soluzione scelta nella versione 2.0 è stata utilizzare gli SVG originali con dimensioni di visualizzazione maggiori..

Per seguire il processo:

1. Individua prima dove appare ogni icona e cosa rappresenta.
2. Raggruppa quelle che si ripetono.
3. Conserva un master per ogni disegno o foglio di icone.
4. Prepara un'anteprima nei contesti reali: hero, modulo con schede dei servizi, elenco dei vantaggi, contatti…
5. Regola le dimensioni ottiche senza deformare le forme: due icone con la stessa larghezza del file possono sembrare molto diverse a causa dei margini del disegno.
6. Verifica un campione su una pagina importante (homepage o servizi) prima di tentare di cambiare tutte le pagine. Se una prova non riproduce bene lo stile del mockup, torna al riferimento e scartala.
7. Applica il risultato alle altre pagine.
8. Il formato del file è una scelta implementativa; la qualità visiva e la coerenza sono ciò che l'utente giudicherà. Ed è la cosa più importante.

Consegna prevista

Set di icone e master approvati.

10. Costruisci il sito per fasi

Dopo aver approvato la homepage e il modello per i servizi, costruisci le altre pagine e controllale individualmente. Condividere un template non significa che tutte funzionino visivamente: cambiano la lunghezza dei titoli, le fotografie, il numero dei vantaggi, i testi dei pulsanti e le esigenze del pubblico.

Controlla il desktop e diverse larghezze su smartphone e tablet. Mettiti nei panni dell'utente, confronta ogni pagina con il mockup e verifica ciò che un'immagine statica non può mostrare:

• Menu a tendina.
• Link.
• Validazione lato client del modulo.
• Immagini e icone che si caricano.
• Contenuti lunghi.
• Interruzioni di riga nei titoli.
• …

Conviene salvare dei punti di ripristino del codice quando si approva una fase con diverse modifiche. Chiedilo a ChatGPT mentre perfezioni i dettagli.

Consegna prevista

Pagine complete nel front end (manca ancora la validazione del modulo, se presente).

Punto di ripristino del front end completato, sito versione V1 (una lingua). Se ritieni che a questo punto il sito sia finito, passa alla sezione 17 per pubblicarlo online.

11. Configura un modulo e altri canali di contatto

Se hai letto i miei articoli su Astro, sai bene due cose:

1. Che pubblichi file HTML.
2. Su un server senza linguaggio lato server (PHP, Python).

Questo offre molti vantaggi ma presenta un problema: non puoi inviare direttamente i moduli.

Per risolvere esistono diverse soluzioni, tra cui:

• Usare i servizi a pagamento di Cloudflare.
• Usare un provider email (gratuito o a pagamento) e integrarne il servizio tramite API.

Nel mio caso, dato che per questi progetti configuro spesso anche la posta elettronica e uso la versione gratuita di Zoho Mail, preferisco sfruttare questo servizio per inviare i messaggi generati dai moduli invece di aggiungere un altro fornitore.

È un po' complesso e richiede diversi passaggi che dovrai fare manualmente, quindi chiedi a ChatGPT di guidarti passo dopo passo. E, soprattutto, non caricare i secret nel repository GitHub. Cloudflare ha uno spazio dedicato per conservarli.

Quando avrai finito, compila il modulo sia correttamente sia con dati errati, per controllare che funzionino tanto la validazione quanto l'invio.

Se non l'hai già fatto, questo è anche un buon momento per testare il link telefonico e quello di WhatsApp da un vero smartphone, se li hai aggiunti, come quasi certamente dovresti.

Consegna prevista

Modulo testato e funzionante dall'inizio alla fine.

Punto di ripristino, sito versione V1.5 (completo di modulo e in una lingua).

Con questo, a parte la pubblicazione del sito (passaggio 17), avremmo completato l'indispensabile per qualsiasi sito di un'attività locale. Ma i passaggi successivi sono MOLTO CONSIGLIATI se vogliamo davvero acquisire clienti.

12. Misura i contatti e configura il consenso

Cominciamo i passaggi facoltativi da una base: la misurazione.

Che cosa vogliamo misurare? L'essenziale:

• Eventi di conversione.
• Traffico.

A che scopo?

Per sapere da dove arrivano le vendite, soprattutto se pensiamo di pagare pubblicità per ottenere i primi clienti (dovresti seriamente considerarlo).

Quindi la prima cosa è definire un piano di analisi che comprenda gli eventi aziendali prima di installare qualsiasi strumento. Gli eventi saranno chiarissimi:

• Contatto telefonico.
• Tramite WhatsApp.
• Tramite email.
• Tramite modulo.
• Prenotazione di appuntamenti in agenda.
• Iscrizione (eventualmente a una newsletter).
• Clic per visualizzare l'indirizzo in Google Maps.

E probabilmente questo elenco comprende tutto ciò che ti serve misurare su un sito del genere.

Decidi quali si applicano al tuo caso e chiedi a ChatGPT di fornirti:

• Il nome dell'evento secondo la nomenclatura consigliata da Google, perché ti propongo di usare Google Analytics 4 per misurarli.
• La condizione che attiva l'evento.
• I parametri secondari (se necessari).

Il sistema funziona così:

L'utente del sito compie un'azione > Google Tag Manager la rileva > GA4 la registra per permetterti di analizzare i dati.

Crea un account sia su GA4 sia su GTM con il tuo account Google e, già che ci sei, anche su GSC, che utilizzeremo più avanti per la SEO.

Se la tua attività opera nell'Unione europea, la misurazione dipende anche dalle scelte sulla privacy. Per questo chiedi a ChatGPT di implementare la modalità avanzata di Google Consent Mode v2, con un'opzione per riaprire le preferenze. Creerà il solito banner dei cookie.

Dopo aver definito tutto, chiedi a ChatGPT di far generare a Codex un file JSON con il contenitore da importare in GTM. L'IA ti chiederà gli identificativi degli account GA4 e GTM e ti fornirà un file con tutto il necessario, pronto per l'importazione.

Non ti resterà che provare ogni evento nella modalità di anteprima di GTM prima di pubblicare il contenitore e cominciare a raccogliere dati reali dal sito.

Consegna prevista

Piano di misurazione e implementazione funzionante di GTM e GA4, con consenso verificato se applicabile al tuo caso.

13. Completa la SEO tecnica e pubblica la prima versione

Se stai lavorando sulla SEO locale, come dovresti, è il momento di avviare Screaming Frog e controllare gli errori. Chiedi a ChatGPT di farteli correggere.

Collega il sito al tuo Profilo dell'attività su Google. Verifica nome, categorie, indirizzo o area servita, telefono, orari, foto e servizi senza inventare sedi.

Inoltre, all'interno di GSC (Google Search Console) carica la sitemap generata. Se non conosci l'URL, chiedilo direttamente a Codex. Dopo qualche giorno controlla se le pagine importanti possono essere sottoposte a scansione e indicizzate.

Consegna prevista

Un sito senza errori tecnici SEO, con URL e sitemap verificati e dominio canonico corretto.

Potremmo chiamarla versione V2..

14. Decidi se vale la pena ampliare il sito ad altre lingue

Siamo ormai all'ultima parte del processo: tradurre il sito in altre lingue.

Prima di decidere, verifica:

• Quali pubblici vuoi attirare.
• In quale lingua li assisterai.

Offrire un massaggio a un norvegese a Málaga senza parlare la sua lingua non è come offrirgli un servizio legale. Puoi anche attirare giapponesi che cercano un taxi a Ronda, ma chiarire che l'assistenza viene fornita solo in inglese.

Inoltre, aggiungere una lingua significa tradurre contenuti, menu, moduli, metadati, schema e aggiornamenti futuri: non basta un pulsante con una bandierina.

Una volta decise con ChatGPT le lingue da includere nel sito, stabilisci:

• La lingua di partenza, cioè quella già presente nel sito pubblico.
• Le lingue verso cui tradurre.
• Le pagine traducibili, che non sono tutte (per esempio la pagina di errore 404 o quelle legali).
• La politica degli URL. Decidi se tradurre gli slug, come collegare le pagine equivalenti e cosa fare quando manca una traduzione.

L'architettura dovrebbe identificare ogni pagina tramite un codice stabile e indipendente dalla lingua, così il selettore può portare alla pagina equivalente e il sito può generare le relazioni hreflang senza dover indovinare in base al titolo visibile.

Tutto questo viene prima della traduzione.

Consegna prevista

Piano di traduzione.

15. Separa esportazione, traduzione e integrazione

Il processo che funziona meglio per me consiste nel dividere il lavoro.

1. Codex analizza il progetto e prepara un pacchetto di testi con identificatori stabili, testo di partenza, contesto, lingua di destinazione, segnaposto, link e termini protetti. Di solito ci prepara un pacchetto JSON o XML.
2. ChatGPT traduce questi pacchetti, controlla i valori e ci restituisce i file tradotti.
3. Codex integra questi file e verifica le pagine.

Questa suddivisione permette di cambiare traduttore (anche affidandosi a una persona) senza chiedergli di capire il codice e senza costringere lo sviluppatore a indovinare il significato di ogni frase. Naturalmente, la revisione di ChatGPT non sostituisce quella linguistica di un traduttore giurato.

Prompt per l'esportazione:

Esamina il progetto e prepara un inventario traducibile per [idiomas]. Includi testi visibili, navigazione, moduli, metadati e slug. Per ogni unità fornisci un ID stabile, il testo di partenza, il contesto, i segnaposto, i link e i termini protetti. Per ora non tradurre né modificare le pagine. Segnala stringhe ambigue e contenuti privi di un equivalente.

Prompt per la traduzione:

Traduci esclusivamente i valori del pacchetto in [idioma y variante]. Pubblico: [audiencia]. Tono: [tono]. Glossario: [términos]. Conserva ID, struttura, ordine, placeholder, nomi propri, link e codice. Segnala fuori dal pacchetto le frasi che richiedono una decisione aziendale o una revisione da parte di un madrelingua.

Prompt per l'integrazione:

Importa nel progetto queste traduzioni approvate. Verifica ID, segnaposto, termini protetti, slug e percorsi equivalenti. Non pubblicare una lingua se mancano testi obbligatori. Esegui l'audit delle traduzioni, i controlli del progetto e la build; segnala ogni differenza prima della pubblicazione.

Consegna prevista

Sito multilingue non ancora revisionato.

16. Verifica ogni lingua come se fosse un sito completo

Una volta integrate le traduzioni, apri le pagine: un file valido può produrre un menu che esce dai margini, una CTA troppo lunga o un avviso che copre il modulo. Controlla ogni URL in ogni lingua sia su desktop sia su mobile.

Per la SEO verifica (tu o ChatGPT):

• <html lang>.
• Titolo.
• Descrizione.
• URL localizzato.
• Canonical della pagina stessa.
• Relazioni hreflang tra pagine equivalenti.
• Sitemap degli URL indicizzabili.
• Il selettore deve mantenere la pagina corrente quando si cambia lingua, se esiste una pagina equivalente.
• Controlla anche i link nel footer.
• Moduli e messaggi di errore.
• Testi alternativi delle immagini.
• Dati strutturati che contengono testo o URL.

Apporta tutte le modifiche necessarie fino a perfezionare ogni dettaglio.

Consegna prevista

Sito multilingue completo, versione V3.

17. Pubblica una versione identificabile e verifica la produzione

Che sia dopo il passaggio 10 (V1), l'11 (V1.5), il 13 (V2) o quello precedente (V3), abbiamo un sito pronto in un ambiente di test. Ora manca pubblicarlo in produzione. Ed è ciò che faremo qui.

Qui chiederemo a ChatGPT di dire a Codex di pubblicare la build su Cloudflare.

Per farlo, Codex:

1. Accederà al nostro account GitHub.
2. Ci chiederà di selezionare o creare il repository adatto.
3. Accederà al nostro account Cloudflare.
4. Ci chiederà su quale dominio pubblicare.
5. Pubblicherà l'ultima versione del sito.

E noi dovremo soltanto controllare che tutto appaia come nella versione di prova.

A quel punto avremo finito il sito.

Consegna prevista

Versione completa del sito pubblicata.

18. Trasforma il progetto in un metodo ripetibile

Questo è ancora più facoltativo, ma molto consigliato se vuoi applicare il procedimento al sito di un'altra attività.

Ti basta chiedere a ChatGPT di creare una Skill con tutto il processo seguito. Così non dovrai ricordarti ogni passaggio la prossima volta né tornare qui a rileggere il tutorial. ChatGPT lo conserverà per bene e Codex lo avrà installato al suo interno.

In questo modo il prossimo sito per un'altra attività locale sarà molto più veloce da realizzare.

Niente male, eh?