I meta tag HTML

Imparare l’HTML – I meta tag

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 solo a questo.

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, in questo nuovo articolo andremo ad imparare dei nuovi codici da inserire in <head>: i meta tag.

A cosa servono i meta tag?

I meta tag hanno il compito di stabilire 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 agli spider.

Ci sono diversi tipi di attributi o meta dati forniti da 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 sua tipologia all’interno. Per fare un esempio:

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

Qui abbiamo inserito nei tag meta la descrizione della pagina e l’autore. La descrizione meta è quella che verrà poi utilizzata anche dai motori di ricerca nei loro risultati.

esempio meta description

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)">

Parole chiave (non indispensabili, Google non le considera più):

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

Autore:

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

Character Set (Definisce la codifica dei caratteri per la pagina HTML, valido solo per HTML5):

<meta charset="UTF-8">

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">
differenza con o senza viewport
Differenza senza e con meta tag viewport – w3schools.com

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

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


Continua con: Come richiamare risorse esterne

Leggi anche: Elenchi e liste HTML o il Corso completo di HTML

Articoli Recenti

Condividi ora!

Lascia un commento

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

CAPTCHA