La guida definitiva per i web designer: i meta tag HTML che contano davvero

Se Google vi dice di fare qualcosa, è meglio che lo facciate.

Tuttavia, sapete come vanno le cose con Google. Gli algoritmi cambiano continuamente e ciò che il motore di ricerca considera importante un anno passa rapidamente in secondo piano con il passare del tempo. Ecco perché alcuni dei meta-tag che si possono incontrare non sono altro che residui obsoleti di ciò che interessava a Google.

E quando si tratta di utilizzare i meta tag HTML per la SEO, nessuno di noi dovrebbe perdere tempo.

Questa guida vi aiuterà a concentrarvi solo sui meta tag necessari. Vi dirà anche quando e come potete usarli.

Cosa sono i meta tag HTML?

L’intestazione di una pagina web contiene molte informazioni sui contenuti presenti. Qui si trovano i meta-tag HTML e i link a CSS o JavaScript che si applicano alla pagina.

Da questo snippet si possono ricavare alcuni dettagli importanti sulla pagina:

(Meta) titolo
Meta descrizione
Tipo di contenuto e viewport

Questi sono tutti meta-tag. Nella maggior parte dei casi sono scritti in HTML come coppia nome/valore. Ad esempio:

In sostanza, i meta tag non sono altro che dati sul contenuto della pagina web. I metatag non appaiono mai sulla pagina. Esistono in background, in attesa che i bot di ricerca scoprano l’HTML e lo utilizzino per migliorare i risultati di ricerca della pagina. Sono utili anche per i browser, i feed RSS e i social network che presentano questi dati agli utenti e ne visualizzano i contenuti.

Quali meta tag devo usare?

Alcuni sostengono che si dovrebbero utilizzare tutti i meta tag riconosciuti da Google e dagli altri motori di ricerca. Ma, proprio come nel caso del design e dello sviluppo web, è necessario affrontarlo con saggezza.

Quindi, invece di perdere tempo a riempire le vostre pagine web con tutti i meta tag possibili, dovete sapere quali sono rilevanti e quali non dovreste usare affatto.

Titolo

Esempio HTML

Che cosa fa?

Il tag punta al titolo della pagina.

È davvero necessario?

Sì, non è nemmeno discutibile, in quanto indica ai motori di ricerca il nome della pagina.

Questo tag è utile se si vuole personalizzare il titolo in modo specifico per i risultati di ricerca. Quindi, diciamo che avete scritto un titolo clickbait in modo che i visitatori che lo vedranno vorranno sapere di cosa si tratta. Qualcosa come:

Come guadagnare uno stipendio a sei cifre con nient’altro che il vostro computer portatile, il passaporto e il vostro migliore amico

(Come guadagnare uno stipendio a sei cifre con nient’altro che il vostro computer portatile, il passaporto e il vostro migliore amico)

Questa riga di intestazione è lunga 98 caratteri e Google non è in grado di visualizzarla per intero. Invece di riscrivere il titolo del vostro sito, potete usare il tag headline per dare a Google un titolo più in linea con i suoi standard, ad esempio:

Sono 56 caratteri, ora il titolo rientra nei limiti di Google e funziona bene come l’originale.

Descrizione

Esempio HTML

Che cosa fa?

È un riassunto di ciò che si trova nella pagina. In una ricerca, è la descrizione della pagina che appare sotto il titolo e l’URL della pagina.

È davvero necessario?

Sì, è un altro meta tag importante.

Se si dà a Google la possibilità di creare una descrizione della pagina, è probabile che si tratti dei primi 160 caratteri di qualsiasi cosa vi trovi. E se ci sono annunci nella parte superiore della pagina, un’immagine di testo o altro, il sito potrebbe essere bloccato con una meta descrizione scadente.

Quindi, prendetevi il tempo di scrivere voi stessi la descrizione.

Set di caratteri

Esempio HTML

Che cosa fa?

Questo meta tag specifica il set di caratteri che il browser deve utilizzare per interpretare il contenuto.

È davvero necessario?

UTF-8 non è l’unico set di caratteri e non è universalmente accettabile. Assicuratevi quindi di definire un set di caratteri predefinito per il sito utilizzando questo meta tag.

In caso di dubbio se il vostro sito ha bisogno di questo particolare set di caratteri, fate riferimento a questo elenco. Se il vostro sito web deve essere tradotto per un pubblico internazionale, dovreste utilizzare un set di caratteri diverso. UTF-8 non è un’opzione.

Hreflang

Esempio HTML

Che cosa fa?

Questo tag indica a Google in quale lingua o dialetto regionale si trova il contenuto della pagina, in modo da poterlo mostrare agli utenti giusti.

È davvero necessario?

Ci sono diversi motivi per utilizzare questo meta tag:

Quando si crea un sito web internazionale con diverse versioni tradotte;
Quando si scrive un contenuto in un dialetto particolare, come en-us o en-gb;
Quando la vostra pagina contiene un misto di lingue o dialetti e volete che ognuno di essi sia individuabile.

Portafoglio di visualizzazione

Esempio HTML

Che cosa fa?

Fornisce indicazioni su come Google dovrebbe visualizzare la vostra pagina su tutti i dispositivi. Questo è particolarmente importante per i dispositivi mobili.

È davvero necessario?

Sì. Infatti, se non lo si include o lo si utilizza in modo errato, si può interrompere l’esperienza di navigazione degli utenti sui dispositivi mobili.

Per questo motivo Google consiglia di impostare sempre il contenuto su width = device-width, initial-scale = 1. Se cercate di inserire variabili come la scala minima, potreste rovinare l’aspetto del vostro sito web. Questo perché si trasformerà, ad esempio, dall’orientamento verticale a quello orizzontale.

Collegamento canonico

Esempio HTML

Che cosa fa?

Se il vostro sito web ha contenuti duplicati o pagine molto simili, il meta tag canonical indica a Google quale pagina è l’originale, in modo da indirizzare il traffico verso di essa.

È davvero necessario?

Google non accetta i contenuti duplicati. Ma diciamo che il vostro articolo “5 modi per migliorare la sicurezza di WordPress oggi” è una riscrittura di un articolo chiamato “7 modi per migliorare la sicurezza di WordPress” del 2015.

Invece di essere penalizzati da Google per aver inserito contenuti simili sul vostro sito web, potete utilizzare questo meta tag per mostrare a Google dove si trova l’originale.

Questo è utile anche se avete cambiato la struttura dell’URL e volete assicurarvi che tutto il traffico vada al link più recente.

Robot

Esempio HTML

Che cosa fa?

Il meta tag “robots” indica a tutti i bot di ricerca (robots) o a bot specifici (googlebot, bingbot, duckduckbot, ecc.) come elaborare la pagina. Di solito ha a che fare con il modo in cui la pagina deve essere indicizzata.

È davvero necessario?

Per impostazione predefinita, i motori di ricerca indicizzano e collegano ogni pagina creata sul vostro sito.

Ci sono diversi motivi per cui si potrebbe voler forzare i motori di ricerca ad agire in modo diverso:

noindex: utilizzare questo tag se si desidera nascondere la pagina dalla ricerca. (Non fare affidamento su questo per motivi di sicurezza. Ricordate che si tratta solo di una soluzione tecnica).
nofollow: è utile per i blog che accettano contenuti dagli autori, ma non li verificano. In questo modo, se i link di affiliazione vengono inseriti nella pagina, Google non li seguirà.
nosnippet o max-snippet: controlla il modo in cui lo snippet di testo, immagine o video viene visualizzato nella ricerca.
noarchive: se esistono versioni precedenti della pagina nella cache, utilizzare questo tag per evitare che i motori di ricerca le mostrino.
unavailable_after:[date]: questa è una buona opzione per le promozioni limitate, come ad esempio durante le vendite del Black Friday. Se si vuole portare traffico alla pagina da ottobre a dicembre, potrebbe essere sensato rimuovere tutto dalla ricerca dopo le vacanze e le offerte finite.

Verifica del sito Google

Esempio HTML

Che cosa fa?

Questo è uno dei metodi che si possono utilizzare per verificare la proprietà del sito in Google Search Console.

È davvero necessario?

Questo meta tag non è necessario se si è scelta una delle altre opzioni di convalida. Ad esempio, è possibile dimostrare la proprietà del sito utilizzando il codice di monitoraggio di Google Analytics o aggiornando il record DNS. Se si preferisce, si può semplicemente aggiungere il meta tag HTML all’intestazione.

Twitter Cards e Open Graph (Social Media)

Esempio di HTML

Che cosa fa?

I meta tag Open Graph (come nel caso dello snippet qui sopra) indicano a Facebook e LinkedIn come visualizzare i metadati di una pagina o di un post pubblicato su questi social network.

I meta tag delle Twitter Card fanno la stessa cosa, ma di solito richiedono anche un descrittore (@).

È davvero necessario?

Può essere utile, ma è ben lontano dall’essere uno dei meta tag più necessari. In base alla mia esperienza, quando inserisco i metadati di base (titolo, meta descrizione, immagini selezionate) questo è ciò che appare quando li promuovo sui social media.

Per riassumere

Questo non è assolutamente un elenco esaustivo di tutti i meta tag esistenti, ma solo di quelli più essenziali.

Ad esempio, potreste imbattervi in pagine web che contengono meta tag obsoleti che dichiarano l’autore, il copyright o il posizionamento. Non funzionano più e non bisogna sprecare il proprio tempo con loro.

Pertanto, è necessario assicurarsi che i motori di ricerca sappiano esattamente di cosa hanno bisogno per indicizzare la pagina. E assicuratevi che i vostri documenti HTML non siano sovraccarichi di tag non necessari.