Balises méta en SEO: le guide ultime

Balises méta en bref

Les balises méta sont des éléments de votre code HTML qui ne sont pas visibles par l’utilisateur et qui jouent pourtant un rôle crucial dans vos performances SEO et l’expérience utilisateur que vous fournissez.

En utilisant des balises méta, vous pouvez vous assurer que les navigateurs et les moteurs de recherche se comportent comme vous le souhaitez et afficher votre contenu dans les SERP en fonction de vos préférences.

Découvrez les balises méta les plus importantes pour le référencement: méta-titre, méta description, méta robots et quelles autres balises sont souvent confondues avec des balises méta!

Que sont les balises meta HTML ?

Les balises méta sont utilisées par les navigateurs pour afficher correctement le contenu, et par les moteurs de recherche pour mieux comprendre ce contenu et comment ils doivent se comporter.

Toutes les balises meta sont définies à l’aide de la balise <meta>  et sont placées dans la  section <head> de votre page.

Les balises meta ne sont pas affichées sur une page ; Ils ne sont inclus que dans la source d’une page.

Prenons un exemple :

L'anatomie d'une balise méta
  • L’extrait de code entier est appelé « méta élément».
  • La partie <méta> est la balise réelle.
  • Il existe un attribut appelé name avec la description de la valeur.
  • Et il y a un attribut appelé content avec la valeur Ceci est une description de page.

La Balise Title

La balise de titre est un élément HTML qui indique aux navigateurs et aux moteurs de recherche quel est le titre d’une page donnée.

Le titre est affiché comme le premier élément cliquable dans l’extrait de page sur une page de résultats de moteur de recherche (SERP) et transmet le sujet principal que les utilisateurs trouveront sur la page.

Mais avant d’aller plus loin avec le titre, voici un avertissement: bien qu’il fournisse sans doute les métadonnées les plus cruciales pour les moteurs de  recherche, d’un point de vue HTML, la balise title n’est pas une balise meta.

Pour que la balise title soit une vraie balise meta, sa syntaxe devrait être <meta name="title" content="ici s'intègre le titre">.

Au lieu de cela, c’est juste <titre>Voici le titre</titre>.

Cependant, bien qu’il ne s’agisse pas d’une véritable balise méta, il est courant que la communauté SEO se réfère à la balise de titre comme le « méta-titre ».

Voici quelques autres éléments qui sont souvent confondus avec les balises meta.

Voyons à quoi ressemble le titre de notre article dédié à la balise title dans le SERP de Google:

exemple de balise tilte

Et voici comment vous pouvez le voir dans le code source de notre page, dans la section <head> du document HTML :

<title>la Balise Title: Le Guide Ultime</title>

Comme Google, Bing, Yahoo, DuckDuckGo et d’autres moteurs de recherche diffèrent dans leurs exigences exactes pour la longueur de la balise de titre, une bonne règle de base est:

    • Une taille maximale de 575 pixels, soit environ 60 caractères.
    • Une taille minimale de 285 pixels, environ 30 caractères.

Ce que vous devez inclure dans la balise title

La balise title est votre chance de convaincre les utilisateurs d’ouvrir la page qu’ils voient répertoriée dans les résultats de recherche.

Ainsi, lorsque vous écrivez une balise de titre, vous devez toujours garder l’utilisateur à l’esprit.

Elle doit être unique et lisible et doit contenir les mots-clés pertinents les plus importants et, si possible, un appel à l’action.

Utilisation de noms de marque et de séparateurs

Si vous êtes une marque forte, inclure votre nom de marque dans le titre augmentera votre taux de clics. C’est pourquoi beaucoup d’entreprises l’incluent.

La balise titre est souvent séparée de la marque par un caractère distinctif. Il peut s’agir d’un tiret (-), d’un tuyau (|), cela dépend de la longueur de votre balise de titre.

Avec un titre long, un tuyau peut être meilleur, car il a moins de pixels, ce qui permet d’économiser de l’espace pour les lettres.

Mais en fin de compte, cela dépend vraiment de vos préférences esthétiques.

Balise Meta description

Tout comme le titre, la méta-description est un élément crucial de l’extrait de votre page que les gens voient dans les résultats de recherche.

Bien que son importance SEO soit relativement faible – principalement parce que Google ne considère pas les mots-clés dans la méta-description comme un facteur de classement (ouvre un nouvel onglet) – une mauvaise description peut être un facteur de rupture pour les utilisateurs qui décident de cliquer ou non sur votre lien, ce qui signifie qu’elle peut diminuer votre CTR.

La méta-description doit être lisible et unique, et surtout, elle doit résumer le contenu de la page.

Elle doit comporter entre 70 et 155 caractères (430 à 920 pixels) et inclure des mots-clés pertinents.

Google les affichera en gras dans votre extrait, ce qui réduira la probabilité que le moteur de recherche réécrive la description de votre page.

Par exemple, la méta-description de notre page de présentation de l’Académie est la suivante :

Exemple de méta-description utilisée pour graines de référenceur

<meta name="description" content=" Comment devenir Référenceur SEO? Vous ne savez pas par où commencer? Progresser rapidement grâce à cette formation gratuite pas à pas! "/>

Quand Google réécrit-il les méta-descriptions ?

Google ignorera parfois vos méta-descriptions et générera les leurs.

Dans un hangout Webmaster Central (ouvre un nouvel onglet, en anglais), John Mueller de Google a proposé trois raisons pour lesquelles Google peut modifier votre méta-description.

    1. La méta-description ne résume pas le contenu de la page de manière appropriée.
    2. La méta-description générée automatiquement peut parfois faire correspondre plus précisément la requête de recherche avec la page Web lorsque le contenu manque une partie de la requête de recherche.
    3. Google essaie peut-être de faire correspondre la requête de recherche avec le contenu, mais la correspondance est manquante dans la méta-description.

Cela signifie que, pour que la méta-description corresponde à ce que vous avez configuré, vous devez résumer le contenu du site Web autant que possible et penser aux requêtes de recherche qui conduiront à l’affichage de votre site Web dans les résultats.

Balise Meta robots

Les balises Meta robots sont des balises qui indiquent aux moteurs de recherche si les liens doivent être suivis et si les pages doivent être indexées.

Un cas d’utilisation courant des balises meta robot consiste à résoudre les problèmes de contenu dupliqué en s’assurant que les doublons ne sont pas indexables.

La balise meta robots peut être trouvée dans la source HTML d’une page, et elle contient des directives particulières qui spécifient leur objectif.

Cela peut ressembler à ceci:

<meta name=”robots” content=”noindex,follow”/>

Les directives noindex et follow ici communiquent que les moteurs de recherche ne devraient pas indexer cette page, mais devraient suivre tous ses liens.

Il existe divers exemples de directives de balises meta robots telles que noarchive, nosnippet et notranslate qui vous permettent d’envoyer des signaux spécifiques aux moteurs de recherche pour modifier leur comportement sur votre page.

Dans tous les cas, assurez-vous que vos balises meta robots sont correctement configurées et qu’elles n’empêchent pas les robots d’explorer les parties importantes de votre site Web simplement à cause d’une petite erreur.

Balise Méta d’actualisation

La Balise Méta d’actualisation vous permet de demander à un navigateur d’actualiser automatiquement une page après un intervalle de temps donné.

Par exemple, cet élément indiquera au navigateur d’actualiser le contenu en 5 secondes :

<meta http-equiv="refresh" content="5">

Cet élément peut également être utilisé comme une sorte de redirection, indiquant au navigateur de rediriger vers une autre URL après la période de temps définie: l’exemple ci-dessous redirigera vers https://www.exemple.com après 5 secondes:

<meta http-equiv="refresh” content="5;url=https://www.exemple.com">

Du point de vue du référencement, il est toujours recommandé d’utiliser une redirection 301 au lieu de la redirection méta d’actualisation HTML, car les moteurs de recherche traitent les redirections 301 beaucoup plus rapidement et garantissent que le plus d’autorité possible sur les liens est transmise, et les redirections 301 conduisent également à une meilleure expérience utilisateur car la cible de redirection se charge plus rapidement.

Balises meta Open Graph et Twitter Card

Les balises méta vous permettent non seulement de définir l’apparence de vos pages dans les pages de résultats de recherche, mais également de définir comment elles seront affichées sur les plateformes de médias sociaux telles que Facebook ou Twitter.

Avec un choix approprié de texte et de visuels, vous pouvez augmenter le CTR de vos publications sur les réseaux sociaux. C’est pourquoi il est crucial d’avoir le contrôle de leur apparence.

Configuration d’Open Graph pour Facebook et LinkedIn

Pour Facebook et LinkedIn, vous devez inclure le code de balisage Open Graph dans votre code HTML. De cette façon, vous pouvez définir le titre que vous souhaitez afficher et la description de l’article, ainsi que l’image qui sera affichée sur Facebook et les flux liés.

Par exemple, voici à quoi ressemble le site d’easy-links:

Exemple de open graph pour easy-links.fr

Et voici à quoi cela ressemble dans le code source de la page:

<meta property="og:title" content="Automatisez vos achats de Backlinks – Réussissez votre campagne de Netlinking"/>

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

<meta property="og:description" content="EasyLink est une plateforme qui vous permet d'acheter des liens par abonnement et d'automatiser votre Netlinking."/>

<meta property="og:url" content="https://easy-links.fr/"/>

<meta property="og:image" content="https://easy-links.fr/wp-content/uploads/2022/01/comprar-enlaces-backlinks-calidad-teblogueo.png"/>

<meta property="og:image:width" content="1306"/>

<meta property="og:image:height" content="624"/>

Une fois que vous avez configuré les propriétés Open Graph et publié le site Web, vous pouvez tester ses fonctionnalités dans le débogueur Facebook (ouvre un nouvel onglet)  et LinkedIn Inspector(ouvre un nouvel onglet).

Configurer vos cartes Twitter

Un processus très similaire s’applique à Twitter, où vous pouvez définir les mêmes propriétés que pour Open Graph.

La seule différence est que cette plate-forme sociale a le balisage défini pour son propre nom twitter.

Voici à quoi ressemble  le code source du site O2switch sur Twitter :

<meta name="twitter:card" content="summary">
<meta name="twitter:site">
<meta name="twitter:creator">
<meta name="twitter:title"
content="o2switch, Un  Hébergeur Web Aux Serveurs De Qualité Industrielle !">
<meta name="twitter:description" content="o2switch, un Hébergeur Web aux serveurs de qualité industrielle !">
<meta name="twitter:image" content="https://www.o2switch.fr/wp-content/uploads/2022/06/telechargement.svg">

Une fois que vous avez défini les propriétés de votre carte Twitter et que la page a été publiée, vous pouvez vérifier ses fonctionnalités sur Twitter Card Validator (s’ouvre dans un nouvel onglet).

Meta Keywords: la balise meta abandonnée

Les méta-mots-clés ont joué un rôle pour les moteurs de recherche pendant les années folles d’Internet dans les années 1990 et au début des années 2000.

Les webmasters les utilisaient pour signaler aux moteurs de recherche pour quelles requêtes leurs pages devraient se classer.

Leur extrait de code HTML ressemble à ceci :

<meta name="keywords" content="keyword1, keyword2, keyword3" />

Cependant, la pratique est devenue tellement exploitée qu’elle n’avait presque plus aucune valeur. C’est pourquoi Google, Bing et d’autres ont cessé de leur donner du poids.

Le seul moteur de recherche avec une utilité décente qui donne encore un certain crédit aux méta-mots-clés est Yandex (ouvre un nouvel onglet).

Cependant, il y a encore une utilisation pour les Méta Keywords même aujourd’hui: ils peuvent être utiles pour alimenter la recherche interne du site Web.

Surtout pour les magasins de commerce électronique, ils sont un moyen important d’affiner les résultats de recherche internes.

Autres balises meta intéressantes

Outre les balises méta majeures telles que le titre, la méta-description et les méta-robots, il existe de nombreuses balises méta mineures qui vous aident à signaler à Google et aux navigateurs comment ils doivent se comporter sur votre site.

Jetons un coup d’œil à quelques-uns d’entre eux:

Balise meta Charset

La balise meta charset indique au navigateur l’encodage de caractères pour le document HTML. Les deux valeurs les plus courantes sont :

  • UTF-8 – Codage de caractères pour Unicode.
  • ISO-8859-1 – Codage de caractères pour l’alphabet latin.

Lorsque  l’encodage UTF-8 est utilisé, vous verrez ceci dans le code HTML : <meta charset="UTF-8">

Balise meta Viewport

Avec le rôle croissant des appareils mobiles, les webmasters doivent toujours s’assurer que leur site Web est configuré pour une utilisation de bureau et mobile.

La réactivité de l’appareil d’un site Web peut être contrôlée à l’aide de l’élément meta viewport, qui aide le navigateur à définir la zone visible pour les utilisateurs – qui varie selon les appareils.

Par exemple, dans l’exemple ci-dessous, la balise meta viewport signale que l’écran doit être affiché sur toute la largeur de l’appareil avec un niveau de zoom de 100% :

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

Balise meta de langue

Comme le nom de cet élément l’indique, la balise de langue spécifie la langue du contenu de la page. Cette balise meta est utilisée par Bing et Baidu,

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

tandis que pour Google, il est préférable d’utiliser l’attribut hreflang.

<link rel="alternate" href="https://grainesdereferenceur.com" hreflang="fr-fr" />

Balise meta adulte

En implémentant cet élément, vous pouvez suggérer aux moteurs de recherche que le contenu d’une page est réservé aux adultes et peut être filtré des résultats de SafeSearch.

Exemple : <meta name="rating" content="adult"/>

Autres balises souvent confondues avec des balises meta

Outre les balises meta title, il existe plusieurs autres éléments qui sont souvent confondus avec les balises meta.

Nous pensons qu’il est temps de régler cela une fois pour toutes, car cette confusion se produit également sur les points de vente bien connus de l’industrie.

Les balises suivantes sont souvent appelées balises meta, mais en réalité, ce sont toutes des attributs de relation de lien.

Au lieu d’avoir  la balise <meta> dans l’élément HTML, ils font tous partie de la balise <link rel>.

  • URL canonique
  • Attribut Hreflang (article à venir)
  • Attributs de pagination (article à venir)
  • Attribut Mobile (article à venir)

Conclusion

Les balises méta sont des éléments HTML puissants qui peuvent améliorer considérablement votre succès SEO.

Certaines balises vous aident à configurer l’apparence de votre contenu dans une page de résultats de recherche ou sur les plateformes de médias sociaux, tandis que d’autres vous permettent de contrôler le comportement des navigateurs et des robots d’exploration de votre site Web.

La configuration correcte de vos balises méta peut vous aider à augmenter votre classement et votre CTR, ainsi qu’à prendre le contrôle du budget d’exploration.

Cependant, il y a eu une confusion sur ce qui est et ce qui n’est pas considéré comme une balise méta.

Par exemple, des éléments tels que la balise title, canonical et hreflang sont souvent appelés à tort balises meta par la communauté SEO.

Qui d'Autres Veux Augmenter Ses Ventes Avec Du Trafic SEO ?