Trucsweb.com

HTML

Le HEADER

RDFFav

HTML5 - Les métadonnées (Metatags)

La carte qui décrit le territoire, l’information qui décrit le contenu aux moteurs de recherches.balises, métadonnée, metatags, head, facebook, twitter, HTML5, SVG, robots d’exploration
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 :
  1. 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 »
  2. 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 ».
  3. Les balises d’en-tête doivent être entre les balises <head> et </head>
  4. 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!
  5. L’ordre importe peu ensuite, il faut toute fois absolument, enfin idéalement y placer l’ensemble de ses feuilles de styles CSS.
  6. 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!
  7. 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.
  8. 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!
  9. 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">
    <!-- La balise keywords n’est pas supporté par Google -->
    <meta name="keywords" content="tutoriel">
    <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 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

<link rel="apple-touch-icon"/>
<meta name="HandheldFriendly"/>
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-touch-fullscreen" content="yes" />
<link rel="apple-touch-startup-image" href="startup.png" />
<!-- Convertir les numéros de téléphone en liens pour mobiles -->
<meta name="format-detection"/>
<!-- Évitement de la convertir les numéros de téléphone en liens pour mobiles -->
<meta name="format-detection" content="telephone=no" />
<meta name="mobile-agent" content="format=html5; url=http://3g.sina.com.cn/">

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 :

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

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

<link title="Home" rel="alternate" type="text/html" href="/"/>
<link title="Catalogue" rel="index" type="text/html" href="/galerie/" />
<link title="Catalogue" rel="canonical" type="text/html" href="/galerie/?id=10670" />
<link title="Catalogue" rel="prev" href="/galerie/?id=10669" />
<link title="Catalogue" rel="next" href="/galerie/?id=10671" />
<!-- Force un rafraichissement de la page -->
<meta http-equiv="refresh" content="30"/>

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..

<meta name="dcterms.subject" content="Webmesterie">
<meta name="dcterms.rights" content="Copyright 1997-2014 Trucsweb">
<meta name="dcterms.collection" content="MetaExtensions" />
<meta name="dcterms.contributor" content="MetaExtensions" />
<meta name="dcterms.coverage" content="MetaExtensions" />
<meta name="dcterms.creator" content="MetaExtensions" />
<meta name="dcterms.publisher" content="Conception Oznogco Multimédia (http://oznogco.com)">
<meta name="dcterms.language" content="fr-CA">
<meta name="dcterms.created" content="2010-12-30T11:52:00-05:00">
<meta name="dcterms.modified" content="2014-11-20T13:02:23-05:00">
<meta name="dcterms.identifier" content="http://www.trucsweb.com/tutoriels/webmestre/a_la_une">
<meta name="dcterms.source" content="http://www.trucsweb.com/tutoriels/webmestre/a_la_une/default.rdf">
<meta name="dcterms.isPartOf" content="/tutoriels/Webmestre/">
<meta name="dc.creator" content="..." />
<meta name="dc.publisher" content="..."/>
<meta name="dc.type" content="Homepage"/>
<meta name="dc.modified" content="2014-11-22 21:18:46"/>
<meta name="dc.date.issued" content="2014-11-22 21:18:46" />
<meta name="dc.language" content="fc-CA" />


Géographique

<meta name="geo.position" content="40.006;-60.347">
<meta name="geo.region" content="CA-QC">
<meta name="geo.placename" content="Québec">
<meta name="geo.country" content="Canada">

Alternatives

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

<link title="Métadonnées" rel="alternate" type="application/rdf+xml" href="/sitemap.xml" />
<link title="Traduction" rel="alternate" type="text/html" href="/en/" hreflang="en" lang="en" />
<link title="Recherche" rel="search" type="application/opensearchdescription+xml" href="/recherche.xml">
<link title="Métadonnées externes" rel="meta" type="application/rdf+xml" href="/index.rdf">
<link title="Syndication (RDF 1.0)" rel="alternate" type="application/rdf+xml" href="/documents/syndication/rss.rdf">
<link title="Syndication (RSS 2.0)" rel="alternate" type="application/rss+xml" href="/documents/syndication/rss.xml">
<link title="Syndication (Atom 1.0)" rel="alternate" type="application/atom+xml" href="/documents/syndication/atom.xml">
<link title="Image pour Facebook" rel="image_src" type="image/png" href="http://www.trucsweb.com/documents/images/logos/l_tw-tr.png">

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

<meta property="fb:app_id" content="6666666666666"/>
<meta property="og:title" content="Titre de la page"/>
<meta property="og:url" content="http://www.trucsweb.com/tutoriels/html/"/>
<meta property="og:image" content="http://www.trucsweb.com/documents/images/logos/l_tw-tr.png"/>
<meta property="og:site_name" content="Oznog"/>
<meta property="og:type" content="HTML"/>
<meta property="og:locale" content="fr_CA"/>
<meta property="og:updated_time" content="2013-08-14T15:28:57+00:00" />
<meta property="og:description" content="Courte description"/>

Wordpress

<meta property="article:tag" content="HTML5" />
<meta property="article:published_time" content="2013-01-08T12:20:26+00:00" />
<meta property="article:modified_time" content="2013-08-14T15:28:57+00:00" />

Et Twitter

<meta name="twitter:card" content="HTML5"/>
<meta name="twitter:site" content="@trucsweb"/>
<meta name="twitter:domain" content="Trucsweb.com"/>
<meta name="twitter:creator" content="@Oznog"/>
<meta name="twitter:card" content="app">
<meta name="twitter:site" content="@Trucsweb">
<meta name="twitter:description" content="...">
<meta name="twitter:app:country" content="CA">
<meta name="twitter:app:name:iphone" content="Trucsweb">
<meta name="twitter:app:id:iphone" content="555555555">
<meta name="twitter:app:url:iphone" content="Trucsweb://...">
<meta name="twitter:app:name:ipad" content="Trucsweb">
<meta name="twitter:app:id:ipad" content="929750075">
<meta name="twitter:app:url:ipad" content="Trucsweb://...">
<meta name="twitter:app:name:googleplay" content="Trucsweb">
<meta name="twitter:app:id:googleplay" content="...">
<meta name="twitter:app:url:googleplay" content="...">

Microsoft

<meta http-equiv="imagetoolbar" content="no"/>
<meta http-equiv="MSThemeCompatible" content="true" />
<meta name="MSSmartTagsPreventParsing" content="true"/>
<meta name="msapplication-TileImage" content="/documents/images/logos/l_tw-tr.png">
<meta name="msapplication-TileColor" content="#5d625c">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

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" />
InstructionSignification
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

<meta name="msnbot" content="index,follow" />

Les autres moteurs de recherche

<meta name="dmoz.id" content="World/Français/Régional/Amérique/Canada/Québec/Régions/Bas-Saint-Laurent/Rivière-du-Loup" />
<meta name="robots" content="index,follow"/>
<meta name="expires" content="never"/>
<meta http-equiv="last-modified" content="2014-11-20T13:02:23-05:00">
<meta http-equiv="Expires" content="Day, dd Mon yyyy hh:mm:ss GMT"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Cache-Control" content="max-age=120"/>

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.

<meta http-equiv="Refresh" content="20; URL=page4.html">
<meta http-equiv="last-modified" content="2014-11-20T13:02:23-05:00">
<meta http-equiv="Expires" content="Day, dd Mon yyyy hh:mm:ss GMT"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Cache-Control" content="max-age=120"/>
<meta http-equiv="default-style" content="css.css" />

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 ».

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 512 512"> <metadata id="metadonnees"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <cc:license rdf:resource="http://creativecommons.org/licenses/by-nc-nd/2.5/" /> <dc:title>Trucsweb.com</dc:title> <dc:date>15 décembre 2013</dc:date> <dc:creator> <cc:Agent> <dc:title>Oznog</dc:title> </cc:Agent> </dc:creator> <dc:description>Logo des Trucsweb.com</dc:description> <dc:contributor> <cc:Agent> <dc:title>Généré par Neural 4.3.</dc:title> </cc:Agent> </dc:contributor> <dc:subject> <rdf:Bag> <rdf:li>SVG</rdf:li> <rdf:li>Image</rdf:li> <rdf:li>Animation</rdf:li> </rdf:Bag> </dc:subject> </cc:Work> <cc:License rdf:about="http://creativecommons.org/licenses/by-nc-nd/2.5/"> </cc:License> </rdf:RDF> </metadata> [...] </svg>

À éviter

Balises qui ne sont plus supportées en HTML5

<meta name="verify" content="">
<meta name="classification" content="">
<meta name="copyright" content="">
<meta name="formatter" content="">
<meta name="distribution" content="Global"/>
<!-- La liste des Dublin Core -->
<meta name="DC.Creator.Corporatename" content="..." />
<!-- La balise Collection n’est même plus supporté par Dublin Core -->
<meta name="DC.Collection" content="..." />
<meta name="DC.Coverage" content="..." />
<meta name="DC.Date.Created" content="2010-11-05T22:05:31" />
<meta name="DC.Date.Modified" content="2010-11-05T22:05:35" />
<meta name="DC.Identifier" content="..." />
<meta name="DC.Rights" content="..."/>
<meta name="DC.Language" content="fr-ca" scheme="ISO639"/>

Références
Django (Oznog) Blais
Dernière mise à jour :

Commentaires

  • Merci beaucoup pour ton article :) . Une question qui me trotte sur les meta name, débutante que je suis : quand tu dis «il est toujours possible de créer des métadonnées maison, en fait c'est eXtensible », est-ce que le W3C ou WhatWG le dit quelque part, ça ? J'ai essayé de chercher des infos sur ce point dans la doc du W3C mais je ne l'ai pas trouvé très claire. Du coup je comprends deux discours qui me paraissent contradictoires sur les meta name : - d'un côté que leur contenu est libre, non fixé par la DTD, que tout un chacun peut créer une paire de mot-clé-valeur, - de l'autre que seules les meta standards spécifiés par W3C et celles listées (et acceptées) dans le wiki WhatWG sont valides/autorisées. Je m'y perds, d'autant qu'en testant toute sorte de meta name improvisées sur le validateur W3C en xHTML 1.0 et HTML 5 (du type meta name="pifpouf" content="turlututu"), tout passe au vert (c'est validé..) - mais pourtant si elles ne sont pas standards ou 'autorisées', ça ne devrait pas...non ? Je m'y perds. Merci pour tes lumières !
    64x64
    sapristi

    2015-12-16 15:07:20
    • Salut, Ça reste des informations destinées à d'autre machine qui ne sont pas nécessairement le Web. À vrai dire c'est effectivement pour se prendre la tête à deux mains. Il y a deux raisons : 1. Outre « robots » Google n'ont jamais utilisé les balises méta. Il ne fait pas confiance aux webmestres en définissant lui-même la page. Et note qu'il s'est créé ses propres balises, par exemple « google-site-verification ». Bon c'est la planète Google, ça ne prouve rien... 2. Il n'y a plus de standard ou de norme iso à proprement parler depuis que la WATGWG a sorti le HTML5. C'est dommage mais ce n'est pas la fin du monde. Les balises méta sont principalement destinées aux moteurs de recherches. Alors il suffit de demander à Google! https://support.google.com/webmasters/answer/79812?hl=fr Comme on peut voir c'est assez limité! Il y a les balises officielles utilisées par le navigateur, comme le rafraîchissement, le titre... Et il y a tous les services qui utilisent les balises métas, comme Facebook ou Twitter. Et à part Facebook, qui a eu la décence d’utiliser le l'Open Graph (http:/ogp.me/), la plupart réinventent la roue que Dublin Core (http:/dublincore.org/) avait fait rouler au siècle dernier! Les balises IE, par exemple <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> Et que dire de celle là?? <meta content='https://xri.net/=!9B72.7DD1.50A9.5CCD?_xrd_r=application/xrds%2Bxml;sep=false' http-equiv='X-XRDS-Location'/> Ou des inutiles « openid.server » qu'on retrouve souvent. Certainement destiné à un gestionnaire de contenu... <link href='https://www.myopenid.com/server' rel='openid.server'/> Et la balises geo... ça prouve qu'on peut créer ses balises pour usages personnels. La plupart des gestionnaires de contenu créent leurs propres balises méta d'ailleurs. La seule différence c'est que le validateur de la W3C ne les reconnaitraient pas et affichera une erreur! La W3C propose d'ailleurs un forum pour soumettre ses propres balises à l'évaluation. Notez que j'ai tenté l’expérience sans succès. Les Trucsweb n'étant pas le MIT je suppose! C'est effectivement frustrant! Je ne retrouve malheureusement plus cette page. D'ailleurs les nouvelles balises Twitter du « card » pour indiquer ces images (!) n'était pas supportée par le validateur de la W3C la dernière fois que je l'ai testé... C'est aussi un secteur très dynamique, il suffit de jeter un œil pour découvrir de nouvelles balises. Aujourd'hui je tombe sur la meta <meta name="referrer" content="always"> (!). C'est pour cette raison que cette page existe. Recenser les balises méta, et je n'ai qu'une liste partielle. Et d'ailleurs elle n'est pas à jour, l'ère du mobile change rapidement et les pictogramme et favicon par exemple n'ont plus à être spécifié via les métadonnées J'espère que ça répond à ta question.
      64x64
      oznog
      http://www.trucsweb.com
      2015-12-16 15:36:46

      • Merci pour ta longue réponse très fournie ! J'ai de quoi faire ^^ Ma question concernait les standards, c'est là que je me cassais les dents. Du coup c'est quand même bizarre, parce que chez moi justement les meta (name, pas http-equiv, ni les link) que tu indiques passent au validateur depuis 3 jours que j'essaie : balises geo, twitter, autre farfelues de mon invention....bien que mes meta name imaginaires ne soient pas 'standards' en HTML 5 (j'ai vu que geo, twitter, les og de fb sont enregistrées dans le wiki WhatWg, et comme le validateur W3C se cale dessus, cela me semble logique que ça passe maintenant au validateur, sauf erreur de ma part). Donc quand tu dis "Il n'y a plus de standard ou de norme iso à proprement parler depuis que la WATGWG a sorti le HTML5", j'imagine que la réponse se trouve ici, bien que ce point reste un peu confus pour moi. Dans la mesure où HTML 5 est le successeur de HTML 4, qui lui permettait de placer n'importe quel type d'information dans une meta name, la réponse est aussi peut-être ici. D'autant que finalement, W3C dit dans sa recommandation (HTML5) "Extensions to the predefined set of metadata names may be registered in the WHATWG Wiki MetaExtensions page. [WHATWGWIKI]" : may n'est pas must, donc euh..bon bref je m'embrouille encore un peu mais ta réponse m'aide quand même.
        64x64
        sapristi

        2015-12-18 13:59:40


      10/10 sur 1 revues.
             Visites : 10260 - Pages vues : 52047
      X

      Trucsweb.com Connexion

      Connexion

      X

      Trucsweb.com Mot de passe perdu

      Connexion

      X

      Trucsweb.com Conditions générales

      Conditions

      Responsabilité

      La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

      Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

      Droit applicable et juridiction compétente

      Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

      X

      Trucsweb.com Trucsweb

      X

      Trucsweb.com Glossaire

      X

      Trucsweb.com Trucsweb

      X

      Trucsweb.com Trucsweb

      Conditions

      Aucun message!

      Merci.

      X
      Aucun message!
      X

      Trucsweb.com Créer un compte

      Créer un compte

      .
      @