Meta Tag HTML - Cosa e come si usano

Indice dei contenuti

In questo articolo imparerai ad impostare correttamente le informazioni meta di una pagina/sito web tramite l’uso del linguaggio HTML

Creare una pagina web in HTML a partire dal contenuto, lo stile, i colori, le immagini e tutto il resto, è sicuramente la parte più piacevole, dove puoi vedere fin da subito i risultati a schermo e valutare il tuo lavoro all’istante. Ma (purtroppo) realizzare un sito web non si limita soltanto a questo aspetto.

Come abbiamo visto nel precedente articolo sulla struttura di una pagina web, dobbiamo capire la differenza tra body e head, e semplificando possiamo dire che il body è “la parte visibile” e l’head, al contrario, “la parte non visibile” di una pagina web.

Abbiamo già parlato di title che serve a definire il titolo della pagina (differente dagli headings H1/H2/H3 etc..) e che fa parte di quei tag che vanno inseriti dell’head della pagina, cioè quelli che non vengono visualizzati direttamente a schermo o con cui interagiscono gli utenti, ma bensì hanno come scopo primario la funzione di fornire informazioni e dati relativi alla pagina.

Oltre a “title” ne esistono altri fondamentali, chiamati meta tag e che andremo a vedere qui di seguito.

I meta tag

A cosa servono i meta tag?

I meta tag hanno il compito di fornire le informazioni e l’identità di una pagina web, forniscono meta dati di un documento HTML, che non saranno visibili all’utente ma esclusivamente a browser ed ai motori di ricerca per una corretta indicizzazione.

Ci sono diversi tipi di attributi o meta dati che è possibile definire con questi tag, tra cui: descrizione della pagina, parole chiave, autore della pagina ecc… ecc…

Come si usano?

All’interno del documento HTML nel tag <head> … </head>, in una posizione qualsiasi vanno inseriti i tag meta e specificare la loro tipologia e contanuto. Per fare un esempio:

<head>
     <meta name="description" content="Ristorante italiano a Berlino, Pizza e Pasta ...">
     <meta name="author" content="Mario Rossi">
</head>

Nell’esempio sono presenti dei tag meta con la descrizione della pagina e l’autore. La descrizione meta è quella che verrà poi utilizzata anche dai motori di ricerca nei loro risultati.

Tipi di meta tag

I meta dati disponibili sono tanti, ma non tutti sono necessari. Di seguito una lista dei più importanti da inserire in una pagina HTML.

Descrizione

<meta name="description" content="testo (circa 155 caratteri al massimo)">

La meta descrizione di cui abbiamo parlato nel paragrafo precedente.

Parole chiave

<meta name="keywords" content="Parole, chiave, separate, dalla, virgola,">

Questa tipologia non è più obbligatoria ne indispensabile, in quanto Google ha dichiarato da tempo di non tenerne più conto.

Autore

<meta name="author" content="Nome Autore">

L’autore della pagina web.

Character Set

<meta charset="UTF-8">

Definisce la codifica dei caratteri per la pagina HTML, valido solo per HTML5

Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

questo attributo serve dare le informazioni sul ridimensionamento e adattamento della pagina, partendo dalle dimensioni dello schermo del dispositivo in uso.

differenza con o senza viewport — Differenza senza e con meta tag viewport – w3schools.com

Basterà inserire questi codici nell’head e modificare i valori dove necessario, in modo che gli spider dei motori di ricerca possano elaborare il documento ed indicizzarlo al meglio in base al contenuto dichiarato.

Prova a scrivere i meta dati e meta tag con il nostro editor HTML online

⇦ Elenchi e liste

Tag link e risorse CSS ⇨

Articoli Recenti