Visualizzare il codice HTML di un sito web sembra banale: clic destro, “Visualizza sorgente pagina”, fatto. La realtà è più sfumata da quando la maggior parte dei siti si basa su framework JavaScript come React o Vue. Il codice sorgente grezzo restituito dal server non corrisponde più necessariamente al contenuto visibile nel browser. Sapere quale metodo utilizzare e in quale contesto fa tutta la differenza tra un’ispezione utile e una lettura a vuoto.
Visualizzare il codice sorgente o ispezionare il DOM: cosa mostra ogni metodo
I browser offrono due percorsi per accedere al codice di una pagina. Non restituiscono le stesse informazioni e confondere i due falsifica qualsiasi analisi.
| Critero | Visualizza sorgente pagina (Ctrl+U) | Ispettore elemento (F12 / DevTools) |
|---|---|---|
| Contenuto visualizzato | Risposta HTML grezza inviata dal server | DOM attivo dopo l’esecuzione di CSS e JavaScript |
| Riflette il rendering visivo | No, sui siti JS moderni | Sì, in tempo reale |
| Modifica locale possibile | No | Sì (temporanea, lato browser) |
| Utile per l’audit SEO tecnico | Sì (visione “crawler”) | Sì (visione “utente”) |
| Scorciatoia da tastiera (Chrome, Firefox) | Ctrl+U (Windows) / Cmd+Option+U (Mac) | F12 o Ctrl+Shift+I |
“Visualizza sorgente pagina” mostra ciò che il server invia, non ciò che il visitatore vede. Su un sito costruito con un framework JavaScript, questo codice sorgente può limitarsi a un tag <div id="root"> vuoto seguito da un file JS voluminoso. Il testo, le immagini, la struttura di navigazione appaiono solo dopo l’esecuzione dello script da parte del browser.
Le DevTools, accessibili tramite F12, mostrano il DOM così come il browser lo ha costruito. È questa versione che corrisponde al rendering reale. Quando l’obiettivo è verificare un tag title, un attributo alt o un link canonico, è importante sapere quale delle due viste consultare, a seconda che si cerchi il dato grezzo o il risultato interpretato.
Una guida completa per trovare il codice html di un sito web dettaglia questi due approcci con casi concreti per browser.
Siti in JavaScript: perché il codice sorgente grezzo è spesso vuoto
I framework front-end (React, Vue, Angular) generano il contenuto direttamente nel browser del visitatore. Il server si limita a inviare una shell HTML minima e un bundle JavaScript. Il HTML iniziale non contiene né testo né tag semantici utilizzabili.
Questa architettura pone un problema concreto per chiunque ispezioni il codice a scopo di audit o apprendimento. Con Ctrl+U, si ottiene una pagina quasi vuota. Solo le DevTools (scheda “Elements” in Chrome, “Ispettore” in Firefox) mostrano il DOM completo dopo il rendering.
Testare la pagina come un robot di indicizzazione
Per vedere cosa percepisce un crawler che non esegue JavaScript, la buona pratica consiste nel disabilitare JavaScript nelle DevTools prima di ricaricare la pagina. In Chrome, ciò si fa tramite le impostazioni della scheda “Sources” o aprendo la palette dei comandi (Ctrl+Shift+P) e digitando “Disable JavaScript”.
Se la pagina diventa bianca o mostra solo lo scheletro, il sito si basa interamente sul rendering lato client. I robot che non eseguono il JS non vedono quindi alcun contenuto indicizzabile. Questo test rapido evita di trarre conclusioni errate basandosi solo sul codice sorgente grezzo.
Scorciatoie da tastiera per browser per accedere al codice HTML
Il metodo varia leggermente da un browser all’altro. Ecco le scorciatoie più dirette:
- Chrome ed Edge (Windows/Linux): Ctrl+U per il codice sorgente, F12 per le DevTools. Su Mac: Cmd+Option+U e Cmd+Option+I rispettivamente.
- Firefox: stessa logica con Ctrl+U e F12. L’ispettore di Firefox mostra inoltre un pannello “Regole” che dettaglia gli stili CSS applicati a ciascun elemento.
- Safari (solo Mac): il menu Sviluppo deve essere attivato manualmente nelle preferenze avanzate. Poi, Cmd+Option+U apre il codice sorgente e Cmd+Option+I apre l’ispettore web.
Su mobile (Android), Chrome consente di accedere al codice sorgente digitando view-source: seguito dall’URL nella barra degli indirizzi. Su iOS, Safari non offre un equivalente nativo semplice; applicazioni di terze parti o segnalibri JavaScript (bookmarklets) colmano questa lacuna.
Cercare un tag preciso nel codice sorgente HTML
Visualizzare il codice completo di una pagina ha senso solo se si sa cosa cercare. La funzione di ricerca testuale (Ctrl+F nel codice sorgente o nella scheda Elements delle DevTools) permette di localizzare un tag specifico in pochi secondi.
Verifiche comuni in audit SEO
Il tag title e la meta description si trovano nel <head> del codice sorgente. Digitando “title” o “meta name” nella barra di ricerca, si isolano immediatamente questi elementi. La loro presenza nel codice sorgente grezzo (Ctrl+U) conferma che sono accessibili ai motori di ricerca senza esecuzione di JavaScript.
Per i tag di struttura (h1, h2, h3), la ricerca nelle DevTools è più affidabile, poiché riflette il DOM reale. Un sito JavaScript può iniettare i suoi titoli dinamicamente: essi saranno assenti dal codice sorgente ma presenti nell’ispettore.
- Tag canonico: cercare
rel="canonical"nel <head> per verificare l’URL di riferimento dichiarato. - Attributi alt delle immagini: cercare
alt=nel codice per individuare le immagini senza descrizione testuale. - Dati strutturati: cercare
application/ld+jsonper localizzare gli script di markup schema.org.
Quadro giuridico in Francia: consultare il codice, sì, ma non copiare tutto
Consultare il codice HTML di un sito è lecito. Il browser scarica questo codice per visualizzare la pagina e l’utente non fa che leggere ciò che gli è già stato trasmesso. Aspirare o copiare sistematicamente il codice o i dati che contiene rientra in un altro regime.
In diritto francese ed europeo, diverse protezioni regolano la copia: il diritto d’autore sul codice originale e sui contenuti, il diritto sui database, e il GDPR quando sono in gioco dati personali. Guardare il codice di un concorrente per comprendere la sua struttura di tag è una pratica comune e legittima. Estrarre metodicamente il suo contenuto o riprodurre la sua architettura per duplicarla espone a possibili azioni legali.
Il confine è netto: l’ispezione manuale di una pagina rimane un gesto tecnico banale. L’aspirazione automatizzata e il riutilizzo del codice o dei dati richiedono un’analisi giuridica preventiva.