temps de lecture : 5 minutes

Le HTML permet aux webmestres de définir des metadatas - méta-données - qui seront lisibles par les clients de navigation des personnes qui consultent des pages sur Internet ou des documents utilisant des ressources réseau. Les balises meta sont donc des conteneurs génériques ; leurs noms ne font donc pas l'objet d'une nomenclature fixe(*).

Néanmoins certaines balises se sont imposées au fil du temps ou au gré du support par les moteurs de recherche.

Voici donc une présentation des principales balises <meta ... />.


Il y a deux syntaxes principales :

<meta name="{meta_name}" content="{meta_content}"[ lang="{lang}"][ charset="{charset}"] />

et :

<meta http-equiv="{meta_name}" content="{meta_content}" />

La seconde syntaxe indique juste au serveur HTTP de renvoyer aussi l'information dans les entêtes (headers). Il semble qu'à ce niveau, les attributs optionnels lang et charset soient ignorés (information au conditionnel).


Les basiques

Meta description

Permet de fournir une description propre à chaque page d'un site. Sa valeur peut être utilisée par les moteurs de recherche pour le snippet, si le moteur trouve celle-ci pertinente en regard de la requête...

On peut, avec un attribut de langue facultatif, faire co-habiter plusieurs descriptions dans plusieurs langues. La langue s'écrit soit avec les deux lettres, soit avec le contexte national (exemple : fr-ca pour le français parlé au Canada, contre fr pour le français classique).

<meta name="description" content="Ceci est la description de ma page, dans une forme rédigée mais courte et en rapport avec le contenu" lang="fr" />
<meta name="description" content="This is the description of my page, but well-written in a form short and related to the content (approximative translation)" lang="en" />

Meta keywords

Permet de fournir quelques mots clés pour décrire le contenu de chaque page...

<meta name="keywords" content="mot clé, expression, mot, qualificatif" lang="fr" />

Face aux très nombreux abus, il semble que cette balise ai été abandonnée par les principaux moteurs de recherche. Sa présence peut quand même être un plus... surtout que la plupart des CMS génère la valeur de façon automatique.


Meta http-equiv content-language

Pour indiquer dans quelle langue est rédigé le site.

<meta http-equiv="content-language" content="fr" />

Il semblerait que Google et quelques autres moteurs proposant des outils de traduction se débrouillent seuls pour déterminer la langue d'un site... Si ils veulent


Les indispensables (un peu techniques)

Meta robots (1)

Permet d'indiquer aux robots d'indexation quelques instructions simples pouvant influencer leur comportement.

<meta name="robots" content="..." />

Les valeurs sont relativement libres, chaque moteur ou annuaire ayant introduit des instructions plus ou moins spécifiques... Elles doivent être séparées par des virgules.

  • index : valeur implicite si rien de contraire n'est indiqué. Les robots indexeront le contenu.
  • follow : valeur implicite si rien de contraire n'est indiqué. Les robots suivront les liens présents dans la page.
  • all : raccourci pour index,follow, valeur implicite si rien de contraire n'est indiqué.
  • noindex : les robots pourront toujours scanner le contenu d'une page, mais il ne sera pas indexé...
  • nofollow : les robots ne suivront pas les liens présents dans la page, et il semblerait du coup que les liens ne soient pas pris en compte par les outils de notation de contenus...
  • none : raccourci pour noindex,nofollow.
  • noarchive : indique aux robots que le contenu ne devra pas être écrit dans le cache des moteurs de recherche. Pratique si l'accès aux archives d'un site se fait par abonnement. Attribut répandu après les déboires européens d'un célèbre moteur de recherche face à des journaux en ligne d'un petit pays qui a la frite

Il semblerait que Google préconise aussi d'utiliser unavailable_after:[date] pour spécifier une date après laquelle le contenu ne sera plus accessible dans les résultats de la recherche...


Meta http-equiv charset

Permet au navigateur de savoir dans quelle langue est encodée la page. Il faut néanmoins faire attention à préciser aussi le contexte d'encodage des différentes ressources CSS et Javascript pour que le navigateur puisse complètement optimiser l'affichage et le traitement d'une page...

<meta http-equiv="charset" content="UTF-8" />

Les pratiques

Dans le cadre d'un blog ou d'un site collaboratif, il peut être pertinent de préciser pour chaque article son auteur, la date de publication et le copyright.

Meta author

L'auteur d'un article.

<meta name="author" content="Cédric Cuz" lang="fr" />

Meta date

La date de publication, au format international avec l'heure et le fuseau horaire...

<meta name="date" content="2011-08-07T15:18:00+01:00" />

Meta copyright

Le copyright. Notez-bien que le caractère © est écrit sous forme d'entité HTML &copy;...

<meta name="copyright" content="&copy; 2011 Killeak.net" />

Meta syndication-source

Avec les nombreuses possibilités de syndication de contenus, on peut fournir le permalien d'un article.

<meta name="syndication-source" content="http://www.domaine.fr/page-permanente-de-cet-article.html" />

Meta original-source

Et dans le cas d'une reprise d'article, citer sa source (c'est mieux !).

<meta name="original-source" content="http://www.domaine-externe.fr/ceci-est-la-source-de-cette-information.htm" />

Les autres (obsolètes, doublons ou ignorés)

Meta http-equiv expires (2)

Indique que la page devra être intégralement rechargée passée cette date. Utile à priori pour les visiteurs réguliers d'un site, si tant est que le navigateur sache prendre en compte cette information, et si le site sait recalculer tous les n jours la nouvelle date d'expiration...

Autre point rébarbatif, la syntaxe de la date...

<meta http-equiv="expires" content="Wed, 10 Aug 2011 14:30:00 GMT" />

Meta revisit-after (3)

Défini le rythme auquel les robots sont sensés scanner le contenu d'une page, sous la forme d'un nombre suivi d'un interval de temps (minutes, hours, days, months, years).

Les robots d'indexation ayant leur propre rythme de croisière, cela fait bien longtemps qu'ils n'obéissent plus à cette balise, si tant est qu'ils y aient un jour obéis !

<meta name="revisit-after" content="10 days" />

Meta title
<meta name="title" content="Titre de l'article - www.killeak.net" />

Cette balise meta semble être un doublon de la balise <title>...</title>, et est ignorée par de nombreux moteurs de recherche, mais elle est utilisée par Facebook lorsque l'on partage un lien sur son mur...


Les spécifiques à un usage

Toujours dans le cadre d'un blog ou d'un site publiant des articles, il est possible de rajouter des meta spécifiques à un moteur de recherche, à un service de partage. Les balises ci-dessous sont ainsi recommandées si vous souhaitez optimiser votre partage sur le réseau social Google+ ou le référencement dans les moteurs d'indexation / recherche.

Il faut dans un premier temps rajouter des attributs supplémentaires à votre balise <html> :

<html itemscope itemtype="https://schema.org/Article">

Cela sert à spécifier quelle norme est utilisée...

<meta itemprop="name" content="Le titre de votre billet" />
<meta itemprop="description" content="La description plus précise du contenu de votre billet" />
<meta itemprop="image" content="http://www.votresite.fr/images/illustration_du_billet.jpg" />

Notes (*) un profil peut néanmoins être défini par des moteurs de recherche pour fixer quels seront les noms et les formats des données qui seront pris en compte... Les pages des robots ou les blogs des moteurs peuvent fournir de telles informations...
(1) pour un contrôle plus poussé des robots, il vaut mieux mettre en place un fichier robots.txt à la racine de son site internet...
(2) et (3) la meilleure façon de préciser l'âge d'un contenu ou sa fréquence d'actualisation semble le recours à un fichier sitemap.xml, qui est pris en charge par au moins Google et Bing/Yahoo!...

Plus d'infos : www.w3.org/TR/REC-html40/struct/global.html#h-7.4.4

permalien : //www.killeak.net/?section=3&view=24

message(s) : il n'y a pas encore de message, ajouter un message

mot(s) clé(s) : article

Vous aimez ? Partagez !

Vos avis, commentaires et contributions :





Je me réserve le droit de supprimer ou déplacer tout message hors-sujet, à caractère injurieux ou raciste, etc...

Merci aussi de soigner un petit peu la grammaire et l'orthographe, et d'éviter le style sms ;-)

Les deux champs marqués d'un astérisque (*) sont obligatoires !