Il tuo sito come città: un workflow n8n lo misura e lo costruisce in isometria

Aggiornamento del 7 novembre: nuova grafica. La città ora è futuristica e mostra la vera struttura del sito: ogni sezione è un quartiere, ogni sottopagina una torre, e tutto è cliccabile.

Prima provala: il tuo sito come città. Inserisci un dominio, premi «Costruisci la città» e dopo qualche secondo la città è in piedi. Se non hai un dominio sottomano, il pulsante demo usa daniele-michelin.com.

Come si legge la città

• Centro = home page: la torre luminosa al centro è la home, con un faro. I siti multilingua hanno anelli colorati, uno per lingua.
• Quartieri = sezioni del sito: il workflow legge tutti gli URL della sitemap e li raggruppa per il primo segmento del percorso. Ogni sezione, per esempio /blog o /tools, diventa una piattaforma esagonale con un'insegna olografica e il numero di pagine. Fino a dieci quartieri, il resto finisce nel quartiere «…». Le sezioni tradotte come /fehler, /en/errors e /it/errori si contano insieme.
• Torri nel quartiere = sottopagine: le sottosezioni più grandi sono torri con il loro nome, più alte quante più pagine contengono.
• Tutto è cliccabile: un clic su un quartiere o su una torre apre proprio quella parte del sito. La città è una sitemap da esplorare.
• Ponti di luce = tempo di caricamento: dal centro a ogni quartiere viaggiano pacchetti di dati. Fino a 600 ms sono veloci, oltre rallentano, sopra i 1500 ms lampeggia in rosso «ingorgo».
• Cupola energetica = header di sicurezza: sei emettitori per HSTS, CSP, nosniff, protezione frame, Referrer-Policy e Permissions-Policy proiettano una cupola sulla città. Se manca un header, al suo posto sfarfalla una falla rossa.
• Nucleo energetico = TLS, antenna = e-mail: il nucleo all'ingresso mostra i giorni rimasti del certificato, l'antenna trasmette verde, giallo o rosso secondo SPF e DMARC.
• Pianta della città: sotto la grafica c'è la stessa pianta come elenco con barre, per chi preferisce leggere invece di guardare.

Cosa mostra il workflow

• Prima il controllo, poi in parallelo: il webhook chiama prima un punto di controllo. Misura header, SPF e DMARC, TLS e tempo di risposta e restituisce l'indirizzo finale dopo i redirect. Poi partono insieme tre nodi HTTP: homepage, sitemap.xml e sitemap_index.xml.
• Merge: un nodo Merge con tre ingressi aspetta tutte le risposte. Se la sitemap è un indice, il workflow carica fino a otto sitemap figlie dallo stesso host e stima il numero di pagine. Il redirect di WordPress verso wp-sitemap.xml lo segue una volta.
• I conti li fa il Code: il nodo Code «Stadt vermessen» (misurare la città) conta pagine, kilobyte, script e immagini e riconosce 40 tecnologie da header e HTML. L'AI non calcola niente.
• AI con regole: la guida è gpt-oss-120b su IONOS in Germania. Riceve le misure in JSON e può usare solo quei numeri. Da tre a quattro frasi, al massimo 380 caratteri, i punti deboli con ironia gentile, niente insulti, niente emoji, risposta solo in JSON.
• Fallback: tutti i nodi HTTP proseguono anche in caso di errore. Se l'AI non risponde o risponde troppo corto, un nodo Code scrive la guida con gli stessi numeri da un modello. La città quindi si costruisce sempre.
• Condivisione con immagine: il server salva la città con numero e link e disegna uno skyline come anteprima. WhatsApp e LinkedIn, quando la condividi, mostrano la città e non solo un link.

Costruiscilo tu

Il workflow è pronto come JSON da importare. I segnaposto sono evidenziati: l'indirizzo del punto di controllo, il token e la pagina che riceve il risultato. Sul mio server il punto di controllo è un piccolo script PHP, quindi ti serve un tuo endpoint. Per l'AI va bene qualsiasi API compatibile con OpenAI.

Lo schema funziona anche per cose serie: prima un controllo, poi più richieste in parallelo, unire, calcolare e far scrivere il risultato a un'AI. Altri workflow da provare e scaricare sono nella pagina n8n.