Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Utiliser au mieux les balises META

Compatible HTML. Cliquer pour en savoir plus sur les compatibilités.Par gamin, le 10 juin 2005

Présentation

Conformément à la philosophie du Html, les éléments relatifs au document sont dissociés du corps du document lui-même et repris dans la zone d'en-tête (c-à-d entre les balises <HEAD> et </HEAD>). Les balises META apportent une série d'informations relatives à la teneur de votre page.

Les informations ainsi apportées intéressent :

  • principalement le référencement de votre site et les moteurs de recherche.
  • un peu vos lecteurs (avertis bien entendu).
  • et accessoirement le browser ou le navigateur.

Les moteurs de recherche

Quand on apprend que plus de la moitié des utilisateurs du Web passent par des moteurs de recherche, il importe de soigner le référencement de son site pour y apparaître de façon correcte et si possible dans les premières positions.

Le navigateur

Certaines balises META sont directement interprétées par le navigateur pour, par exemple, charger automatiquement un page Html après x secondes, effectuer une transition style PowerPoint ou forcer le rechargement d'une page sur le réseau bien que déjà présente dans le cache.

Les balises

Les indispensables

1. <META NAME="keywords" CONTENT="mot-clé1,mot-clé2,mot-clé3,...">

S'il n'en fallait qu'une, ce serait assurément celle-là ! Tous les moteurs de recherche l'utilisent.

Quelques conseils

  • Les mots-clés doivent être séparés par une virgule. Il est conseillé de ne pas dépasser 1000 mots-clés.
  • On conseille aussi de mettre tous les mots clés en minuscules pour éviter les problèmes de “casse”, c’est-à-dire de différence entre majuscules et minuscules.
  • Tout l'art consiste à trouver les bons mots-clés relatifs au contenu de votre site. Mettez-vous à la place de vos lecteurs potentiels. Quels mots, quels synonymes, quelles alternatives peuvent être utilisés pour décrire votre site?
  • Eviter de mettre des mots-clés “bidon” qui sont bien entendu très attirants mais sans rapport avec votre site.
  • La tentation est grande de répéter un certain nombre de fois un même mot-clé pour espérer un meilleur classement. Ca ne sert à rien, ce type de manipulation est pénalisé par les moteurs de recherche.

2. <META NAME="description" CONTENT="une brève description de la page">

Cette description sera pertinente, attirante et brève. En effet, selon les moteurs de recherche seuls les 150 à 240 premiers mots seront repris.

3. <TITLE> ... </TITLE>

Les moteurs de recherche tiennent fortement compte des titres des documents. Il faut impérativement en mettre sur toutes les pages d'un site. Même pour les pages qui n'apparaissent pas directement comme les sous-pages d'une page de frames ! On dit également que le fait de reprendre un ou des mot(s)-clé(s) dans le titre de toutes les pages d'un site est très favorable pour obtenir un meilleur classement.

Les utiles

1. <META NAME=“author” CONTENT=“nom de l'auteur”> Cette balise est d'une utilité discutable car rares sont les moteurs de recherche en tiennent compte.

2. <META NAME=“Copyright” CONTENT=“Copyright © date nom”> Informations sur les droits de la page.

3. <META NAME=“Distribution” CONTENT=“Global ou Local”> Cette balise indique la destination de l'information de la page. Soit qu'elle est “Global” et donc destinée à être largement diffusée soit qu'elle est “Local” et donc à diffusion restreinte.

4. <META NAME=“Generator” CONTENT=“nom de l'éditeur Html utilisé”> Aucune influence, ni pour les moteurs de recherche, ni pour le navigateur utilisé. Cette information intéresse cependant au plus au point les responsables marketing des sociétés proposant des éditeurs Html pour calculer la part de marché de leur produit.

5. <META NAME=“Rating” CONTENT=“Destination de votre audience”> Permet de définir le contenu de votre site. Les appréciations sont General ou Mature ou Restricted ou 14 years pour respectivement tout public, adulte, accès restreint ou 14 ans.

6. <META NAME=“Robots” CONTENT=“instructions pour les robots”> Par cette balise vous pouvez indiquez aux robots de recherche automatique si vous souhaitez que votre site soit ou ne soit pas indexé par eux.

Les différentes options sont: - All (défaut) permet aux robots d'indexer vos pages et de suivre les liens hypertextes d'une page à l'autre. - None dira aux robots de ne pas indexer vos pages et de ne pas suivre les liens. - Index indique que vos pages peuvent être indexées par les robots. - NoIndex pour que le robot ne procède à aucune indexation. - Follow donne la permission aux robots de suivre les liens hypertextes des pages - NoFollow pour le contraire.

Cette balise est reconnue par tous les robots de recherche automatique.

7. <META HTTP-EQUIV=“Content-language” CONTENT=“fr”> Cette balise déclare la langue utilisée dans le document Html. De plus en plus utile, maintenant que les monteurs de recherche ont inclus la langue dans leurs critères de recherche.

8. <META HTTP-EQUIV=“Reply-to” CONTENT=“votre adresse e-mail”> Cette balise permet au lecteur averti de connaître votre adresse e-mail si elle n'apparaît pas sur la page qu'il consulte.

9. <META HTTP-EQUIV=“Reply-to” CONTENT=“URL de votre page d'accueil”> Il est parfois utile de rappeler l'adresse de la page d'accueil de votre site pour ceux qui y sont entrés par une des pages de celui-ci.

Les autres

1. Refresh

Un grand classique du Html (2.0 ?) même si cette balise META n'est que rarement utilisé et alimente les trucs et astuces depuis des années. Cette balise META charge automatiquement la page spécifiée à l'attribut URL après un délai de x secondes.

<META HTTP-EQUIV=“Refresh” CONTENT=“x;URL=“adresse”>

Cette balise est fréquemment utilisée pour rediriger automatiquement un visiteur dans le cas où l'adresse de votre site à été modifiée.

2. Transition

Des effets de transition style PowerPoint sont possibles avec simplement une ligne de code. Mais cela ne fonctionne que sous Explorer 4 et plus.

Le code est : <META HTTP-EQUIV=“Page-Enter” content=“revealTrans(Duration=1.0,Transition=23)”> <META HTTP-EQUIV=“Page-Exit” content=“revealTrans(Duration=1.0,Transition=23)”>

Quelques explications :

  • Page-Enter et Page-Exit signifie que l'effet de transition se produira à l'entrée de la page ou à la sortie de celle-ci.
  • Duration détermine la durée de la transition en secondes. Elle est dans l'exemple de 1 seconde. Cette durée n'est pas d'une précision absolue.
  • Transition est un nombre de 1 à 23 pour l'effet de transition choisi. Le chiffre 23 donne une transition aléatoire (au hasard). Les autres transitions se répartissent de 1 à 22. Ainsi, 7 ouvre la page de droite à gauche, 17 a le même effet mais en diagonale, etc.
  • Précision : vous ne verrez les effets de cette transition que lorsque vous entrez dans la page à partir d'une autre page.

3. Expires

Cette balise META “dit” au navigateur la date à laquelle la page Html doit être considérée comme périmée. Avec Netscape, une requête pour un document dont la date est expirée initialisera une recherche sur le réseau au lieu de prendre la page éventuellement présente dans le cache. Ceci est très utile pour les pages fréquemment mises à jour. <META HTTP-EQUIV=“expires” CONTENT=“Mon, 11 Nov 2002 12:00:00 GMT”> Les robots de recherche peuvent retirer ces pages dites périmées de leur base de donnée.

4. Pragma

Avec ce META, vous pouvez demander au browser de ne pas tenir la page dans le cache.

<META HTTP-EQUIV=“Pragma” CONTENT=“no-cache”>

Cela fonctionne sous Netscape mais pas avec Explorer…