🖥️ Aperçu de l'extrait de code et du SERI

Aperçu de l'extrait de SERP

Saisissez le titre de votre page, la méta description et l'URL pour voir un aperçu en direct, précis pixel de votre résultat Google extrait sur le bureau et mobile, avec des avertissements de troncation avant qu'ils ne coûtent les clics.

0 Chars · 0px
0 Chars · 0px
e
example.com
https://example.com

Comment utiliser l'aperçu SERP

Quatre étapes rapides pour un extrait qui s'affiche en entier et gagne le clic.

1

Entrez le titre de votre page

Tapez la balise de titre que vous prévoyez d'utiliser. Le caractère et les compteurs de pixel mettent à jour en direct afin que vous puissiez voir à quelle distance vous êtes à ~600px limite de bureau de Google.

2

Ajouter votre URL et votre méta description

Coller l'URL de la page et écrire la méta description. L'aperçu rend la chapelure, le titre bleu et l'extrait de gris exactement comme un résultat réel.

3

Interrupteur entre le bureau et le mobile

Basculez les onglets Bureau et Mobile pour vérifier les deux mises en page, puisque mobile utilise une colonne plus étroite et enveloppe les titres sur plus de lignes.

4

Correction des avertissements de troncation

Modifier jusqu'à ce que les puces d'avertissement deviennent vert. Trim tout ce qui est marqué comme trop large afin que Google affiche votre titre complet et la description au lieu d'une ellipse.

Questions tirées du résumé du programme SERP

Google tronque les liens de titre de bureau à environ 600 pixels, pas un nombre de caractères fixes, parce que les caractères larges comme W et M prennent plus d'espace que les caractères étroits comme i et l. Cet outil mesure la largeur réelle de pixel rendu afin que vous puissiez voir exactement où votre titre sera coupé.
Google affiche généralement environ 920 pixels de méta description sur le bureau (environ 155 à 160 caractères) et moins sur le mobile. Tout est tronqué plus longtemps avec une ellipse. L'aperçu montre à la fois bureau et troncation mobile en direct que vous tapez.
Les résultats mobiles utilisent une colonne plus étroite et une taille de police différente, de sorte que les titres enveloppent sur plus de lignes et les descriptions sont coupés plus court. Cet outil rend les deux mises en page côte à côte afin que vous puissiez optimiser pour chaque.
Non. L'aperçu fonctionne entièrement dans votre navigateur en utilisant l'API de mesure de texte Canvas. Rien de ce que vous tapez n'est téléchargé, enregistré ou stocké, de sorte que vous pouvez tester en toute sécurité des pages inédites et des URL internes.

Pour les développeurs

Cet aperçu SERP fonctionne 100% côté client — la mesure de pixel se produit dans votre navigateur, donc rien de ce que vous tapez n'est jamais téléchargé.

✓ Privé par conception — pas de retour sur serveur

La troncation est mesurée de la même façon que le navigateur dessine du texte — avec l'API Canvas measurementText. Voici l'idée centrale que vous pouvez déposer dans votre propre pipeline de construction:

// Measure rendered pixel width like Google does
const ctx = document.createElement('canvas').getContext('2d');
function titleWidth(text, font = '20px arial') {
  ctx.font = font;
  return ctx.measureText(text).width; // > 600 => truncated on desktop
}
console.log(titleWidth('Your page title here'));

Besoin de ceci à l'échelle — vérifier par lots des milliers de titres de votre CMS ou CI? Une API REST hébergée pour nos outils de référencement est disponible sur les régimes payants. Voir les plans →