Come ottimizzare il codice HTML per la SEO

Postato in data 15 Dicembre 2022 da Riccardo Esposito

L’ottimizzazione SEO del codice HTML è la base di partenza per avere una serie di vantaggi relativi alla struttura stessa della pagina web. A volte basta approfondire il ruolo di pochi tag per avere a portata di mano una serie di regole fondamentali per aiutare Google a capire cosa si trova nel documento che hai pubblicato online.

SEO del codice HTML

Molte tecniche di miglioramento delle risorse che utilizziamo per raggiungere un ranking ideale su Google non fanno altro che sfruttare le basi del codice HTML, e in base a tale meccanismo di marcatori per ipertesti possiamo trasformare una pagina web da semplice documento in strumento per intercettare potenziali clienti.

Come ottenere questo risultato? In che modo si fonde tutto questo con l’ottimizzazione SEO di WordPress? Ecco quali sono le regole base della SEO per HTML e per migliorare il codice sorgente delle pagine web.

Rel Nofollow

Uno degli elementi SEO per un sito web è il rel=”nofollow”, l’attributo che permette a un link di non essere seguito dai motori di ricerca. Grazie a questa aggiunta puoi fare in modo che, ad esempio, Google non dia valore al collegamento che hai messo, pur mantenendo inalterata l’UX.

Quindi puoi sempre cliccare il link e visitare le pagine web ma non c’è passaggio di valore. Questa soluzione si inserisce quando si inseriscono banner commerciali, link a siti di clienti o che ritieni poco affidabili.

Meglio seguire queste regole, suggerite anche da Google, per evitare penalizzazioni. Se qualcuno mette un backlink al tuo sito web con il nofollow perdi il valore SEO di quel collegamento.

Meta description

Tra le diverse attività di ottimizzazione SEO dell’HTML troviamo anche la compilazione della meta description. Che in termini di ranking non ha alcun valore ma permette di ottimizzare il click-through rate. Vale a dire la percentuale di visite ricevute in relazione alle impressioni che puoi monitorare con la Search Console.

Questo significa che una meta description migliore permette di aumentare le probabilità di ottenere visite. Questo passaggio si può inserire con WordPress SEO by Yoast e deve rimanere sotto le 150 battute.

Heading

I tag che fanno da titolazione delle pagine web vanno dall’H1 all’H6 e consentono di creare una struttura logica del documento. Il testo del titolo H1 è sicuramente uno dei più importanti perché rappresenta il titolo della pagina web: deve essere sempre presente e non è consigliabile metterne più di uno.

Come gestire gli heading su WordPress
Come gestire gli heading su WordPress – Fonte immagine

Gli H2 rappresentano i capitoli di un documento al cui interno possono essere inseriti gli H3. La logica è quella di mantenere un ordine gerarchico per comunicare sia a Google che agli utenti come è organizzata la risorsa.

Rel canonical

Abbiamo già parlato del rel="canonical". Si tratta di un elemento HTML che permette di indicare a Google qual è la versione da seguire di una pagina web. Come si usa questo strumento raffinato della SEO per HTML?

Di base, il canonical punta verso l’indirizzo della pagina. Ma se hai ad esempio due risorse simili e vuoi evitare contenuti duplicati puoi comunicare nella pagina che reputi secondaria l’URL principale nel canonical.

Tag Noindex

Il meta tag noindex è uno dei pilastri necessari per l’ottimizzazione SEO HTML. Questo parametro permette di non indicizzare una pagina web e si usa a livello di singola pagina. Per intere sezioni di sito web si può utilizzare il robots.txt. Nel caso del meta tag il codice si inserisce nell’area <head> e si articola in questo modo:

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

Si possono applicare anche delle specifiche rispetto al tipo di motore di ricerca che vuoi escludere dall’indicizzazione. Ad esempio, puoi indicare nel meta name il termine Googlebot per suggerire di chiudere le porte solo al motore di ricerca Google. Per verificare eventuali blocchi puoi utilizzare lo strumento controllo URL.

A href

Questo è il tag indispensabile per inserire i link nella tua pagina web. Vale a dire i collegamenti ipertestuali che ti consentono di raggiungere fonti esterne e sullo stesso dominio. I link interni sono un fattore di posizionamento SEO perché suggeriscono a Google le risorse più importanti, quindi dobbiamo imparare a usare con cura questo elemento.

<a href="https://www.esempio.it/">Questo è un esempio</a>

Ecco come usare questo tag. Come puoi facilmente notare, <a href> è un tag che pretende una chiusura </a> e al suo interno puoi aggiungere diversi attributi. Tipo il nofollow, la presenza di link generati dagli utenti o sponsorizzati. Inoltre puoi inserire l’elemento title che descrive il contenuto da raggiungere.

Tag title

Google dà molta attenzione alla compilazione dei meta tag che usi per compilare lo snippet, i risultati delle pagine di ricerca. Uno degli elementi fondamentali è il tag title che nella SEO per HTML ha un ruolo fondamentale. Questo elemento, infatti, comunica a Google il topic principale e consente di estrarre il tema principale della pagina. Le regole da rispettare: evita testo ripetuto altrove ed eccesso di keyword.

tag title
In azzurro c’è il tag title.

Poi usa massimo 65 battute nel tag title e cerca di essere più chiaro possibile. Ricorda che Google può utilizzare anche altre fonti per creare il titolo del risultato, come ad esempio il tag H1 e testi rilevanti all’interno della risorsa.

Tag alt

Tra i vari elementi che compongono l’inserimento di un’immagine nel documento web, il tag alternative è uno dei più importanti per l’ottimizzazione SEO dell’HTML. Questo perché attraverso il testo che inserisci nel campo alternativo comunichi a Google qual è il tema dell’immagine. Informazioni che il motore di ricerca ottiene anche in altro modo, ad esempio grazie al testo circostante. Però il tag alt ha un ruolo fondamentale.

<img src="esempio.jpg" alt="Questo testo descrive la foto esempio"/>

Per le immagini decorative può essere lasciato anche vuoto ma per quelle che vuoi correlare a un contenuto conviene compilare questo campo usando parole semplici e capaci di far capire cosa si trova su un’immagine.

Per approfondire l’argomento consiglio le lezioni di Giorgio Taverniti che affronta l’argomento HTML per la SEO con ben 8 ore di lezione su YouTube dedicate a questo argomento così importante per chi lavora online.

Clicca per votare questo articolo!
[Voti totali: 2 Media: 5]
Tag: seo

Discussione

Lascia un commento

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