Balises META

Métadonnées HTML

Balises META

Qu'est ce qu'une Balise META ?

balise meta

La présentation et l'attractivité d'un site Internet ne sont rien s'il n'est pas « visible » par le plus grand nombre.

Vous avez choisi le meilleur hébergement mutualisé pour votre site web, en faisant l'impasse ou non sur un serveur dédié ? Vous avez choisi votre CMS et vous avez votre thème Wordpress tout prêt avec la palette de couleur de vos rêves ?! Place maintenant à l'optimisation du code source de votre site web et plus particulièrement des balises META.

► Les balises META sont des balises HTML qui se trouvent dans l'entête des fichiers HTML, entre les balises <HEAD> et </HEAD>.

Les balises META offrent la possibilité d'optimiser des pages WEB avec des informations essentielles pour la classification et l'identification du site, à l'inverse des balises HTML classiques (p, span, strong...) qui elles servent à structurer le site visuellement (Voir dossier sur les balises HTML5 pour le plugin Notepad++ WebEdit)

Ces informations sont invisibles pour le visiteur mais bien utiles pour le référencement et l'optimisation du site.

A quoi servent les balises META ?

balise html

Ces balises permettent aux navigateurs et aux moteurs de recherche de mieux identifier un site web, facilitant sa classification et son référencement. On les utilise généralement pour donner un titre aux pages du site, pour décrire le contenu qui y est présenté, pour notifier l'outil qui a permis de générer les pages ou pour indiquer l'encodage de caractères utilisé.

Une balise META permet également de donner des renseignements sur les visiteurs (moteur de recherche, navigateur et éventuellement système d'exploitation) ainsi que la langue utilisé sur la page (français, anglais...).

Enfin, elles peuvent être utilisées pour effectuer une redirection vers une autre page ou vers un autre site (technique peu recommandée), interdire la mise en cache de la page ou tout simplement pour éviter que les moteurs de recherche ne crawlent et n'indexent la page (technique utilisée notamment par les particuliers qui hébergent leurs sites sur un serveur personnel peu puissant).

Description des Balises Meta et utilité pour un site web

Les balises META possèdent plusieurs attributs tels que property, name, content ou charset. Ces attributs permettent d'identifier ces balises et ont un rôle particulier tant pour la description du site que pour son indexation ou ses fonctionnalités.

Parmi les différents types de balise, nous pouvons classer les balises par rapport à leur utilité : les balises indispensables, les balises facultatives et les balises obsolètes.

A celà il nous faudra rajouter les nouvelles balises Open-Graph qui sont indispensables pour optimiser le partage de vos contenus sur les réseaux sociaux.

Mais si certains plugins Wordpress vous permettent de plus ou moins automatiser tout cela, nous vous conseillons de bien lire ce qui suit pour devenir un vrai expert en matière de balisage !

Les balises META indispensables

Les balises dites indispensables pour l'optimisation et le référencement sont les suivantes :

Balise META Title

<title>TITRE DE MA PAGE</title> balise title en HTML

La balise title permet de donner un titre à une page web et permet aux moteurs de recherche de faciliter son indexation. La valeur du titre est reprise dans les résultats du moteur de recherche, dont la justesse facilitera l'optimisation du référencement naturel.

► Cette balise est la plus importantes de toutes pour les moteurs de recherche.

💡 Astuce SEO : Votre titre ne doit pas dépasser 500 pixels soit plus ou moins 62 caractères, et doit correspondre au contenu de la page du site pour éviter à celle-ci d'être considérée comme du spam ou du contenu malveillant.

🔖 Remarque : Cette balise META a la particularité d'avoir une syntaxe différente des autres. C'est à dire qu'ici on « en-capsulera » le contenu du titre entre la balise <Title> et </Title>, alors que les autres balises meta seront du type <meta name="" content="" >.

📌 Outils utiles : Outil pour optimiser sa balise title pour Google

Balise META Description

<meta name="description" content="Description de ma page" /> balise meta description

La balise description est utilisée par les moteurs de recherche pour donner une description à une page d'un site. La balise meta description vient généralement juste après la balise title, et doit contenir une ou plusieurs phrases suffisamment explicites et structurées pour décrire la page du site afin d'augmenter votre CTR.

💡 Astuce SEO : Pour optimiser votre CTR, chaque page de votre site doit avoir une description unique incitant l'utilisateur à cliquer et reprenant les mots clés importants du sujet que vous traitez. Attention cependant à ne pas mentir sur le contenu de votre page si vous ne voulez pas augmenter inexorablement votre taux de rebond (bounce rate) à cause d'utilisateurs mécontents de ne pas trouver le contenu promis. Sachant que le taux de rebond est pris en compte dans l'algorithme de classement de Google, ce n'est pas le moment de se rater si vous ne voulez pas plonger dans les SERP.

Jusqu'à Novembre 2017 votre description ou snippet ne devait pas excéder les 160 caractères, mais aujourd'hui, c'est la valeur de 930 pixels de largeur qui est retenue plutôt que le nombre de caractères.

💡 Astuce Marketing : Gardez en tête que cette description sera affichée en clair dans le résultat des moteurs de recherche. Essayez de faire en sorte d'inciter au clic dans votre description en la rédigeant comme s'il s'agissait d'une Annonce Adwords (mais sans mentir sur le contenu) !

🔦 Dossier : Comment augmenter son trafic et son CTR avec une balise meta description bien optimisée

📌 Outils utiles : Outil pour optimiser sa balise description pour Google

Balise META Canonical

<link rel="canonical" href="https://tonsite.fr/page1.html" />

La balise canonical sert à définir une URL canonique pour les moteurs de recherche l'URL. Il s'agit en fait de définir une URL unique pour un ensemble de pages dont le contenu est identique ou similaire.

Elle favorise l'optimisation d'un site en aidant les moteurs de recherche à sélectionner quelles pages indexer et évite les pénalités SEO (référencement naturel) qui déclassent un site en cas de contenu dupliqué.

Dans certains cas, elle favorise l'augmentation de la popularité d'un contenu en regroupant plusieurs backlinks (liens pointant vers une page du site)

🌐 Exemple : Admettons que le même contenu est accessible depuis l'URL https://tonsite.fr/page1.html et depuis l'URL https://tonsite.fr/page1bis.html ► On indiquera ici par exemple, sur ces deux pages, que l'URL canonique est https://tonsite.fr/page1.html afin d'éviter le duplicate content.

💡 Astuce SEO : Pensez à mettre cette balise sur toutes vos pages. Ainsi si quelqu'un venait à copier votre contenu, notamment via le parsage de votre flux RSS, vous indiquez à Google que c'est sur votre page que se situe la version originale.

Balise META Langage

<meta name="Language" CONTENT="fr" />

La balise langage permet d'identifier la ou les langues utilisées sur le site ou sur la page. Pour déterminer une langue, on utilise abréviation «fr» pour français, «de» pour allemand...

💡 Astuce SEO : Si vous êtes débutant, il est conseillé de n'utiliser qu'une seule langue pour des raisons d'optimisation de référencement.

Balise META Content-Type

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

La balise Content-Type est utilisée pour déclarer le type de document qui est réceptionné par le visiteur et parfois l'encodage utilisé. Le type le plus couramment utilisé pour une page en HTML est "text/html".

Cette balise est importante car elle permet d'identifier le contenu et permettra donc au navigateur de s'adapter. Outre "text/html", elle peut également prendre comme valeur "application/json" ou encore "multipart/form-data"

🔖 Remarque : En HTML4, cette balise inclut également le charset. En HTML5 par contre, la balise Charset est une balise différente. Vous trouverez plus d'explications sur ce point ci-dessous.

Balise META Charset

En HTML 4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
En HTML 5
<meta charset="utf-8" />

La balise charset permet d'identifier le jeu de caractères utilisé sur la page ou le site.

Il est indispensable pour déterminer le bon rendu de la page et éviter les problèmes de transcodage.

Le jeu de caractère le plus couramment utilisé en occident est UTF-8, mais on peut trouver le jeu ISO-8859-1 (défini par défaut, pas d'accent) ou ISO-8859-15

Balise META Robots

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

La balise robots (index, noindex, nofollow, follow ...) permettent d'indiquer aux robots d'indexation des moteurs de recherche comment se comporter.

► Si la balise a pour valeur "index", cela indique aux robots que la page peut être indexée.
► A l'inverse, si la valeur est "noindex", cela informe aux robots que la page ne doit pas être indexée.
► La valeur "nofollow" indique aux moteurs de ne pas suivre les liens sur la page.
► A l'inverse, "follow" va inciter les moteurs à parcourir et suivre l'ensemble des liens présents sur la page HTML contenant cette instruction (sauf si rel="nofollow" est ajouté dans le lien)

🔖 Remarque : Le robot de Google part du principe que votre site est paramétré en "index" et en "follow". Autrement dit, si ce paramétrage vous convient, cette balise meta ne vous servira rien. Concrètement, elle est surtout utilisé pour mettre des pages dupliqués en "noindex" et en "nofollow" pour éviter des pénalités.

Nouveauté 2019 : Google ajoute de nouveaux paramètres à cette balise de sorte à vous permettre de mieux gérer le snippet et ainsi de pouvoir contrôler au mieux l'affichage de votre page dans les SERP.

  • nosnippet : permet d'empêcher l'affichage d'un extrait de votre texte ou d'un aperçu de vidéo dans les SERP.
  • max-snippet:[nombre] : permet de définir la limite de longueur autorisée pour l'extrait de la page au [nombre] de caractères spécifié.
  • max-video-preview:[nombre] : permet de définir la longueur maximum que pourra avoir l'aperçu vidéo associé à votre page au [nombre] exprimé en secondes.
  • max-image-preview:[type] : permet de limiter la dimension des différentes images associées à votre page. La variable [type] pourra avoir les valeurs suivantes : none, standard ou large.

Les balises META facultatives

Les balises dites «facultatives» peuvent favoriser à mieux identifier le contenu d'une page ou d'un site et dans certains cas améliorer sensiblement l'optimisation et le référencement. Les voici :

Balises de Pagination

<link rel='prev' href='https://www.balisemeta.com/page-1' /> <link rel='next' href='https://www.balisemeta.com/page-3' />

Les balises link rel prev/next permettent d'indiquer comment est conçu votre site en terme de pagination. Très utilisés sur les blogs ayant des catégorie étalées sur plusieurs pages (Page 1, Page 2, Page [...], Page 8...) ces balises sont incluses d'office dans le core de certains CMS comme Wordpress. Cependant, ce n'est pas une façon optimale de mailler l'arborescence de son site, et il faudra privilégier par exemple un maillage interne sous forme de cocon sémantique pour pouvoir faire ranker vos pages profondes.

🔖 Remarque : Depuis le 21/03/2019 Google a affirmé ne plus prendre en compte les balises link rel=next/prev

<meta name="copyright" content="© BALISEMETA.COM 2024" />

La balise copyright permet d'indiquer que le contenu de la page est protégé ou sous droits réservés. Encore faudrait-il que le «copieur» parcoure votre code source et le cas échéant tienne compte de cette balise...

Facultative, cette balise meta indique à qui appartient la page (auteur, société, organisme...) et si le contenu peut ou non être réutilisé, et sous quelles conditions.

🔖 Remarque : dans le champ "content" vous pouvez préciser les ayant-droits mais aussi toutes vos conditions.

Outils utiles :
- Copyright France pour déposer réellement votre Copyright ©.
- Déposez votre marque à l'INPI sur le site officiel.

Balise META Publisher

<meta name="publisher" content="KAPSULE CORP" />

La balise Publisher, qui est compatible avec la plupart des moteurs de recherche, permet d'indiquer qui est l'éditeur du contenu. Il est possible d'indiquer plusieurs éditeurs dans l'attribut "content" en séparant les noms par une virgule. Elle n'est pas à rapprocher avec la balise meta "Author", dépréciée, et qui permet d'indiquer l'auteur du contenu.

Balise META Googlebot

<meta name="googlebot" content="index,follow,nosnippet" />

La balise meta Googlebot est propre au moteur de recherche Google, qui domine le marché. En plus des fonctions identiques à celles de la balise meta robot, elle permet également entre autre d'indiquer à Google si la page doit être mise en cache ou non.

Ex: Si la valeur est à "noarchive", cela indiquera au moteur d'éviter cette opération...

Plus de fonctions : Découvrez toutes les fonctions possibles pour cette balise avec cette FAQ Google.

Balise META Google

<meta name="google" content="notranslate,nositelinkssearchbox" />

La balise Google permet d'indiquer au moteur du même nom si la page ne doit pas être automatiquement traduite.

Google arrive en effet via son algorithme à identifier automatiquement la langue de chaque page d'un site internet. Le moteur de recherche propose alors au visiteur dont le pays utilise une langue différente (détection via le navigateur ou la localisation du visiteur) de traduire automatiquement la page. Cela peut s'avérer frustrant notamment pour les documents officiels..

► La valeur "notranslate" permet de désactiver cette fonctionnalité

Depuis peu, une nouvelle fonction de Google affiche pour certains sites, directement depuis la page des résultats un moteur de recherche interne. ► Pour le désactiver, saisissez la valeur "nositelinkssearchbox"

Balise META Reply-To

<meta name="reply-to" content="[email protected]" />

La balise Reply-To permet d'identifier l'adresse email de l'éditeur ou du webmaster. Cette balise est généralement mise de côté du fait que des robots utilisés par des spammeurs en profitent pour récupérer votre email afin d'enrichir un annuaire d'emails pour de la publicité non sollicitée.

L'adresse email peut cependant être codée afin de n'être lisible par les être humains.
Exemple : monemail[at]monhebergeur[point]com)

Balise META Verify-v1

<meta name="google-site-verification" content="..." />

La balise Verify-v1 n'est utilisée que par Google et permet de s'assurer que vous êtes bien l'auteur d'un site. Uniquement accessible via Google Webmaster Tools, sa valeur est sensible à la casse.

💡 Astuce SEO : La validation de votre site sur GWT peut se faire par d'autres biais qui laisseront moins de trace et notamment via Google Analytics.

Balise META syndication-source

<meta name="syndication-source" content="http://site.com/original" />

La balise Syndication-source a pour rôle d'indiquer qu'il s'agit d'une syndication de contenus.
► Sa valeur permet d'indiquer aux moteurs de recherche l'URL de l'article original.

📌 Outils utiles : Plus de détails sur les balises de syndication

Balise META original-source

<meta name="original-source" content="http://site.com/source.htm" />

La balise original-source, mise en place par Google, permet d'indiquer aux moteurs de recherche la ou les sources qui ont permis de créer le contenu. Sa valeur permet de pointer vers la ou les URLs des articles sources.

📌 Outils utiles : Plus de détails sur les balises de syndication

Balise META Pragma

<meta http-equiv="pragma" content="no-cache" />

La balise Pragma a pour vocation d'interdire l'enregistrement du contenu ou de la page dans le cache des moteurs de recherche et des navigateurs Web. Pour cela, la valeur associée doit être "no-cache".

Balise META Cache-control

<meta http-equiv="Cache-control" content="public" />

La balise Cache-control a pour objectif d'indiquer comment la page doit être mise en cache par le navigateur et les autres systèmes de mise en cache.

Elle peut avoir plusieurs valeur :
► "public" pour l'autorisation de mise en cache (paramètre par défaut)
► "private" pour bloquer la mise en cache via serveur tout en autorisant la mise en cache via navigateur
► "no-cache" pour bloquer totalement la mise en cache
► "no-store" pour autoriser la mise en cache tout en interdisant l'archivage (stockage longue durée).

En désactivant la mise en cache, le serveur qui héberge le site sera beaucoup plus sollicité et utilisera plus de ressources système (la mise en cache permet d'éviter aux serveurs de génération de contenu de régénérer la page)

Balise META Expires

<meta name="expires" content="2024-10-10" />

La balise Expires indique qu'elle est la date de fin de validité du contenu ou de la page. Une fois expiré, le contenu est alors considéré comme n'étant plus valide.

Cette balise n'est pas souvent utilisée car la plupart des robots des moteurs de recherche aspirent de nouveau des pages indexées il y a plusieurs mois. La date est souvent indiquée au format AAAA-MM-JJ.

Les balises META obsolètes

Enfin, découvrez les balises que plusieurs experts du référencement naturel indiquent comme obsolètes, en tout cas pour les moteurs de recherche les plus utilisés :

Balise META Keywords

<meta name="keywords" content="balise, balise meta, webmasters" />

La balise keywords était autrefois très importante pour les moteurs. Elle servait à stocker mots-clés les plus significatifs de la page. Cependant, elle a été peu à peu supplantée par la balise description.

Elle peut cependant être renseignée en indiquant tous les mots clé importants séparés par une virgule. Certains annuaires utilisent encore cette balise pour l'indexation.

🔖 Remarque : Seuls les mots clés trouvés dans le contenu seront indexés.

💡 Astuce SEO : A éviter car vos fournissez à tous vos concurrents les mots clés sur lesquels vous cherchez à vous positionner sur Google, et en contrepartie : rien...

🔦 Dossier : Comment la balise Meta Keywords est devenue obsolète ?

Balise META Author

<meta name="Author" content="Jacques Voltz, Simon Monceau" />

La balise Author permet d'identifier qui est l'auteur ou les auteurs de la page ou du site en question. S'il y a plusieurs auteurs, leur identité doit être séparée par une virgule dans l'attribut "content".

Balise META Refresh

<meta http-equiv="Refresh" content="7;URL=https://www.balisemeta.com/" />

La balise refresh permet de recharger automatiquement une page toutes les n secondes (valeur) ou de provoquer une redirection au bout de n secondes. Cette balise est aujourd'hui dépréciée par le W3C (consortium qui définit les spécifications des pages WEB) et Google tend à pénaliser les sites qui l'utilisent encore.

🔖 Explications : Dans l'exemple ci-dessus "7" est le nombre de secondes après laquelle il faudra recharger la page et "URL=https://www.balisemeta.com" est l'URL de la page que l'on veut re-charger.

💡 Astuce SEO : Si vous voulez faire une redirection, effectuez impérativement une redirection HTTP ou une redirection 301 pour éviter toute pénalité Google.

📌 Outils utiles : Tuto pour mettre en place une redirection 301

Balise META Generator

<meta name="Generator" content="Notepad" />

La balise Generator permet d'identifier quel a été le logiciel ou Système de Gestion de Contenu utilisé pour générer la page (Wordpress, Joomla, Drupal...). Elle n'est pas d'une importance capitale pour l'indexation.

Balise META Identifier-URL

<meta name="Identifier-URL" content="https://www.balisemeta.com" />

La balise Identifier-URL permet d'indiquer l'adresse URL du site global qui contient cette page.

Balise META Distribution

<meta name="Distribution" content="global" />

La balise Distribution permet de qualifier la destination des documents présentés.
Les valeurs possibles sont « global », « local » et « iu » pour tout ce qui est intranet.

Balise META Revisit-After

<meta name="Revisit-After" content="15 days" />

La balise Revisit-After permettait autrefois aux robots de savoir quand est-ce qu'il fallait ré-indexer la page. Cette balise est aujourd'hui ignorée, les robots ayant leur propre algorithme pour savoir quand est-ce qu'il faut revisiter la page.

Balise META Category

<meta name="Category" content="Webmaster, Referencement" />

La balise category permettait aux annuaires d'indexation de catégoriser un site ou une page.
Aujourd'hui elle n'a plus aucun intérêt.

Les nouvelles balises Open Graph

Pour terminer, un nouveau jeu de balises Meta a émergé suite à la démocratisation des réseaux sociaux : le protocole Open Graph.

Les balises Open Graph sont principalement utilisées par les réseaux sociaux tels que Facebook, Twitter ou Google+. Elles permettent selon sa définition de transformer une page Web en un container "riche", au sein d'un réseau social.

balise open graph

Le protocole Open Graph est constitué d'un ensemble de balises qui permet à un webmaster d'indiquer des informations sur ses pages pour les principaux réseaux sociaux. Ces informations faciliteront aux réseaux sociaux l'affichage d'un lien alors placé par un utilisateur d'un de ces réseaux sociaux.

Créé à l'origine par Facebook, le protocole Open Graph est désormais maintenu par l'Open Web Fondation et est devenu de facto un standard.

Les Balises META Open Graph

Outils utiles : Testez comment sera affiché votre article lors d'un partage avec Facebook Debug

Balise META property="og:title"

<meta property="og:title" content="Clic ICI pour découvrir ce TOP 3">

La balise meta property="og:title" est obligatoire.
► Elle permet de définir le titre de votre page dans l'Open Graph.
Remarque : Le titre ne doit pas excéder en général les 65 caractères pour éviter que celui ne soit tronqué.

Balise META property="og:type"

<meta property="og:type" content="website">

La balise meta property="og:type" est obligatoire.
► Elle permet d'indiquer le type de la page (website, vidéo, article...). Ces types sont prédéfinis.

Balise META property="og:url"

<meta property="og:url" content="https://tonsite.fr/page1.html">

La balise meta property="og:url" est obligatoire.
► Elle permet d'indiquer l'URL canonique ou de référence de la page.
Indispensable lorsque le site possède plusieurs URLs dynamiques qui pointent sur la même page.

Balise META property="og:image"

<meta property="og:image" content="https://tonsite.fr/image1.jpg">

La balise meta property="og:image" est obligatoire.
► Il s'agit ici d'indiquer l'URL de l'image qui représente la page dans l'Open Graph.

Balise META property="og:description"

<meta property="og:description" content="Description de votre page">

La balise meta og:description permet d'ajouter une description courte de la page.
Une ou deux phrases maximum recommandé, ou moins de 300 mots

Balise META property="og:video"

<meta property="og:video" content="https://tonsite.fr/video.mpeg">

La balise meta og:video permet d'indiquer l'URL d'une vidéo dans la page

Balise META property="og:locale"

<meta property="og:locale" content="fr_FR">

La balise meta og:locale permet d'indiquer la langue de la page (format de type fr_FR, en_US ou de_DE...)

Balise META property="og:site_name"

<meta property="og:site_name" content="Balise META">

La balise meta og:site_name permet de donner un nom global au site Web utilisant Open Graph