Au moins une fois dans votre parcourt de programmation web, vous avez eu à faire face à cette balise; la balise meta qui sans doute semble être différent de la plus part d’autres balises. Certains se posent même des questions sur son importance. découvrons le ensemble dans la suite de ce tuto.

C’est quoi la balise meta

Une balise meta est une balise orpheline qui se place dans la partie head (entre <head> et </head>) du document HTML. La balise meta comme toutes les autres balises d’entête (head), permet de fournir les informations concernant le document HTML. Ces informations sont celles qu’on appelle les métadonnées d’où le nom de la balise meta.

Quelle est son utilité ?

Les métadonnées sont destinées à des outils comme le moteur de recherche, le navigateur, etc… Ce qui veut dire qu’il n’est vraiment utile qu’à l’outil qui l’exploite et le comprenne. L’outil qui n’a pas été fait pour une métadonnées quelconque ne fait que l’ignorer.

Exemple :

Voir aussi  PHPStorm un environnement de développement intégré WEB pour le pro

Dit au navigateur d’utiliser l’encodage UTF-8 qui en HTML5 est simplifié par l’utilisation de l’attribut charset.

Dit aux moteurs de recherches de ne pas indexer ce document HTML.

Pour vous donner vraiment son utilité, prenez cet exemple :

Vous utilisez notepad++, devinez alors que les concepteurs du logiciel notepad++ aimeraient savoir le nombre de site en ligne créés en utilisant notepad++. Il peuvent simplement créer un bot qui aura comme mission de parcourir tous le web à la recherche des sites dont par exemple cette métadonnée existe.

Du coup, si vous mettez cela dans votre site, les concepteurs du logiciel sauront que vous avez utilisé notepad++ comme éditeur texte pour créer le site.

Utilisation de la balise meta

La balise meta se défini comme suit :

  1. Il doit avoir au moins un de ses attributs name, http-equiv ou charset
  2. S’il a l’attribut name ou http-equiv, il doit aussi avoir l’attribut content

Vous connaissez sans doute déjà son utilisation avec l’attribut charset concentrons plutôt sur son utilisation avec name ou http-equiv

L’attribut name ou http-equiv fourni le l’intitulé de l’information et content fourni l’information elle même.

Voir aussi  Emmet : Coder plus rapidement en HTML & CSS avec le plugin Emmet

Exemple :

La balise meta ci-dessous fournie l’information que l’auteur (author) du site est Mbungu Ngoma

Information au navigateur

Les informations données au navigateur utilisent toutes l’attribut http-equiv. Exemple :

Qui dit au navigateur qu’après 10 seconde, de rediriger l’utilisateur sur informagenie.com

Vous pouvez retrouver les informations concernant d’autres http-equiv sur Internet.

Information sur la page

Les balises metas fournissent les informations sur le document HTML vis-à-vis des moteurs de recherches, des robots de reconnaissances vocales, etc… voici ses utilisations courantes

Fournie cette description dans les moteurs de recherches notamment dans Google

Voir aussi  Solutions possibles pour créer un site web

meta description

Voici une liste non exhaustive des utilisations possibles

  • author : Définie l’auteur de la page
  • keywords: Mettre les mots clés de la page
  • robots : Donnes les instructions aux moteurs de recherches vis-à-vis de la page. index pour permettre d’indexer la page, nonindex pour le contraire (Plus d’infos)
  • application-name : Donner le nom de l’application

Pour plus d’information, allez dans la spécs W3

Open Graph

Open graph est un protocole utilisé par Facebook pour permettre à n’importe quelle page web de devenir un objet social riche. cela étant dit, Facebook à travers open graph arrive par exemple à représenter un lien comme suit au sein de sa plateforme :

open-graph meta

Exemple d’utilisation :

Comme vous pouvez bien le deviner, c’est le titre dans l’objet social.

Voici quelques autres éléments :

  • og:description : PLa description de la page. (“Qu’est ce que c’est agaçant, acheter…“)
  • og:url : L’URL de la page
  • og:type : Le type de l’objet. par ex:  article
  • og:image : L’image de l’url

Pour plus d’informations

 

One comment

  • AndOs
    AndOs

    merci bien a toi Goms. a chaque fois que tu publi un truc de ce genre sa me fait un cours de moin

    • Goms
      Goms

      Je suis heureux que cela te semble ainsi 🙂 !

Répondre

Votre email ne sera pas publié Required fields are marked *
Vous pouvez utiliser les balises HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.