HTML5 - Les métadonnées (Metatags)

Carte inversée du monde par Fra Mauro en 1459 (Auteur : Fra Mauro en 1459) — Carte inversée du monde par Fra Mauro en 1459

· Niveau : DÉBUTANT
· Compatibilité : Tous les navigateurs

Les métadonnées s’accorde parfaitement avec l’aphorisme d’Alfred Korzybski « Une carte, ce n’est pas le territoire » (A map is not the territory). Les métadonnées, c’est la carte! Le territoire, l’information. Et pourtant on commence à peine à les utiliser. Il n’est pas rare de tomber encore en 2014 sur une page sans métadonnées, à peine un titre. Il est vrais que Google les ignores depuis 15 ans!

Google n’a jamais été un grand amateur de balises et de métadonnées. Il s’en fou un peu, il crée ça propre carte et captures des bouts de pages! Si ça lui tente, il peut se fier tout simplement au résultat du répertoire DMOZ! Aujourd’hui on déclare à Google des zones d’en-tête, on précise au scalpel près où se trouve le nom de l’auteur etc... Le tout saisie gracieusement et bénévolement par le Webmestre (signe des limites de la machine). C’est d’ailleurs pourquoi je me suis toujours demandé pourquoi Google n’utilisait pas les métadonnées. Simple! Google ne fait pas confiance à personne, surtout pas à un webmestre! C’est aussi ça le progrès! Enfin Googlebot, le moteur de Google, semble lui respecter la balise universelle « robot » mais a tout de même créé ça propre balise pour indiquer essentiellement la même chose « Googlebot »! D’ailleurs Google précise qu’il ne considère pas la balise « keywords ».

Mise-à-jour 2016 : news_keywords et l’infatué Google!

Google, encore Google, lui qui ne respecte pas les standards et réinvente le Web pour ne pas dire la roue à sa guise. Ajoutez à cela l’ère des médias sociaux et l’arrivée de Open Graph et on patauge dans le marasque! Par chance Google utilise le schéma des microdonnées mais on est rendu avec une dizaine de balises « description »! Et là je viens de tomber sur le comble du ridicule! Google qui refuse de supporté la balise « keyword » depuis ses débuts, sous prétexte d’abus, sort maintenant la balise news_keywords! Après avoir lu un peu sur son nouveau projet « AMP » comme si le web abruti attendait après son sauveur (Google), la déception est de mise avec Google! À peu près tout ce qui sort de nouveau à ce chapitre est une copie conforme de ce qui existe déjà. Google détruit le travail des bâtisseurs du Web! En plus tout plante chez Google depuis quelques temps, ...une réorganisation! Et que dire du moteur bloqué à tout bout de champ, parce que Google confond ses utilisateurs avec des moteurs! Ajouter y ça capacité de vous pister et on se retrouve en 2016 avec un Google (qui n’a pas créé le Web) qui dégrade petit à petit le Web. Keep it simple Google!

<meta name="news_keywords" content="Pour les caprices de Google!" />

Les métadonnées ne servent pas seulement aux moteurs de recherche. Si Google capture la page entière, un navigateur ouvre l’en-tête (head) avant le contenu (body). Par exemple, l’ensemble des données de l’en-tête sont accessible avant le chargement du contenu. Il offre déjà une information lisible, à partir du code source. Mais c’est avant tout des initiatives, des recommandations et des standards pour cartographier l’information dans une sémantique universelle. Parce qu’il est toujours possible de créer des métadonnées maison, en fait c’est eXtensible. En CSS3 on peut même créer des balises HTML5! Mais le standard lui est non seulement « informatif », il est portable et prévisible! Personnellement je les utilises davantage en XML, que je récupère volontiers dans mon HTML.

Parlant d’initiatives, les « Metatags Dublin core » sont quant à eux utilisés depuis 15 ans. Visiblement pas par les Wordpress et compagnies qui réinvente la roue, voir plus bas! On se ramasse aujourd’hui avec des centaines de balise d’en-tête. Cette liste et un petit exemple, classée davantage par rôle que par typer de balises des plus pratiques. Mais il en existes des centaines plus ou moins spécialisées pour toutes sorte d’application. Voir cette liste plutôt exhaustive des « MetaExtensions Wiki » qui sert de modèle au validateur de la W3C.

Quelques règles :

Toujours commencer par le « DOCTYPE » si les navigateurs les ont toujours ignoré, le « DOCTYPE » permet aujourd’hui au navigateur de distinguer le type d’interprétation, XHTML ou HTML5 par exemple. Pour un document de type XHTML lire le tutoriel « votre première page XHTML 1.0 »
Spécifier la langue à la racine du document, soit dans la balise HTML. Il n’est plus nécessaire d’indiquer au navigateur le « content-language ».
Les balises d’en-tête doivent être entre les balises <head> et </head>
Suivit par le type d’encodage, et je m’adresse aux francophones, UTF-8 systématique! Notez qu’un débat fait rage dans le monde anglophone, a savoir si on continu d’utiliser le « charset » ou on ne revient pas à la vielle et horrible façon de faire... Avec un beau gros « Byte order mark » amicalement appelé le BOM!
L’ordre importe peu ensuite, il faut toute fois absolument, enfin idéalement y placer l’ensemble de ses feuilles de styles CSS.
Google recommande d’y placer son code Analytic. Je vous rappelle que vous pouvez accélérer l’affichage de la page, qui attendra que l’en-tête soit chargé au complet avant de s’afficher! Et d’ailleurs je ne veut pas savoir si Google à capturer la visite, je veux savoir si l’internaute à réussis à ouvrir la page au complet!
Tout comme le javascript, tout en bas de la page. De toute façon il doit interagir avec le « DOM » qui n’est pas disponible tant et aussi longtemps que la page entière n’est pas chargée et affichée.
Enfin, Google nous met en garde cotre la « contre façon de mots clés »! S’il y a quelques chose d’emmerdant sur le web, c’est bien d’avoir maille à partir avec Google! La netiquette c’est sérieux!
Derniers conseil, il existe des centaines de balise d’en-tête. Très subjectif, certaines on fait parures plus qu’autre chose pendant des années, par exemple « revisit-after ». à quoi sert elle si les moteurs l’ignore! Et quand on parle de HTML5, on sort des limite de la recommandation. Si le XHTML était l’ONU,m le HTML5 est l’OTAN ;-)

Métadonnées de base HTML5

Beaucoup plus simple et moins strict que le XHTML, le HTML 5 a tout de même trois balises d’en-tête obligatoire :

<!DOCTYPE html>
<html lang="fr-CA">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Titre de la page</title>
    <meta name="description" content="Description" />
    
    <meta name="keywords" content="tutoriel" />
    
    <meta name="news_keywords" content="tutoriel" />
    <link title="Galerie" rel="canonical" type="text/html" href="/galerie/?id=10670" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="googlebot" content="indexing" />
    <meta name="author" content="Auteur" />
    <meta name="designer" content="Designer" />
    <meta name="generator" content="" />
    <meta name="rating" content="" />
    <meta name="application-name" content="Nom de la page ou de l’application" />
    <meta name="contact" content="+1-555-555-5555 abc@xyz.com ’[adresse]’" />
    <meta name="mobile-agent" content="format=html5; url=mobile.htm" />
    <meta name="web_author" content="Oznog" />
    <meta name="designer" content="MetaExtensions" />
    <meta name="collection" content="MetaExtensions" />
    <meta name="generator" content="Neural 4.3" />
    <meta name="version" content="4.3" />
  </head>

HTML4.01 transitional

Déclaration « DOCTYPE » et du « charset » en HTML4.01

<!-- HTML4 ->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

XHTML1.0 transitional

Déclaration « DOCTYPE » et du « charset » en XHTML1.0

<!-- XHTML1 ->
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-ca" lang="fr-ca">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

La balise « X-UA-Compatible » n’est pas valide HTML5 et le validateur de la W3C retourne une erreur mais elle permet aux vieux Internet Explorer d’être plus compatible. Notez que la balise « keywords », bien que tout à fait valide, n’est pas prise en compte par Google.

Mobile

La balise application-name permet à ma grande surprise d’être affichée, avec le pictogramme du site, dans la page de départ (starup) de plusieurs mobiles. theme-color, la couleur de la barre d’adresse. Etc.

Utiliser « viewport » pour contrôler le zoom sur un mobile. Il contient une liste séparée par des virgules de propriétés sous la forme nom = valeur :

width: width=device-width ou un nombre entre 200 et 10000 pixels (par défaut width=980)
height: height=device-height ou un nombre entre 223 et 10000 pixels
minimum-scale: Un réel entre 0.0 et 10.0 (par défaut minimum-scale=0.25)
maximum-scale: Un réel entre 0.0 et 10.0 (par défaut maximum-scale=1.6)
initial-scale: Un réel entre « minimum-scale » et « maximum-scale »
user-scalable: « yes » (defaut) pour permettre à l’utilisateur de zoomer avant et arrière sur la page Web. Ou « no » pour empêcher l’utilisateur de zommer.

Exemple:
<meta name="viewport" content="width=device-width; height=device-height; maximum-scale=1.4; initial-scale=1.0; user-scalable=yes"/>

Navigation

Référent (referrer)

Empêcher le site suivant de connaitre et de référencer votre URL.

<meta name="referrer" content="no-referrer" />
<meta name="referrer" content="unsafe-url" />
<meta name="referrer" content="origin" />
<meta name="referrer" content="no-referrer-when-downgrade" />
<meta name="referrer" content="origin-when-cross-origin" />

Dans un hyperlien :
<a href="#" rel="noreferrer">Lien sans référent</a>

Pictogrammes (icon)

Associé à des ressources .ico, .png et même SVG. Les choses ont bien changé depuis l’austère « L’icône de votre site dans les favoris de IE5 ». La plupart des balises suivantes sont même optionnelles. Il suffit de déposer les images dans le répertoire « racine » du site. En respectant les dimensions et une nomenclature spécifique, par exemple le préfixe apple-touch-icon et apple-touch-icon-precomposed qui permet d’indiquer au système de ne pas appliquer le filtre (ombrage, arrondie...).

<!-- Microsoft --> 
<meta name="msapplication-TileColor" content="#6c3716" />
<meta name="msapplication-TileImage" content="/mstile-310x310.png" />
<meta name="msapplication-TileImage" content="/mstile-310x150.png" />
<meta name="msapplication-TileImage" content="/mstile-150x150.png" />
<meta name="msapplication-TileImage" content="/mstile-144x144.png" />
<meta name="msapplication-TileImage" content="/mstile-70x70.png" />
<meta name="theme-color" content="#ffffff" />
// Microsoft utilise aussi le fichier browserconfig.xml

<!-- Apple / Android -->  

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/apple-touch-icon-180x180-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/apple-touch-icon-152x152-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/apple-touch-icon-120x120-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/apple-touch-icon-76x76-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="/apple-touch-icon-60x60-precomposed.png" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
// ...

<!-- Android --> 
<!-- * Android ne suporte plus apple-touch-icon -->
<link rel="icon" type="image/png" href="/android-icon-192x192.png" sizes="192x192" /><!-- Recommendé -->
<link rel="icon" type="image/png" sizes="192x192" href="/nice-highres.png" /><!-- Recommendé -->
<link rel="icon" type="image/png" sizes="128x128" href="/niceicon.png" />

<!-- Icons du navigateur -->
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="Shortcut Icon"  type="image/png" href="/favicon.png" />
// et plus...

On a ici des pictos pour Microsoft, d’autre pour Apple et Androïd et enfin les .ico pour le navigateur. Plus difficile à créer et à convertir, le format .ico se replace aujourd’hui sans problème avec un simple PNG, et même transparent! Mais enfin des balises utilisées par les internautes. Faut dire que l’effet est vraiment cool sur une tablette!

Dublin Core (2010)

Les métadonnées Dublin Core on considérablement évolué ces dernières années. Personnellement je suis très déçu de la perte de la balise « collection » que j’utilisais partout, discontinuée! Pendant que Wordpress introduit son « Article.tag ». Vive la sémantique! La dernière recommandation remplace essentiellement des balise dc. dorénavant invalide par dcterms..

Géographique

Alternatives

Texte de remplacement, traduction, le balise de type « alternate » offre un contenu alternatif.

Autrefois négligées, les métadonnées sont non seulement utilisées en masse aujourd’hui mais on peut trouver plusieurs fois la même information. Les « initiatives » de Dublin Core permettait déjà tout ça depuis un bon 15 ans mais fallait que le Web 2 le réinvente. Alors en double, en triple :

Balises pour Facebook

Facebook utilise les balises du protocole OGP (Open Graph protocol). (Il faut toutefois un ID d’usager ou d’application Facebook pour fonctionner).

Wordpress

Et Twitter

Microsoft

Googlebot

Le nom de la balise est en fait le nom du robots d’exploration ou plutôt son « user-agents ». Le premier exemple bien connu utilise noodp pour indiquer à Google de ne pas utiliser une description de remplacement tirée des sites ODP ou DMOZ. La dernière balise (google-site-verification) est simplement un exemple de code de vérification Google. Elle n’a aucun autre rôle.

<meta name="googlebot" content="noodp">
<meta name="googlebot-news" content="noindex" />
<meta name="googlebot-image" content="noindex" />
<meta name="googlebot-video" content="noindex" />
<meta name="googlebot-mobile" content="noindex" />
<meta name="mediapartners-google" content="noindex" /> (AdSense)
<meta name="google-site-verification" content="eV51KzKfuiY5fx8...lzv2mqjtyZAsiEA" />

Instruction	Signification
all	Il n’existe pas de restrictions pour l’indexation ou l’affichage. Remarque : Cette instruction est la valeur par défaut, et il est inutile de l’indiquer explicitement.
noindex	Ne pas afficher cette page dans les résultats de recherche et ne pas afficher de lien "En cache" dans les résultats de recherche.
nofollow	Ne pas suivre les liens de cette page.
none	Équivaut à noindex, nofollow.
noarchive	Ne pas afficher de lien "En cache" dans les résultats de recherche.
nosnippet	Ne pas afficher d’extrait de cette page dans les résultats de recherche.
noodp	Ne pas utiliser les métadonnées de l’Open Directory project pour les titres ou les extraits de cette page.
notranslate	Ne pas proposer la traduction de cette page dans les résultats de recherche.
noimageindex	Ne pas indexer les images de cette page.
unavailable_after: [RFC-850 date/time]	Ne pas afficher cette page dans les résultats de recherche après la date et l’heure indiquées. La date et l’heure doivent être spécifiées au format RFC 850.

Bing

Les autres moteurs de recherche

Microdata (microformats.org)

Les microdonnées sont généralement imbriquées directement dans le code avec par exemple l’attribut itemprop. C’est d’ailleurs son essence même, par rapport aux métadonnées. Par contre il existe plusieurs exemples où cela ne convient pas, notamment lorsque les données ne sont pas directement liées au contenu. Et donc ont utilisé des métadonnées (dénaturées) et ironiquement directement dans le code (pas fort!)! D’ailleurs certain navigateur déplace automatiquement la balise dans l’entête (header).

<meta itemprop="genre" content="Webmasterie"/>
<meta itemprop="inLanguage" content="fr-FR"/>
...
// Exemple de HTML5 Doctor : Extending HTML5 - Microdata
<p itemscope><span itemprop="name" itemscope itemref="meta-likes">
  Jessica Spengler<meta id="meta-likes" itemprop="likes" content="Mameshiba">
  </span>’s fans are always really raucous.</p>

Équivalent

On utilise les requêtes équivalentes (pragma directive) pour simuler une réponse d’en-tête HTTP. Une redirection par exemple.

Vos balises

« Authors must not use elements, attributes, or attribute values that are not permitted by this specification ». La création de balises n’est pas compatible avec la recommandation HTML5. Mais à part un message d’erreur du validateur de la W3C, il n’y a aucune limite en principe. On peut même proposer son propre jeu de balises sur WHATWG wiki.

// Il suffit de la déclarer en CSS maBalise { display:block; } // Ou encore en l’ajoutant au DOM, pour les plus vieux navigateurs <script> document.createElement("maBalise"); </script>

Graphique vectoriel adaptable (SVG)

Les images SVG, 100% autonome, vient avec son jeu de <metadata>, on pourrait même l’ouvrir directement dans le navigateur avec le type MIME « image/svg+xml ».