HTML5 -meta-tags-thumbnail

 In questo tutorial trattiamo i meta tag, andremo a capire cosa sono, l’importanza che hanno nelle pagine web e come facciamo ad inserirli correttamente.

A cosa servono i Meta Tag

I meta tag sono un insieme di informazioni, metadati, che riguardano la pagina web: un sito web è composto da diverse pagine, in ognuna di queste pagine ci sono dei meta tag in comune ed altri specifici per ogni singola pagina.

Alcuni meta tag danno informazioni riguardo struttura della pagina, altri invece danno informazioni indispensabili per la SEO; ed altri ancora danno istruzioni ai web crowlers, i bot dei motori di ricerca.

Come inserire i Meta Tag

I meta tag sono contenuti nella head, testa, della pagina e non visibili all’utente, come lo è invece il body. Si inseriscono tramite il tag meta e possono avere uno o più attributi. Vediamo quelli prinicipali:

Meta Tag relativi alla Pagina:

Charset

<meta charset="UTF-8">

UTF sta per Unicode Transfotmation Format, ed è il set di caratteri alfanumerici che si usa oggigiorno nei moderni browser. La documentazione di HTML5 consiglia di usare UTF-8 per mostrare le pagine correttamente. In HTML4 il charset era differente e conteneva meno caratteri.

Http-equiv

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Questo meta tag comunica a Microsoft Internet Explorer di usare la sua ultima versione per mostrare la pagina all’utente, ad oggi (2021) è Edge. Praticamente questo meta tag ci da la possibilità di sciegliere con quale versione di Internet Explorer mostrerà la pagina. Se per caso un utente dovesse aprire la pagina da Microsoft Explorer 8, la versione di Explorer di qualche anno fa, senza questo meta tag la pagina potrebbe non essere visualizzata correttamente.

Author e Copyright

 <meta name="author" content="treweb">
 <meta name="copyright" content="treweb">

Questi dichiarano chi è l’autore della pagina o del sito web e tutelano il diritto d’autore, ovvero il copyright.

Meta Tag e SEO

Title

<title>Meta Tag</title>

Tag fondamentale, il contenuto di questo tag apparirà sulla barra dei titoli del browser. E’ necessario inserirlo, è parte integrante della pagina, inoltre è una delle prime cose che i motori di ricerca vanno a vedere per offrire il miglior risultato possibile all’utente quando fa una ricerca. 

Esempio di Meta Tag Title
Esempio di Meta Tag Title

Keywords

<meta name="keywords" content="html, meta tags">

Parole chiave, anche questo meta tag è fondametale per indicizzare le pagine web. Le keywords vanno separate dalla virgola, possono essere inserite come parole singole, o anche come piccole frasi, composte da due a cinque parole, in questo caso parliamo di longtail keywords.

Description

<meta name="description" content="tutorial sui principali meta tag in html5">

Questo tag fornisce ai motori di ricerca una descrizione rigurdante la pagina. Una descrizione corretta deve essere ben fatta ed esaustiva, questo è solo un esempio. Stando a quello che ad oggi Google consiglia la descrizione dovrebbe avere un minimo di 50 fino ad una massimo di 160 parole.

HTML5 - Esempio Meta Tags per la SEO
HTML5 – Esempio Meta Tags per la SEO

Meta Tag e Web Crowlers (Bots)

Come detto nell’introduzione altri danno direttive ai bots, ad esempio se vogliamo che la pagina web non venga indicizzata dai motori di ricerca, ovvero che non venga mostrata quando un utente fa una ricerca, possiamo aggiungerli seguente meta tag:

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

Se invece vogliamo che i motori di ricerca non arrivino alla pagina web traminte un link possiamo dare questa istruzione ai bot:

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

Per risparmiare un po’ di codice i comandi che diamo ai bots possono anche essere messi nelle stesso attributo, basta separare il contenuto dalla virgola:

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

Dove si trovano i Meta Tag

I meta tag sono contenuti nella head tag e sono accessibili tramite il codice.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="html, meta tags">
    <meta name="description" content="tutorial sui principali meta tag in html5">
    <meta name="robots" content="noindex">
    <meta name="robots" content="nofollow">
    <meta name="author" content="treweb">
    <meta name="copyright" content="treweb">
    <title>Meta Tag</title>
</head>
<body>
    
</body>
</html>

I meta tag sono essenziali quando si costruisce un sito web, bisogna inserirli correttamente ed è anche necessario fare una attenta ricerca sulle parole chiave e pianificare una bella e concisa descrizione. Questo fa un enorme differenza in quanto si ha più possibilità di apparire fra i primi risultati quando un utente fa una ricerca.


Guarda il video:

Articoli simili