Come migliorare il codice HTML per la SEO

Di Riccardo Esposito | Pubblicato il 2 Ott 2023 - Aggiornato il 6 Apr 2024

Per fare SEO con HTML devi ottimizzare una serie di tag come il title, il rel nofollow, il testo alternative, gli heading e il noindex. Inoltre devi semplificare, comprimere e ottimizzare il codice per migliorare la pagina in termini di SEO.

---

Per ottimizzare una pagina web e posizionarla su Google devi intervenire su diversi fronti, dalla link building al miglioramento dell’usabilità. I contenuti sono importanti ma spesso si ignora il ruolo del codice HTML per migliorare il lavoro della SEO on-page.

Per sintetizzare tutti i punti di questo lavoro, gli amici di www.simplica.it mi hanno aiutato creando questa splendida infografica che definisce ogni passaggio che andrò ad approfondire nella guida. Ovvero un percorso per ottimizzare il codice HTML SEO.

Perché in fin dei conti Google vede questo: una pagina fatta di codice. Un codice che l’attività di SEO per HTML deve ottimizzare nel miglior modo possibile, riducendo le ridondanze ed eliminando tutto ciò che non serve: questa è la base di partenza per avere un sito web pulito e veloce, capace di rispettare le regole dei Core Web Vitals.

Se fai una simulazione di ciò che vede lo spider nel momento in cui scansiona la pagina ti rendi conto che tutto ruota intorno a tag HTML ben precisi. E a una serie di indicazioni necessarie per ottimizzare il codice in modo da migliorare le prestazioni. Ovvero?

Usa un codice HTML pulito e validato

Una delle attività principali per chi vuole ottimizzare l’HTML in chiave SEO: creare delle pagine web con un codice ben strutturato, semplice e poco impegnativo per i browser che devono caricare le risorse. Chrome, Firefox, Opera e altri software devono leggere le tue pubblicazioni su internet. E lo stesso vale per il crawler dei vari motori di ricerca.

Se il codice HTML è scritto male e ha errori può essere difficile per questi comprendere i tuoi contenuti. Inoltre ci possono essere errori di accessibilità e usabilità a causa di un errore. E diverse fonti sottolineano l’importanza di un codice HTML pulito e corretto.

Lots of HTML errors or sloppy coding may be a sign of a poor quality site. While controversial, many in SEO think that a well-coded page is used as a quality signal.

Backlinko

Ora, avere la validazione W3C non sarà sicuramente un fattore di ranking definitivo ma è utile avere il polso della situazione e correggere eventuali errori grossolani che si possono fare a causa di qualche disattenzione. Quindi, occhio al Markup Validation Service¹:

basta aggiungere l’URL per scoprire e correggere eventuali errori. Per evitare problemi utilizza un markup corretto: il tuo codice HTML deve essere strutturato e conforme agli standard. Evita, come sempre, tag mancanti o aperti/chiusi in modo errato.

Da leggere: come mettere lo spazio HTML

Elimina stringhe di codice HTML inutile

Il lavoro di minificazione dell’HTML può migliorare le prestazioni del sito web, migliorare la memorizzazione della cache e il caricamento sul mobile. e di conseguenza ci può essere un impatto positivo sul posizionamento Google. Ma di cosa stiamo parlando?

La minificazione riduce le dimensioni dei file HTML togliendo spazi vuoti, interruzioni di riga e caratteri ridondanti senza alterare la funzionalità del codice. Però l’HTML ottimizzato può essere difficile da modificare, di solito viene generato automaticamente.

Questo grazie a plugin WordPress che si occupano di minificare anche CSS e Javascript. Ad esempio, WpRocket e W3 Total Cache sono degli ottimi per migliorare la velocità del sito web e ottimizzare i Core Web Vitals anche lavorando su HTML e SEO.

Lavora su HTML e SEO semantica

Oggi è importante usare tag HTML semantici, ovvero che permettono di dare un significato a ciò che stai facendo. Ad esempio, <b> è un elemento che rende il testo grassetto mentre <strong> si usa per dare una rilevanza specifica al testo compreso.

Quali sono i principali tag semantici²? Abbiamo <footer>, <header>, <nav>, <article>, <form>: sono elementi in grado di descrivere chiaramente il significato.

Questi tag aiutano i motori di ricerca a comprendere la struttura e l’importanza dei contenuti del tuo sito. A tal proposito puoi usare i dati strutturati per fornire informazioni strutturate sui contenuti del tuo sito web. L’aggiunta di questi tag HTML può migliorare la visualizzazione dei tuoi risultati nei motori di ricerca, inclusi i rich snippet nella SERP.

Ottimizza i migliori tag HTML per la SEO

Ci sono dei tag HTML che influenzano direttamente l’ottimizzazione di una pagina web rispetto alla search engine optimization? Certo, esistono delle condizioni che possono dare un contributo decisivo al lavoro SEO. Ecco quali devi conoscere sempre.

Tag title

Uno degli elementi fondamentali per l’ottimizzazione SEO dell’HTML. Il tag title rappresenta una stringa di testo che indica a Google il main topic della pagina ed è uno dei punti più importanti del lavoro di search engine optimization.

Con il passare del tempo la sua importanza è cambiata. Quali sono le regole della buona search engine optimization per questo tag HTML? Iniziamo a dare un esempio di come inserire il tag title nel codice HTML per l’ottimizzazione SEO on-page:

<head>
  <title>Questo è un titolo SEO (o tag title)</title>
</head>

Non c’è più bisogno di avere un match perfetto tra query e tag title per avere un buon posizionamento. Ma resta uno dei punti più importanti. Ricorda di inserire in modo naturale le keyword al suo interno, di rimanere sotto le 65 battute e di non fare spam³.

Rispetto ai passaggi tecnici, devi verificare che ci sia un unico tag title per ogni pagina web e che non sia duplicato: inoltre, non esiste una risorsa pubblicata senza tag title. Quindi, un SEO audit dell’HTML deve verificare questi tre punti decisivi.

datePublished e dateModified

Un dato strutturato da aggiungere all’HTML poco noto ma che può dare un contributo alto SEO. Sto parlando dei datePublished e dateModified. Ovvero la data di pubblicazione dell’articolo e quella di ultima modifica effettuata sul documento online.

Questi elementi aiutano a far capire, al motore di ricerca, se il tuo contenuto è aggiornato, recente o datato. Di default, questi elementi vengono aggiunti su WordPress senza alcun intervento ma è consigliabile fare una verifica per controllare se è così.

Nofollow

Il nofollow è un attributo HTML che può essere collegato al singolo link o all’intera pagina web attraverso il meta tag robots. L’obiettivo è quello di comunicare al motore di ricerca di non seguire il singolo collegamento ipertestuale. O quelli dell’intera risorsa.

<meta name="robots" content="noindex,nofollow">

<a rel="nofollow" href="https://esempio.it">Nofollow</a>

Il motivo per cui il nofollow è così importante per la SEO HTML è semplice: grazie a questo elemento puoi evitare di dare valore a link che non ne devono avere, che Google deve ignorare per diversi motivi. Ad esempio perché sono collegamenti di UGC. O perché hai inserito link promozionali e vuoi evitare una penalizzazione manuale⁴.

Meta description

L’ottimizzazione SEO dell’HTML passa anche dalla scrittura di una meta description nei campi extra che ti fornisce un plugin decisivo come WordPress SEO by Yoast.

Questo parametro non viene utilizzato per migliorare il posizionamento su Google ma migliora lo snippet. E contribuisce ad aumentare le probabilità di click sul tuo risultato.

Alt delle immagini

Tra le regole SEO per l’HTML c’è quella relativa all’inserimento del testo alternative nel codice delle immagini. Questo elemento deve essere utilizzato per descrivere il contenuto in modo chiaro e senza fare keyword stuffing. Quindi devi usare questa stringa di testo per aiutare a decifrare l’immagine se non si carica o per un ipovedente.

<img src="esempio.jpg" alt="Questo è un testo alternativo SEO">

Anche Google usa l’alt text per contestualizzare il visual, scoprire cosa si trova al suo interno e posizionare il contenuto su Google Image. Attenzione, se le immagini sono decorative possono anche non avere l’alt text ma ricorda di usare la sintassi alt="".

Prev e next

Questi elementi del codice HTML vengono utilizzati per comunicare a Google come procede la paginazione, quali sono gli elementi che vengono prima e dopo una sezione. Serve veramente? La comunicazione di Google è confusa sull’uso di questo markup, di base conviene lasciarlo anche perché su WordPress viene inserito di default.

Noindex

Il noindex è un’indicazione che diamo al motore di ricerca per evitare che proceda con l’indicizzazione. Ovvero l’inserimento nella SERP. Se lasciamo fare a Google, dopo aver inserito la sitemap.xml nella Search Console, molto probabilmente la pagina sarà scansionata e indicizzata, per poi posizionarsi. Il noindex impedisce questo.

<meta name="robots" content="noindex">

Il noindex può essere inserito anche con WordPress SEO by Yoast ma per fare in modo che influenzi effettivamente l’indicizzazione la regola deve essere letta. Questo avviene solo se non ci siano regole lato robots.txt che ostacolano la scansione.

Canonical

Il rel canonical è un tag HTML che indica a un motore di ricerca quale pagina è la versione originale di un testo. Questo è utile per evitare problemi di duplicazione dei contenuti, che possono verificarsi quando una pagina viene pubblicata su più URL diversi.

<link rel="canonical" href="https://www.example.com/original-page.html">

Questo tag HTML SEO può essere usato su pagine con indirizzi diversi ma contenuto identico, per gestire gli URL di paginazione ed evitare problemi a causa di contenuti identici o molto simili su risorse differenti. Ecco perché è così utile per la SEO on-pagine.

Width e height

Oltre al tag alt, uno degli elementi HTML importanti per la SEO delle immagini è la definizione di altezza e larghezza. Il motivo è semplice: questo passaggio semplifica il alvoro di caricamento delle foto, incide sui tempi e le dinamiche di upload del visual.

Tutto ciò si traduce nel rispetto delle regole per ottenere buoni risultati in termini di Core Web Vitals. L’ottimizzazione delle immagini su WordPress è avvantaggiata perché questi attributi vengono inseriti di default ma solo nel caricamento foto di pagine e post. Attenzione, quindi, a ciò che avviene nella sidebar, nell’header e nel footer.

Titolo H1

Molti confondono tag title e H1 ma non bisogna fare questo errore: le intestazioni, ovvero gli heading, sono elementi fondamentali dell’HTML semantico e consentono di dare una struttura alla pagina web. L’H1 (ovvero Heading 1) è il mark up più importante.

Perché è quello che apre il documento proposto dal browser all’utente: domina la pagina come una headline, può essere diverso dal tag title e, soprattutto, deve essere sempre presente in una pagina web. Di base non è accettato più di un H1 per documento.

Use a unique level-1 heading (h1) for each page in a set of documents and only use a level-1 heading once on a page.

Google

Utilizza le maiuscole e minuscole in modo corretto per il tuo titolo H1, aggiungi la punteggiatura nei titoli con parsimonia ed evita di utilizzare elementi di codice.

H2, H3, H4, H5, H6

Oltre all’H1 esistono altri heading che possono aiutare sia l’utente che il motore di ricerca a contestualizzare il contenuto. Sto parlando dei vari H2 e H3 (ma anche H4, H5 e H6) che permettono di lavorare sulla struttura degli articoli e delle pagine web.

La buona organizzazione dei titoletti consente al lettore di capire subito dove si trova, cosa deve leggere e quali sono gli argomenti affrontati. Soprattutto se aggiungi anche un menu interno con ancore. Per fare questo puoi anche usare un plugin specifico.

Approfondimenti e fonti utili per SEO e HTML

1. Attenzione, questo tool è particolarmente rigoroso e segnala molti errori che non sempre sono significativi. Per usarlo al meglio bisogna avere una conoscenza delle regole SEO per HTML adeguate per capire cosa applicare. ↩︎
2. Ci sono tanti tag semantici per l’HTML. Li trovi qui www.w3schools.com. ↩︎
3. Elimina anche testo ripetuto o boilerplate nei vari tag title, aggiungi solo il nome brand alla fine. ↩︎
4. In questi casi puoi usare, rispettivamente, il rel=UGC" e rel="sponsored". ↩︎

Categoria: Ottimizzazione siti | Tag: Codice HTML