Come trovare e usare il codice sorgente di ogni pagina Web

Tempo di lettura : 6 minuti

Non è solo roba da smanettoni: il codice sorgente è la rappresentazione del codice HTML di un sito web scritto in questo linguaggio di programmazione, che una macchina (come il browser) legge e compila in immagine e funzioni e che noi utenti possiamo visualizzare in modo semplice.

Si tratta, cioè, dell’ossatura reale delle pagine dei nostri siti, che contiene tutte le informazioni che trasmettono al browser, agli utenti e anche ai crawler di Google: comprendiamo, quindi, che conoscere il codice sorgente può essere importante anche per la SEO, perché determina la corretta esecuzione di una pagina web e fornisce informazioni sul possibile potenziale di ottimizzazione.

Che cos’è il codice sorgente

Quando si parla di programmazione informatica o di software, il codice sorgente è il codice utilizzato per creare il programma.

In maniera simile, in riferimento a un sito Web, il codice sorgente, source codice o codice sorgente HTML è l’HTML o altro codice utilizzato per generare una pagina Web su un browser, che può essere visualizzato da chiunque visiti il sito (a meno che non sia  codice lato server).

Il codice sorgente è quindi la rappresentazione testuale della programmazione dietro qualsiasi pagina web o software; contiene quindi tutta la programmazione HTML che permette al browser di organizzare i testi, i link e le immagini di un documento e le istruzioni per far apparire tutti questi elementi sullo schermo dell’utente.

Nel caso di siti Web, questo codice può essere visualizzato da chiunque utilizzi vari strumenti, e più semplicemente attraverso il browser Web stesso.

Sotto l’aspetto visivo, di solito il codice sorgente web è distribuito su più righe e agli occhi dei meno esperti può far paura questo insieme di stringhe e caratteri: in realtà, è semplicemente il codice che i browser web “leggono” per capire come visualizzare i contenuti di una pagina web, e che è letto anche da Google e altri motori di ricerca per scoprire di cosa tratta il nostro sito.

Sintetizzando, i robot di ricerca vedono il codice, lo leggono, determinano come classificare il sito, dove è elencato nei risultati di ricerca e cosa viene pubblicato sul sito.

Come visualizzare il codice sorgente di una pagina Web

Gli utenti non visualizzano direttamente il codice sorgente, ma soltanto il risultato finale delle istruzioni e dei comandi inseriti. Eppure, tutti noi possiamo vedere il codice sorgente di qualsiasi pagina web che stiamo navigando, sfruttando semplicemente una semplice funzione presente nei browser più diffusi.

Per attivare la visualizzazione del codice sorgente di un sito web usando browser come Google Chrome, Firefox o Edge basta aprire una finestra del browser, raggiungere la pagina a cui siamo interessati e utilizzare una delle seguenti modalità (che possono avere nomi leggermente diversi, ma con lo stesso esito):

• Fare clic col tasto destro del mouse su una parte bianca della pagina e selezionare Visualizza Sorgente Pagina dal menu pop-up che appare (opzione che non è presente per tutte le pagine, ad esempio quelle che bloccano le funzionalità del tasto destro del mouse).
• Fare clic sui tasti Ctrl+U della tastiera (ambiente Windows) o ⌘-Option-U (ambiente Mac).
• Inserire nella barra degli indirizzi del browser la stringa “view-source:” seguita dall’URL completo della pagina (ad esempio, view-source:https://www.exempio.com/), che funziona anche dai dispositivi mobile.

A prescindere dal metodo, si aprirà una nuova scheda che contiene una schermata simile a quella in alto nella foto, che riporta tutto il codice HTML che sta dietro alla pagina web che solitamente vediamo (in bassonell’immagine).

Gli strumenti per ispezionare la pagina

Se vogliamo approfondire ulteriormente la nostra analisi e non ci spaventano le stringhe di codice, possiamo usare un’altra funzione integrata nei browser, che ci permette di visualizzare il codice sorgente e altre funzioni della pagina stessa.

Lanciare questo strumento di analisi – usato spesso anche dai professionisti del web design per controllare l’aspetto dei siti o per verificare l’impatto di alcune modifiche – è molto facile: è sufficiente aprire in un browser la pagina che ci interessa e

• Fare clic col tasto destro del mouse e selezionare voce “Ispeziona” (su Chrome), “Analizza” (su Firefox) o Ispeziona elemento (Safari).
• Ricercare la voce dal menu delle impostazioni avanzate del browser.
• Più semplicemente, cliccare il tasto F12 della tastiera.

Si apre una finestra interna che ci dà la possibilità di usare vari strumenti di sviluppo, estendendo quindi le possibilità di intervento. Un aspetto interessante (e utile) è che possiamo verificare direttamente gli elementi on page a cui siamo interessati (una porzione di testo, un link o un’immagine) cliccando con la freccetta, o al contrario navigando nel codice sorgente (con evidenziazione in pagina della porzione oggetto della selezione): in pratica, in questo modo possiamo sapere in tempo reale a quale parte di una riga di codice corrisponde ogni elemento della pagina web.

Codice sorgente e SEO: quali informazioni possiamo trovare

Non possiamo controllare Google, ma possiamo controllare ciò che accade sul nostro sito: questa massima vale in ogni campo della SEO e ci aiuta a capire perché è importante saper trovare e leggere il codice sorgente delle nostre pagine – al punto che l’ottimizzazione del codice sorgente è ritenuta una parte della SEO tecnica.

A volte, infatti, le cose che vediamo pubblicate online e ciò che invece vedono Google e Googlebot differiscono, e pertanto la pagina potrebbe non corrispondere agli standard richiesti dai crawler dei motori di ricerca. Quindi, in alcuni processi SEO bisogna necessariamente essere capaci di leggere il codice, così da trovare rapidamente gli elementi che si possono rilevare critici e che non sono immediatamente visibili agli utenti regolari.

Nel source code della pagina possiamo rilevare e correggere alcuni errori SEO, innanzitutto, ma possiamo anche trovare informazioni aggiuntive su un sito web (compresi quelli dei competitor): ad esempio, analizzando il codice sorgente possiamo trovare dei link nascosti, o scoprire l’attributo impostato per i collegamenti esterni; inoltre, il codice sorgente contiene informazioni importanti sul CMS utilizzato, markup o metadati come meta descrizione o meta titolo, e ancora indica i tag canonici, il contenuto di un sito Web e i codici di monitoraggio per scopi di marketing.

Cosa controllare nel codice sorgente per la SEO

L’analisi del codice sorgente di un sito Web ci permette di controllare in modo manuale vari aspetti legati alla SEO.

Tra le applicazioni più comuni ci sono:

• Verificare la presenza di tag H1

Le best practices SEO suggeriscono di impostare un solo tag H1 per pagina: per controllare se la pagina rispetta l’indicazione è sufficiente visualizzare il codice sorgente HTML e cercare <h1> per scoprire se il titolo è stato inserito e se ne compare solo uno.

• Verificare la presenza della meta descrizione

Se vogliamo accertarci di aver inserito la meta description per la pagina, o se vogliamo “studiare” la descrizione della pagina di un sito altrui, magari di un competitor diretto, basta la sorgente pagina e cercare il campo meta name=”description”.

• Verificare gli attributi dei link in uscita

Attraverso la sorgente pagina possiamo anche scoprire se i link in uscita dalla pagina sono contrassegnati con degli attributi particolari – ovvero se sono link follow o nofollow, o se ancora usano gli altri rel UGC e sponsored. Anche in questo caso, basta visualizzare il codice HTML della pagina e controllare l’occorrenza della parola “nofollow” (o UGC o sponsored) all’interno dell’elemento <a></a>.

• Verificare i Tag Robots

Le istruzioni meta tag robots servono a dare indicazioni ai crawler dei motori di ricerca sul modo di eseguire la scansione e l’indicizzazione della pagina: attraverso il codice sorgente possiamo scoprire, quindi, se l’indicizzazione della pagina è bloccata (noindex), se ci sono limitazioni per gli snippet di anteprima (nosnippet), se i link non sono da seguire (nofollow). Controllando la presenza di questi comandi nella sorgente pagina possiamo evitare errori accidentali che possono condizionare negativamente le prestazioni della pagina e del sito.

• Verificare gli attributi della pagina

Sempre con la visualizzazione del codice sorgente e una semplice ricerca in pagina possiamo verificare altri attributi legati alla pagina. In particolare, possiamo analizzare il rel canonical – che comunica a Google che la pagina in questione è quella canonica e prioritaria, mentre eventuali altre pagine sono “copie” – e l’attributo hreflang, utile se il sito web è disponibile in più lingue.

• Verificare i Tag Alt delle immagini

Tra le informazioni presenti nel codice sorgente ci sono anche quelle relative alle immagini, e in particolare l’alt text che abbiamo impostato; oppure, caso frequente, possiamo scoprire che l’immagine non ha un correlato testo alternativo, un errore che può influenzare l’usabilità della pagina. Per controllare la presenza dell’alt text dobbiamo cercare le occorrenze di “alt=”.

• Verificare connessione con Google Analytics

Altro check utile è controllare che ogni pagina del sito sia collegata a Google Analytics. Per saperlo, dobbiamo cercare “UA” nella sorgente pagina seguito da un codice a 7 cifre, che conferma che Google Analytics è installato sulla pagina .

Il codice sorgente può servire anche a un altro compito SEO, ovvero ottimizzare la velocità del sito web: in linea di massima, un codice sorgente difettoso può comportare una ridotta funzionalità della pagina (che a sua volta può impattare negativamente sul ranking), e verificare il rapporto testo-codice è utile per ridurre il tempo di caricamento di un sito web.

In generale, più semplice è il codice sorgente di un sito Web, più veloci i bot possono eseguire la scansione della pagina, trovando e indicizzando i contenuti più rapidamente.

Come punto di partenza, possiamo visualizzare l’HTML di una pagina e provare a identificare gli elementi (inclusi i file JS e CSS) che possono essere rimossi senza compromettere le funzionalità, per ridurre le dimensioni della pagina e velocizzarne il download; quindi, con l’aiuto di altri strumenti (come PageSpeed ​​Insights di Google), possiamo continuare a ottimizzare ulteriormente il codice.

Perché leggere il codice sorgente

In conclusione, visualizzare il codice sorgente di una pagina è un’operazione molto semplice e alla portata di tutti gli utenti, e imparare a leggerlo ci aiuterà a verificare rapidamente una serie di elementi SEO importanti, come ad esempio la presenza di un titolo ottimizzato, di attributi di link o di meta-tag utilizzati sulle nostre pagine o su quelle dei concorrenti sulle loro pagine.

Non serve avere competenze da sviluppatore per rilevare problemi evidenti che possono rallentare o distruggere i nostri sforzi di ottimizzazione, perché bastano pochi controlli per scoprire e risolvere alcuni comuni errori SEO che possono provocare danni enormi.