Balises meta : title, description et Open Graph expliqués

Avant qu’un internaute clique sur votre page, il voit un titre, une courte description et parfois une image : dans les résultats de recherche, dans une conversation ou sur un réseau social. Tout cela vient de quelques balises placées dans le <head> de la page. Voici lesquelles comptent vraiment pour le référencement et le partage, quelles longueurs viser, et les erreurs que l’on retrouve sur beaucoup de sites.

Title et meta description : les deux balises à soigner#

La balise <title> est le titre affiché dans les résultats de recherche et dans l’onglet du navigateur. Elle doit être unique pour chaque page, décrire son contenu, et placer l’idée principale au début. Placez de préférence le nom du site à la fin.

La balise <meta name="description"> résume la page. Google a indiqué qu’elle ne sert pas au classement, mais elle peut être reprise comme extrait sous le titre, donc elle influence le clic. Écrivez une ou deux phrases qui annoncent ce que la personne trouvera, sans répéter le titre.

Côté longueur, ce sont des repères et non des règles : Google coupe un titre selon sa largeur en pixels, ce qui correspond à environ 60 caractères, et une description autour de 155 à 160 caractères. Un texte plus long n’est pas invalide, il risque simplement d’être tronqué, et Google peut réécrire l’un ou l’autre selon la requête.

L’URL canonique#

Une même page est souvent accessible par plusieurs adresses : avec ou sans www, en http ou en https, avec des paramètres de suivi comme ?utm_source=newsletter. La balise <link rel="canonical"> indique l’adresse officielle à retenir, pour que ces variantes ne soient pas traitées comme des pages concurrentes. Utilisez une URL absolue, avec le protocole. C’est un signal, pas un ordre.

Robots : index, noindex, follow, nofollow#

Sans balise, une page est indexable et ses liens sont suivis, ce qui équivaut à index, follow. noindex demande de ne pas afficher la page dans les résultats ; nofollow demande de ne pas suivre ses liens. Réservez noindex aux pages sans intérêt en recherche : résultats de recherche interne, pages de remerciement. L’erreur classique est de laisser un noindex posé sur un site de test après la mise en ligne.

Open Graph et Twitter Card pour le partage#

Quand on colle un lien dans une messagerie ou sur un réseau, la plateforme lit les balises Open Graph (og:) pour construire l’aperçu : og:title, og:description, og:image, og:url, og:type et og:site_name. X utilise twitter:card pour choisir la forme de la carte : summary_large_image pour une grande image, summary pour une vignette. À défaut de balises twitter:title, twitter:description et twitter:image, X peut se rabattre sur les balises Open Graph.

Pour l’image, un ratio d’environ 1,91:1, par exemple 1200 × 630 pixels, est le format le plus courant. Son adresse doit être absolue et accessible sans connexion. Les plateformes gardent les aperçus en cache : après une modification, il faut souvent passer par leur outil de débogage pour forcer la relecture.

<title>Regex : guide pratique avec exemples</title>
<meta name="description" content="Écrire et déboguer une regex.">
<link rel="canonical" href="https://www.example.com/ma-page">
<meta property="og:title" content="Regex : guide pratique">
<meta property="og:image" content="https://www.example.com/og.jpg">
<meta name="twitter:card" content="summary_large_image">

Les erreurs les plus fréquentes#

• Le même titre et la même description sur toutes les pages.
• Un titre bourré de mots-clés, ou qui dépasse nettement 60 caractères.
• Des URL relatives (/images/og.jpg) dans og:image ou dans la balise canonique.
• Une URL canonique copiée d’une autre page lors d’un copier-coller.
• Des guillemets ou des & non échappés dans un attribut, qui cassent le HTML.
• L’oubli de lang sur la balise <html>.

Ces balises ne remplacent pas un contenu utile : pour la démarche d’ensemble, voir créer un site web qui fonctionne.

Générer les balises et vérifier les longueurs#

Le générateur de balises meta écrit le bloc à coller :

1. Renseignez « Titre de la page » et « Description » : un compteur compare leur longueur à 60 et 160 caractères.
2. Ajoutez l’« URL canonique », le « Nom du site » et l’« URL de l’image Open Graph » (une simple adresse, l’image n’est pas chargée).
3. Choisissez le « Type Open Graph » (« Site web » ou « Article »), la « Twitter Card » (« Grande image » ou « Résumé ») et les consignes « Indexation (robots) » et « Liens (robots) ».
4. Copiez le résultat avec « Copier les balises » et collez-le dans le <head>.

Les valeurs sont échappées pour le HTML, et deux aperçus (« Résultat Google (approximation) » et une maquette de carte de partage) donnent une idée du rendu. La langue sert à déduire og:locale ; l’attribut lang de <html>, og:image:alt, la taille de l’image ou twitter:site restent à ajouter à la main. Pour vérifier un texte rédigé ailleurs, le compteur de mots affiche aussi les repères de titre SEO et de meta description.