I meta tag che devi inserire nel tuo sito web

I meta tag sono un’importante componente delle pagine HTML di un sito, perché consentono di inserire utili informazioni (metadati) interpretabili dai browser e dai motori di ricerca per indicizzare, posizionare e presentare il tuo sito web all’interno dei risultati di ricerca.

In questo articolo, adatto sia agli addetti ai lavori, che a web designer e SEO Strategist alle prime armi, cerchiamo di fare un po’ di chiarezza sull’uso di questi importanti tag, apprendendo il loro utilizzo e significato.

Come inserire un meta tag nel tuo sito web


Innanzitutto chiariamo il modo in cui un meta tag viene inserito all’interno del codice HTML, partendo da una pagina semplice, composta solamente dai tag principali <head></head> e <body></body>, come vedi nell’immagine qui sotto.



All’interno del <body></body> andrai ad inserire i tag che compongono la struttura vera e propria della pagina: contenitori, immagini, testi, link ad altre pagine e, per ultimo, il codice javascript, mentre all’interno del <head></head> troveranno posto: i rimandi al CSS, il tag <title></title> ed i nostri meta tag. Ma come dichiarare ciascuno di essi? Semplice, esiste un tag apposta, proprio come avviene per le immagini, i link o altri componenti della pagina, stiamo parlando del tag <meta>.

Comunemente troverai questo tipo di tag abbinato a due attributi name e content, dove il primo indica il tipo di meta tag ed il secondo l’informazione da comunicare al browser ed al motore di ricerca, ma dipende da caso a caso. Nell’immagine qui sotto puoi vedere un esempio.



Come impostare la codifica dei caratteri della tua pagina HTML


Sicuramente ti sarà capitato di ricevere una e-mail o aprire una pagina internet, nella quale comparivano caratteri “sostitutivi” al posto delle lettere accentate, per esempio. Questo problema è dovuto alla mancata dichiarazione della codifica dei caratteri o charset e puoi risolverlo facilmente utilizzando il meta tag:

<meta charset="utf-8">

Puoi notare che l’attributo charset ha come valore utf-8, ovvero “Unicode Transformation Format, 8 bit”, che consente la rappresentazione di quasi tutti i caratteri del linguaggio scritto.

Impostare la descrizione della pagina web


All’interno della SERP, la pagina che contiene l’elenco dei risultati restituiti dal motore di ricerca, hai notato che ciascuna voce è rappresentata da un titolo (ricavato dal <title></title> della pagina HTML), un link ed una descrizione, preferibilmente accattivante, della pagina di destinazione del link. Puoi vederla in figura evidenziata in rosso.



Questa descrizione viene inserita attraverso il meta tag description:

<meta name="description" content="Qui inserisco una descrizione breve ed accattivante della pagina">

Nella descrizione, cerca di essere convincente, l’utente deve essere persuaso a visitare la tua pagina, quindi comunica subito il beneficio che potrà ottenere con il tuo servizio o cosa potrà trovare in quell’area del tuo sito web e non superare i 150 caratteri di lunghezza, per evitare che il testo venga tagliato.

In assenza di questo meta tag all’interno del tuo codice HTML, la descrizione viene completata automaticamente in base al contenuto della pagina, con risultati quasi sempre pessimi. Per questo motivo è fondamentale non dimenticare mai di inserire il meta tag description!

Indicare l’autore della pagina o del sito web


Esiste un meta tag apposito per indicare l’autore di una pagina web o dell’intero sito ed è

<meta name="author" content="Nome dell’autore">

che va a braccetto con il meta tag necessario ad indicare il copyright

<meta name="copyright" content="Proprietario dei diritti">

Questi due meta tag non hanno rilevanza dal punto di vista della SEO, ma sono utili per memorizzare a chi risale la proprietà del sito, quindi è buona norma inserirli.

Fornire istruzioni ai robot


I crawler o robot o spider, sono software in grado di analizzare periodicamente i contenuti e le pagine di un sito web per inserirle all’interno di un indice, per conto del motore di ricerca.

Attraverso il meta tag robot è possibile fornire informazioni sul comportamento che il crawler deve mostrare nei confronti del contenuto, indicando se deve seguire i link inseriti all’interno della pagina e se deve indicizzarla o meno.

Il meta tag si presenta in questo modo:

<meta name="robots" content="index, follow">

Come puoi notare, all’interno dell’attributo content abbiamo due voci: index e follow. Index richiede allo spider di indicizzare la pagina web, ma se volessi impedirglielo, basta scrivere noindex, al posto di index.

Follow ordina invece al crawler di seguire, come normalmente avviene di default, i link contenuti all’interno della pagina web, ma se non dovesse farlo è sufficiente indicare nofollow, invece di follow.

Controllare il comportamento della viewport


Questo meta tag è fondamentale per il web moderno, in quanto controlla il comportamento della pagina web sui dispositivi mobili. Attenzione però, non è solo attraverso questo tag che rendiamo un sito web responsive (Puoi trovare maggiori informazioni sui siti web responsive in questo articolo: Perché devi avere un sito web responsive?), per ottenere un sito web responsive serve il codice CSS. Attraverso il meta tag viewport suggeriamo infatti semplicemente al browser come deve gestire la viewport, ovvero l’area di visualizzazione, per presentare la pagina web.

Se questo meta tag non viene dichiarato, sui dispositivi mobili la pagina web viene adattata automaticamente per contenere l’intero layout, come se la stessi visualizzando dal desktop, comportando, a volte, contenuti molto piccoli, oltre alla possibilità di zoomare e scrollare, rendendo scomoda la navigazione.

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

Analizziamo più nel dettaglio il contenuto del meta tag viewport. Con width=device-width diciamo al browser di impostare la larghezza della viewport, in modo che coincida con quella dello schermo del dispositivo sul quale viene visualizzata la pagina.

L’impostazione initial-scale=1 dichiara invece che lo zoom deve conservare un rapporto di 1:1, evitando uno zoom automatico del browser e, attraverso user-scalable=no, andiamo ad inibire la possibilità dell’utente di zoomare la pagina.


Ora che abbiamo analizzato i meta tag principali, che non devi assolutamente dimenticare, possiamo dare un’occhiata a come si presentano, tutti insieme, all’interno della tua pagina HTML:



Bello, vero? :)

Se vuoi imparare di più sulla realizzazione di un sito web, iscriviti ai nostri corsi di formazione sul web design!

Questo articolo ti è piaciuto? Condividilo con i tuoi amici!

Commenti

Il tuo giudizio è importante! Commenta qui sotto.

Lascia per primo un commento sull'articolo!

Iscriviti alla newsletter

Ho letto e accetto l'informativa sulla privacy.

Icona caricamento

. . .