Générateur de balises meta

Qu’est-ce qu’un générateur de balises meta ?

Il prend le peu dont ont besoin un résultat de recherche et une carte de partage — un titre, une description, une URL, une image — et écrit les balises qui les portent : l’élément title, la meta description, les propriétés Open Graph que lisent Facebook et LinkedIn, et les noms de la carte Twitter. Vous copiez le bloc dans l’en-tête de votre page et c’est fini.

Celui-ci prévisualise aussi le résultat et le mesure. Tout tourne dans votre navigateur : rien n’est envoyé et il n’y a pas de compte.

La mesure est la partie qui mérite une explication, car presque tous les autres outils du genre mesurent la mauvaise chose.

Comment utiliser le générateur

1. Remplissez les champs. Titre, description, URL, nom du site et image de partage. Choisissez le type de contenu et le style de carte Twitter. Les champs vides sont omis : une balise à valeur vide vaut moins que pas de balise du tout.
2. Faites glisser la largeur d’aperçu. L’aperçu se redessine et le panneau vous dit si votre titre tient ou se fait couper à cette largeur. Il n’existe pas de réglage juste, et c’est précisément le propos.
3. Copiez les balises. Le bloc est généré avec chaque valeur échappée pour un attribut HTML : une esperluette dans votre titre ou des guillemets dans votre description ne peuvent pas casser le balisage.

La règle des 60 caractères mesure la mauvaise grandeur

Le conseil est partout : restez sous 60 caractères pour le titre et sous 155 pour la description. Il vaut la peine de demander d’où viennent ces chiffres, car la documentation de Google dit autre chose. Sur la page décrivant la génération des liens de titre, Google écrit que le lien de titre est tronqué dans les résultats au besoin, « généralement pour tenir dans la largeur de l’appareil ». La largeur de l’appareil. Ni un nombre de caractères, ni un budget fixe en pixels : un téléphone et un large écran coupent à des endroits différents, donc aucun nombre unique ne peut convenir aux deux.

Cette même page mérite d’être lue pour une seconde raison. Elle énumère les sources dont Google tire un lien de titre : l’élément title, le titre visuel principal, les éléments de titre, la balise og:title, d’autres textes grands et proéminents, et jusqu’au texte des liens pointant vers la page depuis d’autres sites. Votre élément title est une entrée parmi plusieurs. L’ajuster à un nombre de caractères revient à le traiter comme une sortie garantie, ce qu’il n’est pas.

Que vaut alors un nombre de caractères comme indicateur de largeur ? Nous avons mesuré. Soixante caractères d’Arial en 20 pixels font 267 pixels s’il s’agit de l minuscules, et 1133 pixels s’il s’agit de W majuscules — un facteur de 4,2. Ce n’est pas une approximation assortie d’une marge d’erreur ; c’est une autre grandeur qui se trouve être corrélée.

Sur du texte réel, la corrélation est meilleure mais reste lâche. Sur 1193 titres de pages réels en cinq langues — ceux de ce site, mesurés dans le HTML compilé —, le nombre de caractères tenant dans un budget fixe allait de 47 à 72. La règle des « 60 caractères » a raison en moyenne et se trompe jusqu’à un cinquième sur un titre donné. Et le désaccord entre les deux règles dépend entièrement du budget en pixels que l’on suppose : elles divergent sur 16,7 % de ces titres à 512 pixels, 5,0 % à 580 et 7,2 % à 600. Le chiffre le plus intéressant est celui du milieu. La règle des caractères paraît meilleure vers 580 pixels parce que c’est là que tombent soixante caractères de prose moyenne — ce qui en fait une coïncidence calée sur une supposition à propos d’un budget que personne ne publie, et non une règle.

Cet outil ne vous donne donc pas de limite. Il mesure votre titre avec le moteur de texte de votre propre navigateur, affiche la largeur en pixels, et vous laisse déplacer vous-même la largeur d’aperçu pour voir où votre titre tombe. Si vous voulez une cible, visez à ce que le sens survive à la coupe plutôt qu’à atteindre un nombre.

Limites assumées

L’aperçu est une approximation d’un résultat de recherche, pas une simulation. La mise en page de Google change, les résultats portent des liens de site, des dates, des fils d’Ariane et des badges qui déplacent l’espace disponible, et mobile et bureau diffèrent. Voyez le curseur de largeur comme un moyen de jauger la marge de votre titre, non comme une prédiction.

Hors de Google, personne ne connaît le budget, et les sources qui en citent un divergent entre elles de plus de 17 % : 512, 580 et 600 pixels circulent tous, tout comme 18 et 20 pixels pour la taille de police. Cette page retient Arial en 20 pixels pour le titre parce que c’est la combinaison la plus souvent rapportée, et dit clairement qu’il s’agit d’un rapport et non d’une spécification.

La mesure passe par le canvas du navigateur et non par une table de largeurs embarquée, et ce choix compte plus qu’il n’y paraît. Une table ne peut pas appliquer le crénage, et pour une écriture cursive elle n’est pas seulement imprécise mais fausse : les lettres arabes se lient et changent de forme selon leurs voisines, si bien qu’un texte rendu est plus étroit que la somme de ses lettres isolées. Notre propre script de mesure a exactement ce défaut, et c’est pourquoi ses chiffres arabes surestiment la largeur — et pourquoi l’outil que vous utilisez ne fonctionne pas ainsi.

Le comptage de caractères présenté ici compte ce que vous appelleriez des caractères, par segmentation en graphèmes. Ce n’est pas ce que font la plupart des compteurs. Un emoji fusée est un caractère mais deux unités pour le String.length de JavaScript ; un emoji famille composé de quatre personnes reliées par des jointures de largeur nulle est un caractère et onze unités ; une lettre accentuée écrite comme base plus signe combinant est un caractère et deux unités. Si votre titre contient l’un de ces cas, un compteur bâti de la manière habituelle annonce un nombre qui ne compte rien de visible, et cet outil vous montre les deux.

Enfin, les balises sont générées mais non validées auprès d’un robot réel. Savoir si votre image de partage est accessible, au bon format ou bloquée par une règle robots ne peut venir que d’une requête, et requêter votre URL supposerait un serveur — ce que ce site n’utilise pour rien d’autre qu’un modèle de texte.

Pourquoi est-ce gratuit ?

Écrire une douzaine de lignes de balisage et mesurer un peu de texte, c’est un travail que votre machine fait en une milliseconde. Aucun envoi, aucun compte, rien à filigraner.

Si vous voulez relire le HTML dans lequel vous collerez tout cela, l’encodeur d’entités HTML et le formateur HTML de ce site s’en chargent, sans rien envoyer non plus.