Une rédactrice d’un site d’actualité locale me demandait pourquoi ses titres, pourtant travaillés, apparaissaient tronqués avec des points de suspension dans les résultats de recherche. La réponse : ses titres dépassaient régulièrement soixante caractères, la limite au-delà de laquelle la plupart des moteurs de recherche coupent l’affichage. Un rappel dans un document de consignes ne suffisait pas — personne ne le rouvrait avant de publier.
La bonne solution, c’est un retour visuel immédiat, au moment même de la saisie, directement dans le champ titre de l’éditeur de blocs. Pas besoin d’extension dédiée : l’API JavaScript de l’éditeur permet d’observer les changements du titre en quelques lignes.
Observer le titre en direct avec wp.data
L’éditeur de blocs expose l’état de l’article via le store core/editor, accessible avec wp.data.select(). La fonction getEditedPostAttribute( 'title' ) renvoie le titre tel qu’il est actuellement saisi, avant même l’enregistrement. Pour réagir à chaque changement, on utilise wp.data.subscribe(), qui exécute une fonction de rappel à chaque mise à jour du store.
// inc/js/compteur-titre.js
wp.domReady( function () {
let dernierTitre = null;
wp.data.subscribe( function () {
const titre = wp.data.select( 'core/editor' ).getEditedPostAttribute( 'title' );
if ( titre === dernierTitre ) {
return;
}
dernierTitre = titre;
afficherCompteur( titre.length );
} );
} );
Injecter l’indicateur visuel dans l’interface
Reste à afficher ce chiffre quelque part. La solution la plus simple consiste à insérer un petit élément juste sous le champ titre, via une observation du DOM au chargement, puis à mettre à jour son contenu et sa couleur selon le seuil dépassé :
function afficherCompteur( longueur ) {
let conteneur = document.getElementById( 'compteur-titre-seo' );
if ( ! conteneur ) {
const zoneTitre = document.querySelector( '.editor-post-title__block' );
if ( ! zoneTitre ) {
return;
}
conteneur = document.createElement( 'p' );
conteneur.id = 'compteur-titre-seo';
conteneur.style.fontSize = '13px';
conteneur.style.marginTop = '4px';
zoneTitre.appendChild( conteneur );
}
conteneur.textContent = longueur + ' / 60 caractères';
conteneur.style.color = longueur > 60 ? '#b32d2e' : '#1e8a3c';
}
La classe editor-post-title__block est celle utilisée par l’éditeur de blocs autour du champ titre. Comme toute classe interne de l’interface d’administration, elle peut évoluer d’une version majeure à l’autre : un test rapide après chaque mise à jour du cœur reste une bonne habitude si votre snippet s’appuie sur elle.
Charger le script au bon endroit
L’enregistrement du script se fait classiquement via enqueue_block_editor_assets, avec les dépendances nécessaires pour que wp.data et wp.domReady soient déjà disponibles :
add_action( 'enqueue_block_editor_assets', function () {
wp_enqueue_script(
'compteur-titre-seo',
get_theme_file_uri( 'inc/js/compteur-titre.js' ),
array( 'wp-data', 'wp-dom-ready' ),
wp_get_theme()->get( 'Version' ),
true
);
} );
Adapter le seuil selon le type de contenu
Sur ce site d’actualité locale, les fiches d’agenda événementiel toléraient des titres un peu plus longs que les articles classiques, l’affichage dans les résultats de recherche n’étant pas leur canal principal de découverte. On peut récupérer le type de post en cours via wp.data.select( 'core/editor' ).getCurrentPostType() et ajuster le seuil affiché en conséquence, sans dupliquer tout le script.
Pourquoi pas un simple attribut maxlength ?
La tentation existe de limiter strictement la saisie avec un attribut HTML classique. Mais le champ titre de l’éditeur de blocs n’est pas un simple <input> : c’est un composant React contrôlé par le store de données, et une limitation brutale de la saisie empêcherait de corriger un titre déjà trop long en le raccourcissant depuis le milieu du texte. Un indicateur informatif, qui laisse la main à la rédactrice, est plus respectueux du travail éditorial qu’un blocage strict.
- Ne bloquez jamais la saisie : informez, mais laissez la décision finale à la personne qui rédige.
- Testez le script sur un titre vide au chargement d’un nouvel article, cas souvent oublié.
- Vérifiez le comportement en accessibilité : un lecteur d’écran ne doit pas être submergé d’annonces à chaque frappe.
Sur les projets éditoriaux, je préfère toujours un indicateur qui change progressivement de couleur (vert, orange, rouge) plutôt qu’un simple seuil binaire : ça donne une marge de manœuvre perçue, plus proche de la réalité du référencement où le seuil exact varie selon la largeur de police affichée par Google.
Ce qu’il faut retenir
Ce type de retour visuel discret change les habitudes de rédaction bien plus efficacement qu’une règle écrite dans un guide de style. Le coût de mise en œuvre est minime, l’API wp.data est stable depuis plusieurs versions majeures, et le résultat se voit dès la publication suivante dans les pages de résultats de recherche.
