I Meta Tag

Autore: Luca Ruggiero | Tell a Friend

Corso HTML
Impara il linguaggio di marcatura per il Web.

Corso CSS
Web Design ed Accessibilità secondo il W3C!

Introduzione

I Meta Tag sono una serie di Tag speciali che vengono inclusi nell'header di un file Html, le sue funzioni sono molteplici, consentono ad esempio di essere indicizzati nei motori di ricerca, oppure di eseguire un redirect o un refresh di pagina, di lavorare sulla cache del browser o di stabilire alcune convenzioni che andremo a breve a descrivere.

La loro funzione non è di immediata ricezione, nè da parte dell'utente nè da parte dello sviluppatore, non svolgono insomma funzioni di front-ofice, bensì di back-office, ma la loro utilità è estrema, direi quasi indispensabile ai fini della progettazione di un sito completo in ogni minimo dettaglio.

Andiamo ad analizzare passo per passo i vantaggi che offrono.

Sintassi

La sintassi utilizzata per la loro inclusione è quanto mai semplice, i Meta Tag sono caratterizzati dal Tag vuoto (ovvero non necessita di relativa chiusura) <meta>, i suoi principali attributi sono:

name - indica il nome, ovvero il tipo di Meta che andiamo a dichiarare
content - specifica il lavoro che deve compiere il Meta Tag dichiarato con l'attributo "name"
http-equiv - permette di lavorare con degli operatori tramite il protocollo http
Per chiarezza riporto un esempio pratico dell'utilizzo di un Meta Tag generico: 

<html>
 <head>
  <title>lukeonweb.net ...il giornale per Webmaster</title>
  <meta name="nome_del_meta" content="valore_associato_al_tipo_di_meta">
 </head>
<body>

...
Passiamo ora alle spiegazioni relative ai fondamentali utilizzi di questo Tag.

Motori di ricerca

Come accennato nell'introduzione, è possibile grazie ai Meta Tag essere trovati dai motori di ricerca in seguito ad una ricerca per un termine (o una serie di termini) relativi ad argomentazioni trattate nelle nostre pagine, utilizziamo due distinti Meta Tag, differenziati dal tipo ("name") di Meta utilizzato: description e keywords, vediamo un esempio: 
<meta name="description" content="lukeonweb.net - risorse gratuite per Webmaster...">
<meta name="keywords" content="manuali guide script html css javascript xml asp ... ... ...">
Inserendo questi Tag nell'header di una pagina Html, come nell'esempio del paragrafo precedente, aiuteremo i motori di ricerca nei quali siamo iscritti a trovare le nostre pagine quando qualcuno farà una ricerca per i termini relativi alla tipologia di sito a cui appartiene anche il nostro.

C'è comunque una limitazione, il numero massimo di caratteri consentito tra le parole chiave (keyworde) è 1024 (per alcuni motori spazi compresi), ciò vuol dire che non verranno presi in considerazione i caratteri (e di conseguenza le parole) dal milleventicinquesimo in poi, è bene quindi fare una buona cernita delle parole chiave che possiamo utilizzare, inserendo i più tipici all'inizio.

Concludo questo paragrafo con un consiglio: non utilizzate termini che non c'entrano nulla con la tipologia del nostro sito, molti motori di ricerca indicizzano i siti dopo una selezione fatta dallo staff, ragion per chi, se il nostro sito tratta automobili è inutile inserire termini tipo "sesso hard" ecc. per sperare di essere presenti tra più risultati di ricerca.

Refresh e redirect automatici o a tempo determinato

Come lascia palesemente intendere il titolo del paragrafo, ci occuperemo adesso di creare degli pseudo-link.

Può nascere, per un motivo o per un'altro, l'esigenza di reindirizzare un utente ad un'altra pagina, ad esempio quando un sito viene trasferito sotto un'altro dominio e si vogliono avvisare gli utenti che conoscono solo il vecchio della cosa, tutto ciò senza aspettare che venga cliccato un link, ma a tempo, vediamo come fare: 
<meta http-equiv="refresh" content="30; url=http://www.nuovosito.it">
Come predetto utilizziamo l'attributo "http-equiv" per lavorare direttamente in http, il valore refresh serve ad aggiornare il valore stabilito nel "content".

Il valore 30 è il numero di secondi che trascorreranno prima che inizi il redirect, separato da un punto e virgola (;) viene poi stabilito l'indirizzo da raggiungere.

Un altro esempio potrebbe essere l'aggiornamento di una pagina corrente dopo un tot numero di minuti, magari per evitare che parta lo screen-saver dell'utente distraendolo dalla consultazione della pagina, basta a questo punto utilizzare la stringa 
<meta http-equiv="refresh" content="180">
per iniziare il refresh dopo 3 minuti.

Un consiglio, nonostante la semplicità della cosa, i motori di ricerca non amano questo metodo: consiglio di rifarsi a Javascript per realizzare una temporizzazione del genere.

Lavorare sulla cache del browser

Per i meno avvezzi, la cache è una cartella di sistema di internet, sui sistemi Windows si chiama Temporary Internet Files e si trova sotto C:WINDOWS su sistemo Windows 98, oppure sotto C:WINNT su sistemi Windows 2000 e NT, in questa cartella vengono memorizzati i cookies ed i file (sia immagini che Html, o altri) che si trovano sulle pagine che abbiamo visitato fino all'ultima volta che ne abbiamo cancellato il contenuto (cosa che consiglio di fare con una certa periodicità).

La cache ha una funzione ben precisa, ovvero salvare e memorizzare informazioni, la prima volta che apriamo una pagina tramite http, il tempo di caricamento è più lungo rispetto al secondo collegamento, grazie al fatto che i file sono già memorizzati in questa cartella, verranno presi quindi soltanto gli ultimi aggiornamenti a quella pagina dalla nostra ultima visita.

Potrebbe però nascere la necessità di non permettere alla cache di memorizzare alcun dato di una pagina, la cosa viene utilizzata soprattutto in siti con sistemi di e-commerce o notizie in tempo reale, il Meta che utilizzeremo è semplicissimo: 
<meta name="pragma" content="no-cache">
Altri utilizzi dei Meta Tag

Possiamo stabilire alcune convenzioni da utilizzare o alcune informazioni da rendere note sia agli utenti "curiosoni" che sbirciano il codice, sia ai motori di ricerca in fase di indicizzazione delle nostre pagine, vediamo un esplicativo esempio: 
<meta name="Owner" content="lukeonweb.net ...il giornale per Webmaster">
<meta name="Author" content="Luca Ruggiero">
<meta name="Copyright" content="(c) Luca Ruggiero 2002 - non ho il copyright!">
<meta name="Generator" content="Front Page Express">
Dunque, iniziamo a stabilire che non ho usato Front Page, è solo un esempio :-) owner stabilisce la ditta proprietaria del sito, author l'autore, il Webmaster, copyright parla da se! e generator il software di sviluppo.

Conclusioni

Questi sono solo i principali scopi ed utilizzi dei Meta Tag, si potrebbero scrivere libri interi sulla loro funzione, ma il necessario è presente in questa pagina, sarebbe inutile per me e per voi sforzarsi a discutere di cose che magari non utilizzeremo mai!

IN EVIDENZA
Effetto ombra su testo con Photoshop Guadagna col tuo sito grazie a TradeD... Guida XHTML Riscrivere le URL con Asp Riavviare IIS HTTP 500 internal server error Generare password casuali in Javascri... Errore 80004005: Cannot update. Datab... Introduzione ad Ajax ed Asp con Jscri... Referenze dei Tag Html Stringhe di connessione via ODBC e Ol... Referenze dei fogli di stile Css Le espressioni regolari in Javascript
HOT LINKS
E-Commerce News Manager Newsletter Corsi online eBooks PC Guadagna col sito Offerte lavoro Hosting Joomla Hosting 20 euro Reg. domini Email gratis FAX via email Tlefonare col PC ADSL Alice ADSL FastWeb Sito pronto Download veloce Ottimizzazione PC Traduzioni