Il tag META in HTML

In questo documento viene descritto qualche dettaglio interno del linguaggio HTML (eg. il tag META), ma viene in qualche modo descritta anche l'evoluzione del linguaggio ed i suoi standard.

Il tag META e' un elemento del linguaggio HTML che consente di specificare il valore di alcune variabili. Qualunque valore venga impostato sul tag META, per per quanto riguarda la visualizzazione dal browser del documento, non vi sara' alcuna differenza! Quindi che ci frega??
In realta' e' molto importante: il tag META consente di fornire indicazioni ai browser e, soprattutto agli spider (o robot) dei motori di ricerca, sugli argomenti e le caratteristiche del documento HTML di cui fa parte. In questo modo un documento puo' essere catalogato in modo corretto sui motori di ricerca ed essere cosi' piu' facilmente trovato dai naviganti.

Il tag META viene utilizzato nella sezione HEAD. Sono utilizzabili tre attibuti:

La differenza tra NAME ed HTTP-EQUIV e' che con il secondo le informazioni vengono passate nell'intestazione della risposta fornita al browser.

Un esempio tratto da questo stesso documento:


<META HTTP-EQUIV="content-type: text/html; charset= ISO-8859-1">   
<META NAME="generator" CONTENT="vi">
<META NAME="author" CONTENT="mail@meo.bogliolo.name">
<META NAME="description" CONTENT="Using the META tag in HTML">
<META HTTP-EQUIV="Content-Language" CONTENT="IT">
<META HTTP-EQUIV="keywords" CONTENT="META, HTML, search engine, motori di ricerca">

Principali variabili

Ecco un breve elenco delle principali variabili utilizzabili (ci sono quasi tutte).

Variabile Attributo Note
author NAME Ovvio
description NAME Non superare i 100ch
copyright NAME Ovvio e poco utilizzato
generator NAME Si riferisce allo strumento utilizzato per l'editing dell'HTML
robots NAME Valori possibili: all/none/index/noindex/follow/nofollow
content-type HTTP-EQUIV content-type: text/html; charset= ISO-8859-1
content-language HTTP-EQUIV Tra gli altri: IT, EN, ...
expires HTTP-EQUIV Scadenza della pagina HTML dalla cache.
refresh HTTP-EQUIV Nel CONTENT si indica il tempo di refresh. E' anche possibile indicare un URL da caricare.
keywords HTTP-EQUIV Il piu' importante per i motori di ricerca!

Tutto chiaro, non e' vero?
Con un buon uso delle variabili META e' cosi' possibile controllare in qual modo verrano catalogati i nostri documenti web sui motori di ricerca.


I motori di ricerca

La quantita' di documenti pubblicati su Internet (o piu' propriamente su WWW: il World Wide Web) e' ormai enorme. La ricerche delle pagine di interesse del navigatore e' ormai da tempo basata sui motori di ricerca (eg. Google, Altavista, Yahoo, Virgilio, ...) su cui si indicano le proprie chiavi di ricerca per ottenere un elenco di siti da visitare.

Ogni motore di ricerca utilizza tecniche proprie per catalogare (indicizzare) i documenti sulla rete e per restituire l'elenco dei documenti cercati al navigatore. La sola ricerca nel testo e' tuttavia molto onerosa e spesso porta a risultati poco significativi. Tecniche piu' "intelligenti" utilizzano il TITLE ed il tag META. Percio' se si vuole che le proprie pagine siano trovate nelle "prime posizioni" sugli elenchi dei motori di ricerca e relativamente ad argomenti corretti e' opportuno utilizzare con intelligenza titoli e tag meta. Buon divertimento!

Per fare in modo che un proprio documento venga inserito nei database di un motore di ricerca spesso lo si registra inserendo l'URL in un form apposito. Spesso i motori di ricerca "inviano" i loro robot, spider o web crawler per controllare l'esistenza ed il contenuto delle pagine mantenute nella loro base dati.


Robot e spider

Non ci sono solo navigatori "umani" a leggere le pagine web!
I motori di ricerca (generalmente sono loro... solo di recente sono stati sviluppati tool OSINT [NdE Open Source Intelligence] come Maltego e Creepy) utilizzano programmi che accedono alle pagine Web per controllarne e registrarne il contenuto. Poiche' eseguono una navigazione automatizzata questi programmi sono stati chiamati robot. Un altro simpatico nome con cui si riferisce loro e' quello di spider (ragni NdR) poiche' percorrono tutto il Web [NdE rete o tela in inglese].

In alcune occasioni puo' essere opportuno evitare la visita dei robot. Questo puo' essere effettuato con un file posto nella directory di partenza di un sito. Il file si chiama robot.txt e permette di specidicare quali PATH non debbono essere visitati...

Piu' recente [NdA 2005] e' stata l'introduzione del file sitemap.xml che consente il SEO (Search Engine Optimization) ovvero ottimizzare la ricerche sul sito web. Dal punto di vista tecnico e' un'evoluzione del file robot.txt


User-agent:*
Disallow:/demo/
Disallow:/intranet/
 

La variabile ROBOT del tag META consente invece di specificare tale esclusione per un singolo documento.

Con la crescita di Internet l'importanza del motori di ricerca (Search Engine) come Google, Yahoo, Bing, ... e' diventata sempre maggiore e quindi si sono evolute le tenciche per apparire prima nei risultati delle ricerche. Ora si parla di tecniche di SEO (Search Engine Optimization) per scalare le SERP (Search Engine Results Page)... in pratica rendere il sito ottimizzato per i motori di ricerca e non per i lettori!
Qualche esempio? L'attributo rel="nofollow" per non far seguire agli spider i link della pagina (corretto se usato in modo appropriato) oppure inserire nel testo parole ricercate di frequente ma non attinenti alla pagina o infine scambiare link con altri siti.


Standard

Nel tempo sono stati definiti da parte del W3C standard sempre piu' precisi per l'HTML (con strani sigle come HTML 4, XHTML, XML, DTD, WCAG 1.0/2.0...). L'attuale versione dell'HTML e' la 4.01 ed e' anche l'ultima. Infatti la sua evoluzione e' XHTML (simile all'HTML ma basato sull'XML e quindi estensibile). L'HTML 4.01 specifica i DTD (Document Type Description) che gli autori devono includere nei loro documenti. I DTD differiscono negli elementi che supportano.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
        "http://www.w3.org/TR/html4/frameset.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">

Nel primo caso vengono supportati tutti i costrutti delle versioni HTML precedenti compresi i <FRAME>, anche se sono sconsigliati. Nel secondo caso vengono tollerati i costrutti grafici come i <FONT>. Il terzo caso e' quello piu' restrittivo che richiede l'utilizzo di fogli di stile (CSS) per la definizione dei costrutti grafici.

Seguire le regole previste dagli standard rende i documenti web utilizzabili in modo omogeneo con browser differenti e garantisce una certa leggibilita' anche in modalita' testuale (eg. summary in <TABLE>). Sono le basi per rendere accessibili i documenti su Internet.
Per maggiori dettagli e' opportuno consultare il sito ufficiale, e' utile comunque riportare i link di 3 tra i piu' diffusi validatori:

Se si superano i controlli richiesti ci si puo' fregiare dei loghi relativi come:

Valid HTML 4.01 Transitional Valid CSS! Valid XHTML 1.0 Strict Level A conformance icon, 
          W3C-WAI Web Content Accessibility Guidelines 1.0 Level Double-A conformance icon, 
          W3C-WAI Web Content Accessibility Guidelines 1.0 Level Triple-A conformance icon, 
          W3C-WAI Web Content Accessibility Guidelines 1.0

Cosa di una certa importanza in Italia anche perche' richiesta dalla Legge 9 gennaio 2004, n. 4 "Disposizioni per favorire l'accesso dei soggetti disabili agli strumenti informatici" pubblicata nella Gazzetta Ufficiale n. 13 del 17 gennaio 2004 e successivo decreto legge "Accesso dei disabili agli strumenti informatici" dell'8 luglio 2005 (detta anche legge Stanca).

Logo Accessibilita'

I loghi previsti dalla legge italiana possono essere utilizzati solo dopo che l'approvazione della richiesta alla Presidenza del Consiglio dei Ministri- Dipartimento per l'innovazione e le tecnologie per via telematica tramite il sito del Centro... (Cnipa) ed hanno un costo.

NB. Questo documento, e con una certa fatica nel farlo, e' solo:

Valid HTML 4.01 Transitional Valid CSS! Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0

E' anche importante verificare che i browser visualizzino correttamente l'HTML. Per la verifica dei browser sono stati sviluppati alcuni test chiamati Acid Test. L'ultima versione e' Acid3 ed i browser, nelle versioni piu' recenti (Safari 4, Chrome 4, Firefox 4, IE 9) la supportano con 100/100, anche se con alcune variazioni occorse nel tempo...

Acid3 result

Con i browser su Mobile l'evoluzione e' molto forte, sia su iPhone che su Android i browser ottengono il 100/100. Mentre sulle console di gioco ed altri dispositivi la situazione e' molto differente anche se con alcune eccellenze (eg. Kindle 3.3 100/100 Acid3).

HTML5

L'evoluzione inizialmente prevista dell'HTML verso forme piu' strutturate come l'XML ed l'XHTML non ha trovato la convergenza sperata dal Consorzio W3C. Sono nate estensioni e variazioni, alcune di notevole impatto ed importanza come VB Script e Flash ma che si sono allontanate dallo standard.
Con una scelta pragmatica e comunque coraggiosa il W3C ha deciso di definire un nuovo standard chiamato HTML5 che elimina le parti poco o male implementate nei browser ed allo stesso tempo introduce parecchie nuove funzionalita'. Tra le novita' dell'HTML5 che ritengo piu' importanti: multimedia ( audio, video ), semantica, microdata, grafica 2D (canvas), CSS3, Web Storage, offline, georeferenziazione, nuovi TAG, grafica vettoriale (SVG), MathML, ...

Il riferimento completo sulle novita' introdotte dall'HTML5 si trova su sito W3C.
Lo standard e' ancora in via di definizione, ma gia' i principali produttori di browser si stanno orientando all'HTML5. Una prova? In attesa dei test standard definitivi... provate il Validator W3C su questa stessa pagina, ma anche su una pagina HTML5, il Rich Snippet Test di Google, un browser test, un altro browser test !

Il Web ed i contenuti

In questi ultimi anni si e' fatto un gran parlare di ottimizzazione di siti web, di SEO (Search Engine Optimization), ... in pratica tecniche, a volte al limite della correttezza, per rendere un sito ben visibile sulla rete migliorando la sua posizione sui motori di ricerca. Le tecniche di base sono quelle gia' riportate in questa pagina, ma non va dimenticato un elemento fondamentale: il contenuto.
Se una pagina web e' scritta male, se i contenuti sono poveri anche se la leggerenno molte persone, non potra' mai essere apprezzata.

E' importante non dimenticare le lezioni su come scrivere di un grande maestro italiano (Italo Calvino). Ecco i valori a cui ispirarsi nella scrittura di un buon testo:

  1. Leggerezza
  2. Rapidita'
  3. Esattezza
  4. Visibilita'
  5. Molteplicita'
  6. Consistenza

  7. Open Source

Mi sono permesso una piccola aggiunta... ma Calvino aveva anticipato di molto i tempi nell'immaginare la letteratura del prossimo millennio.


Testo: Il tag META in HTML
Data: 1 Aprile 2000
Versione: 1.0.6 - 14 Febbraio 2013
Autore: Meo Bogliolo