Skip to content

Quante volte hai sentito le parole DOM e codice HTML? Se ti occupi di SEO è importante sapere cosa sono questi due elementi, a cosa servono e in cosa si differenziano.

Quando analizzo una pagina web trovo utile confrontare il codice HTML ed il DOM per capire se sto lavorando su un sito web generato da un sistema lato server oppure lato client. Dato che i due sistemi hanno logiche diverse e necessitano di processi di analisi SEO differenti, è importante definire prima di avviare un SEO audit ed una scansione con Screaming Frog se abbiamo a che fare con un sistema server side o client side.

Sistemi server side e client side

Lo scripting lato server è una tecnica utilizzata nello sviluppo web che prevede l’utilizzo di script su un server web che producono una risposta personalizzata (solitamente una pagina web) per la richiesta di ciascun client al sito web. L’alternativa è che il web server stesso fornisca una pagina web statica. Lo scripting lato server racchiude numerosi linguaggi (PHP, ASP, Python, …).

Differentemente, con lo scripting lato client, il web server invia al client uno scheletro HTML spesso vuoto o comunque molto leggero, che richiama alcuni file JS. Guardando il codice HTML si nota la mancanza di tutti o buona parte degli elementi visibili in pagina. Sarà JavaScript che, una volta eseguito dalla Java Virtual Machine presente nel browser, riempirà i tag HTML e genererà la pagina web completa.

Avevo approfondito questo aspetto nella guida: SSR, CSR – Server o Client Rendering per siti web in JavaScript?

Per dirla brevemente:

  • Un sistema con scripting server-side genera codice HTML completo direttamente nel web server.
  • Un sistema con scripting client-side genera solo un codice HTML parziale lato server, il quale viene poi completato dal client (solitamente un browser con JavaScript).

Hai mai provato a scansionare un sito web in Angular con Screaming Frog impostato con crawling “Text only”? Se la tua risposta è affermativa hai già capito l’importanza della questione. In caso negativo, ti consiglio di fare alcune prove.

Prova a visualizzare il codice sorgente di questa pagina: nel codice HTML troverai tutti gli elementi che vedi nella pagina web renderizzata dal browser.

Ora prova a fare la stessa cosa con un sito web sviluppato con JS e senza pre rendering, come ad esempio coopshop.it. Cosa noti qualcosa di diverso?

Codice HTML di coopshop.it
Codice HTML di coopshop.it

La differenza è alquanto evidente: una pagina web intera di un eCommerce viene generata da pochi caratteri HTML. Come è possibile?

Molto semplice, il server invia al client uno scheletro HTML praticamente vuoto con richiami a file JavaScript. Successivamente il browser esegue gli script i quali modificano il DOM aggiungendo i testi, immagini, i meta tag e tutti gli elementi necessari ad avere la pagina completa che vediamo nel browser. Il lavoro di “creazione” della pagina web viene svolto dal client e non da web server.

In casi come questi, codice HTML e DOM sono notevolmente differenti.

Cos’è il Codice HTML

Il codice HTML è ciò che viene fornito dal web server in risposta ad una richiesta HTTP proveniente da un client, browser o un bot.

HyperText Markup Language (HTML) è un linguaggio utilizzato per creare pagine sul web. Qualsiasi CMS genera codice HTML. I web browser interpretano il markup e visualizzano la pagina come indicato dall’HTML. Visualizzando il codice sorgente della pagina puoi vedere come vengono gestiti gli elementi della pagina come i testi, nonché i percorsi delle immagini o delle dipendenze della pagina.

Nelle statistiche di scansione di Google Search Console puoi monitorare il tempo medio che impiega il server a fornire il codice HTML delle tue pagine a Googlebot.

Cos’è il DOM – Document Object Model

Il Document Object Model (DOM) è un’API di programmazione per documenti HTML e XML. Definisce la struttura logica dei documenti e il modo in cui un documento è accessibile e può venire manipolato. Con il Document Object Model, i programmatori possono creare documenti, navigare nella loro struttura e aggiungere, modificare o eliminare elementi e contenuti. Tutto ciò che si trova in un documento HTML o XML è accessibile, modificato, eliminato o aggiunto utilizzando il Document Object Model.

Come specifica W3C, un obiettivo importante per il Document Object Model è fornire un’interfaccia di programmazione standard che possa essere utilizzata in un’ampia varietà di ambienti e applicazioni. Il DOM è la rappresentazione dei dati degli oggetti che compongono la struttura e il contenuto di un documento sul web.

Una pagina web è un documento che può essere visualizzato nella finestra del browser o come sorgente HTML. Ma è lo stesso documento in entrambi i casi. Il Document Object Model rappresenta lo stesso documento in modo che possa essere manipolato. Il DOM è una rappresentazione orientata agli oggetti della pagina web, che può essere modificata con un linguaggio di scripting come JavaScript.

Il DOM è fondamentale per la manipolazione dinamica dei contenuti web, permettendo agli sviluppatori di accedere e modificare il contenuto, la struttura e lo stile di un documento web. Esso rappresenta la struttura di un documento come un albero, dove ogni nodo è un oggetto rappresentante una parte del documento.

Quindi, il DOM HTML è un modello a oggetti standard e un’interfaccia di programmazione per HTML che definisce:

  • Gli elementi HTML come oggetti.
  • Le proprietà di tutti gli elementi HTML.
  • I metodi per accedere a tutti gli elementi HTML.
  • Gli eventi per tutti gli elementi HTML.

In altre parole il DOM HTML è uno standard per ottenere, modificare, aggiungere o eliminare elementi HTML.

Come viene creata una pagina web?

Rendering di una pagina Web
Rendering di una pagina Web

Per un SEO tecnico è importante capire come un browser crea una pagina web. Ciò può aiutare a comprendere la differenza tra le interpretazioni di una pagina da parte di un utente e un bot del motore di ricerca o, tra le altre cose, a diagnosticare problemi di velocità della pagina.

Il modo in cui un browser passa da un documento HTML alla visualizzazione di una pagina con stile e interattività è chiamato “Percorso di rendering critico“. Per renderizzare il contenuto il browser deve seguire una serie di passaggi:

  1. Creare il Document Object Model (DOM)
  2. Creare il Modello a oggetti CSS (CSSOM)
  3. Creare l’albero di rendering
  4. Creare il Layout
  5. Disegnare la pagina

Possiamo raggruppare questi passaggi in due macro fasi: analisi e rendering. La prima fase prevede che il browser analizzi il documento HTML per determinare cosa verrà visualizzato nella pagina, e la seconda fase prevede che il browser esegua il rendering, quindi il disegno di tutti gli elementi. Se ti interessa approfondire come ottimizzare il processo di rendering ti consiglio questo corso gratuito.

Prima fase: creazione DOM e CSSOM

Prima che il browser possa eseguire il rendering della pagina, deve costruire gli alberi DOM e CSSOM. Di conseguenza, dobbiamo assicurarci di fornire sia l’HTML che il CSS al browser il più rapidamente possibile.

  • CSSOM: una rappresentazione degli stili associati agli elementi del codice HTML.
  • DOM: una rappresentazione degli elementi del codice HTML.

Il processo per creare gli alberi DOM e CSSOM può essere riassunto come segue:

  • Il browser converte i byte in caratteri → Identifica i token → Converte i token in nodi → Costruisce il DOM
  • Il markup HTML viene trasformato in DOM.
  • Il markup CSS viene trasformato in un modello a oggetti CSS (CSSOM).

Il risultato della prima fase che combina DOM e CSSOM è quello che viene chiamato un “albero di rendering“. Il rendering tree è una rappresentazione degli elementi HTML che verranno visualizzati nella pagina e dei relativi stili e viene quindi utilizzato per calcolare il layout di ciascun elemento visibile. L’ottimizzazione di ciascuno di questi passaggi è fondamentale per ottenere prestazioni di rendering ottimali.

E Javascript?

Javascript è in grado di manipolare sia il DOM che il CSSOM. Per eseguire Javascript, il browser deve attendere il DOM, quindi deve scaricare e analizzare tutti i file CSS, arrivare all’evento CSSOM e solo successivamente eseguire Javascript. Quando il parser trova un tag di script, blocca la costruzione del DOM, quindi attende che il browser riceva il file e che il motore Javascript analizzi lo script, ecco perché Javascript è considerato un elemento di blocco del rendering.

Quando viene caricata una pagina Web, il browser crea un Document Object Model della pagina.

Il modello HTML DOM è costruito come un albero di Oggetti. Con il modello a oggetti, JavaScript ottiene tutta la potenza necessaria per creare HTML dinamico:

  • JavaScript può modificare tutti gli elementi HTML nella pagina.
  • JavaScript può modificare tutti gli attributi HTML nella pagina.
  • JavaScript può cambiare tutti gli stili CSS nella pagina.
  • JavaScript può rimuovere elementi e attributi HTML esistenti.
  • JavaScript può aggiungere nuovi elementi e attributi HTML.
  • JavaScript può reagire a tutti gli eventi HTML esistenti nella pagina.
  • JavaScript può creare nuovi eventi HTML nella pagina.

Seconda fase: rendering

Il rendering è il processo di lettura ed unione del DOM e CSSOM dall’alto verso il basso nel viewport.

  • Gli alberi DOM e CSSOM vengono combinati per formare l’albero di rendering.
  • L’albero di rendering contiene solo i nodi necessari per il rendering della pagina.
  • Il browser definisce il layout calcolando la posizione e le dimensioni esatte di ciascun oggetto.
  • L’ultimo passaggio è il disegno, che prende l’albero di rendering finale e rende i pixel sullo schermo.

Durante il rendering, alcuni frammenti di codice che esistono durante l’elaborazione DOM e CSSOM potrebbero essere disabilitati. Il motivo principale è che non sono visibili o sono disabilitati da un codice diverso. Pertanto, l’ottimizzazione del codice che non è incluso nell’albero di rendering ma che appare nel DOM e nel CSSOM è utile per la velocità della pagina. Dopo l’evento DomContentLoaded il browser avvierà l’albero di rendering. Durante questo periodo, entrerà in gioco anche il rendering Javascript che dividerà, modificherà e ri-dipingerà istantaneamente l’albero di rendering.

Codice HTML e DOM sono uguali?

Dipende, in genere c’è sempre qualche differenza più o meno evidente. Se nel codice HTML vengono richiamati script che manipolano la pagina, il DOM sarà differente dal codice HTML.

In un sito web WordPress tipico, che si genera server side, le differenze tra codice HTML e DOM sono minime e dipendono da eventuali dipendenze JavaScript richiamate in pagina. In un sito web sviluppato con Angular, o altri framework JavaScript, ci sono grandi differenze tra codice HTML e DOM (a meno che non si usi una funzione di pre render).

Inoltre, nel caso di errori nel codice HTML come ad esempio la mancanza del tag <head>, il DOM corregge il problema ricreando la corretta struttura del documento HTML.

Codice HTML e DOM sono diversi perché:

  • Il DOM è sempre un HTML valido.
  • Il DOM è un modello vivente che può essere modificato da Javascript.
  • Il DOM non include pseudo-elementi (es. ::after).
  • Il DOM include elementi nascosti (ad esempio con display: none).

Sviluppare SEO friendly: client side o server side?

Come conviene sviluppare oggi un sito web? Con CMS server-side come WordPress, oppure client-side come Angular? Queste due modalità di sviluppo hanno caratteristiche molto diverse, con pro e contro per entrambe le parti. Per chi ha la SEO come obiettivo primario è rischioso usare un framework JavaScript, dato che servono numerosi accorgimenti per rendere il sito ben scansionabile ed indicizzabile. Questi accorgimenti cambiano da un framework all’altro, ma ad ogni modo non avrai vita facile con la SEO se prendi la strada dello sviluppo client-side.

La scelta, però, non è così facile come sembra. Per quanto sia importante valutare vantaggi e svantaggi di ciascun sistema, è fondamentale analizzare i singoli progetti e le loro caratteristiche.

Ad esempio, una SPA (Single Page Application) oppure un sito web istituzionale di un’azienda già nota sul mercato che non ha bisogno di attirare un particolare traffico potrebbe scegliere un framework client-side.

Tuttavia, se hai bisogno di distinguerti tra i tuoi concorrenti e indirizzare traffico organico, non puoi negare che un framework server-side potrebbe essere la scelta migliore.

Tra le diverse opzioni e scenari, alcuni parametri possono aiutare nella decisione. Partiamo dai framework server-side come WordPress, indicando che potrebbero essere la scelta giusta quando:

  • il sito è complesso, con molte risorse e pagine;
  • l’applicazione contiene dati di grandi dimensioni;
  • la dinamicità non è un requisito fondamentale;
  • l’obiettivo è avere un sito web con molti contenuti e un alto volume di traffico organico.

I framework in JavaScript invece, dato che potrebbero avere problemi di crawling ed indicizzazione da parte dei motori di ricerca, potrebbero essere più adatti quando:

  • l’applicazione o il sito web ha una sola pagina o poche pagine e funzionalità;
  • il sito ha pochi dati;
  • serve dinamicità
  • non ci si aspetta una forte crescita organica.

La valutazione se sviluppare con un sistema o l’altro è critica e dovrebbe essere valutata con molta attenzione dai web designer, magari interpellando prima un SEO.

Come vedere le differenze tra codice HTML e DOM

Per visualizzare il codice HTML (View Source, un pezzo di codice non elaborato restituito dal server) puoi semplicemente cliccare CTRL + U nel tuo browser. In alternativa puoi cliccare sulla pagina web con il pulsante destro e selezionare “Visualizza sorgente pagina”.

Queste indicazioni valgono per Chrome e Firefox, altri browser potrebbero avere una configurazione diversa.

Visualizza Codice Sorgente
Visualizza Codice Sorgente per vedere il codice HTML

Poiché il codice HTML è solo codice grezzo, se alcuni contenuti vengono iniettati da JS non verranno visualizzati nell’HTML iniziale. Quindi, se hai un sito web JavaScript, non è sufficiente vedere l’HTML iniziale. Dovresti guardare il DOM.

Come abbiamo visto il DOM rappresenta lo stato corrente di una pagina. Se JavaScript ha modificato il contenuto, il risultato sarà evidente nel DOM.

Per visualizzare il DOM seleziona un elemento in pagina, clicca il pulsante destro del mouse e seleziona “Ispeziona”. Questo metodo utilizza il riquadro Strumenti per sviluppatori in Chrome ed è un approccio molto più pratico per navigare il codice della pagina web grazie alla formattazione aggiuntiva e alla possibilità di comprimere gli elementi che non ti interessa vedere.

Ispeziona elemento
Ispeziona elemento per vedere il DOM

Per evidenziare rapidamente le differenze tra il codice HTML ed il rispettivo DOM uso l’estensione per Chrome: View Rendered Source.

Ora la domanda sorgerà spontanea: Google considera il codice HTML iniziale o il DOM?

Entrambi. Google riceve dal web server il codice HTML , lo legge, lo interpreta, esegue JavaScript se necessario (e mille altri se), ed esegue il rendering della pagina per indicizzarla.

Articoli correlati

Autore

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Ultimi articoli aggiornati

Richiedi un preventivo SEO e Google Ads

Porta il tuo sito web al livello successivo con l’esperienza di EVE Milano. La nostra agenzia di Search Marketing ha ricevuto oltre 1150 richieste di preventivo, un segnale chiaro della fiducia che imprenditori e manager, come te, ripongono nella nostra specializzazione tecnica e verticale nella SEO e PPC. Se la tua organizzazione cerca competenze specifiche per emergere nei risultati di Google, noi siamo pronti a fornire quel valore aggiunto. Richiedi un preventivo ora e scopri la differenza tra noi e gli altri.
Richiedi un preventivo

Vuoi ricevere un avviso al mese con le nuove guide pubblicate?

Iscriviti alla newsletter!

Informativa sui cookies

Noi e terze parti selezionate utilizziamo cookie o tecnologie simili per finalità tecniche e, con il tuo consenso, anche per le finalità di esperienza e misurazione come specificato nella cookie policy. Puoi liberamente prestare, rifiutare o revocare il tuo consenso, in qualsiasi momento, accedendo al pannello delle preferenze. Il rifiuto del consenso può rendere non disponibili le relative funzioni. Usa il pulsante “Accetta” per acconsentire. Usa il pulsante “Rifiuta” per continuare senza accettare.