N° 048 · ●●○

Aperçu Google

Un titre, une description, une adresse : on voit son résultat de recherche comme il apparaîtra, avec la largeur mesurée en pixels. Le bon exercice pour mesurer du texte et soigner le référencement d'une page.

HTMLJS

Ce qu'on apprend

Mesurer la largeur d'un texte avec un canvas
Découper une adresse avec l'objet URL
Écrire de bonnes balises title et meta description

Pourquoi ce langage

Pourquoi un aperçu de recherche ? Le titre et la description d'une page sont la première chose qu'on lit d'un site, dans les résultats de recherche. Trop longs, ils sont coupés au mauvais endroit. Trop courts, ils ne donnent pas envie de cliquer.

Les moteurs ne coupent pas à un nombre de caractères mais à une largeur en pixels : un W prend bien plus de place qu'un i. On mesure donc le texte comme le ferait le navigateur, avec la méthode measureText d'un canvas.

L'adresse est découpée avec l'objet URL pour afficher le fil d'Ariane, et des conseils s'affichent en direct.

Pourquoi en JavaScript simple ? Un canvas invisible, deux mesures et un peu de CSS pour imiter la mise en page. Les limites sont des repères : les moteurs les ajustent régulièrement.

Comment ça marche

MESURER EN PIXELS

Un canvas jamais affiché, juste pour sa méthode measureText.

const ctx = document.createElement('canvas').getContext('2d');
function largeur(texte, taille) {
  ctx.font = `${taille}px Arial`;
  return ctx.measureText(texte).width;
}

LES LIMITES
Des repères : environ 580 pixels pour le titre, deux lignes pour la description.
```
const LIMITE_TITRE = 580, LIMITE_DESC = 920;
```

LE FIL D'ARIANE

L'objet URL découpe proprement l'adresse, et lève une erreur si elle est invalide.

function fil(adresse) {
  try {
    const u = new URL(adresse);
    return u.origin + u.pathname.split('/').filter(Boolean).map(p => ' › ' + p).join('');
  } catch { return 'Adresse invalide'; }
}

METTRE À JOUR L'APERÇU

function maj() {
  const t = titre.value, d = desc.value;
  apercuTitre.textContent = t;
  apercuDesc.textContent = d;
  apercuUrl.textContent = fil(url.value);
  compteurTitre.textContent = `${Math.round(largeur(t, 20))} / ${LIMITE_TITRE} px`;
  compteurTitre.classList.toggle('trop', largeur(t, 20) > LIMITE_TITRE);
}

DANS LA VRAIE PAGE

Ce que l'aperçu simule se règle dans le <head>.

<title>Développeur web à Bruxelles · Sites rapides et sur mesure</title>
<meta name="description" content="Des sites pensés pour le mobile, rapides et faciles à modifier.">

Pièges

PIÈGE 1 : Compter les caractères

Piège

Mauvais : couper le titre à 60 caractères. Avec beaucoup de M et de W, il dépasse quand même.

Fix

Correct : mesurer la largeur en pixels avec measureText, dans la police utilisée par le moteur.

PIÈGE 2 : Le même titre partout

Piège

Mauvais : « Accueil | Mon site » sur toutes les pages. Les résultats se ressemblent et aucun ne donne envie.

Fix

Correct : un titre unique par page, avec le sujet de la page d'abord et le nom du site à la fin.

PIÈGE 3 : Mettre l'aperçu dans innerHTML

Piège

Mauvais : afficher le titre saisi avec innerHTML. Une balise tapée dans le champ s'exécute.

Fix

Correct : textContent partout, puisque tout vient de la saisie.

PERSONNALISER

L'aperçu des réseaux sociaux avec l'image og:image et le titre og:title.
Un mot-clé à surligner en gras dans la description, comme le font les moteurs.
L'import des balises d'une page existante en collant son HTML.

OPTIMISATION

Mesurez une seule fois par frappe, et seulement les champs qui ont changé.
Chargez la police utilisée par le moteur avant de mesurer, sinon les largeurs sont fausses.

VERS REACT

Avec Next.js, le titre et la description se déclarent dans l'objet metadata ou la fonction generateMetadata de chaque page.

Le formulaire d'aperçu garde les trois champs dans un useState objet.

La mesure se fait avec useMemo, et le canvas se garde dans un useRef.

Commentaires

Chargement des commentaires…