{"id":76326,"date":"2024-02-26T09:20:34","date_gmt":"2024-02-26T08:20:34","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=76326&preview=true&preview_id=76326"},"modified":"2024-02-28T09:17:15","modified_gmt":"2024-02-28T08:17:15","slug":"wordpress-headless-seo","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/wordpress-headless-seo\/","title":{"rendered":"Strat\u00e9gies SEO avanc\u00e9es pour les sites WordPress headless"},"content":{"rendered":"

Opter pour un site WordPress headless<\/a> plut\u00f4t que pour une architecture de site traditionnelle change consid\u00e9rablement la donne en mati\u00e8re de r\u00e9f\u00e9rencement. Cette approche s\u00e9pare la partie frontend du site de sa partie backend, ce qui accroit la flexibilit\u00e9 et la rapidit\u00e9. Mais elle pose \u00e9galement de nouveaux d\u00e9fis en mati\u00e8re de SEO.<\/p>\n

En effet, la visibilit\u00e9 de votre site et la mani\u00e8re dont les internautes vous trouvent gr\u00e2ce aux moteurs de recherche d\u00e9pendent de vos tactiques de r\u00e9f\u00e9rencement. C’est pourquoi nous abordons aujourd’hui quelques strat\u00e9gies de SEO avanc\u00e9es con\u00e7ues sp\u00e9cialement pour les sites WordPress headless.<\/p>\n

Nous allons nous assurer que les moteurs de recherche peuvent correctement explorer votre site, modifier les balises m\u00e9ta, et plus encore. Que vous codiez le site ou que vous \u00e9laboriez des strat\u00e9gies de marketing, vous obtiendrez des conseils pratiques pour affiner vos comp\u00e9tences en mati\u00e8re de SEO.<\/p>\n

Nous allons nous y mettre.
\n

<\/div><\/kinsta-auto-toc><\/p>\n

Comment rendre les sites WordPress headless explorables<\/h2>\n

Rendre les sites WordPress headless explorables pr\u00e9sente des d\u00e9fis uniques que les sites traditionnels ne rencontrent pas. Le principal obstacle vient du fait que le contenu des sites headless est rendu c\u00f4t\u00e9 client en utilisant JavaScript<\/a>, ce qui a historiquement pos\u00e9 des difficult\u00e9s aux robots des moteurs de recherche en termes d’exploration et d’indexation.<\/p>\n

Toutefois, des techniques modernes telles que le rendu dynamique et le rendu c\u00f4t\u00e9 serveur ont consid\u00e9rablement facilit\u00e9 la r\u00e9solution de ces probl\u00e8mes.<\/p>\n

Rendu dynamique<\/h3>\n

Le rendu dynamique<\/a> sert de pont entre les contenus \u00e0 forte teneur en JavaScript et les robots d’indexation des moteurs de recherche. Il consiste \u00e0 pr\u00e9senter aux moteurs de recherche un instantan\u00e9 HTML statique<\/a> et pr\u00e9-rendu du contenu de votre site, tandis que les utilisateurs continuent de d\u00e9couvrir la version dynamique et interactive.<\/p>\n

Les robots d’indexation peuvent ainsi indexer le contenu de votre site sans avoir \u00e0 ex\u00e9cuter de JavaScript<\/a>, ce qui am\u00e9liore imm\u00e9diatement sa visibilit\u00e9 et ses performances en mati\u00e8re de r\u00e9f\u00e9rencement.<\/p>\n

Pour mettre en \u0153uvre le rendu dynamique dans un environnement WordPress headless, vous utiliserez typiquement une solution comme prerender.io<\/a> ou construirez votre propre m\u00e9canisme de rendu c\u00f4t\u00e9 serveur, \u00e9ventuellement avec Node.js<\/a>.<\/p>\n

\"Prerender\"
Prerender<\/figcaption><\/figure>\n

Voici une d\u00e9composition conceptuelle :<\/p>\n

1. D\u00e9tection des agents utilisateurs<\/h4>\n

Vous devez faire la diff\u00e9rence entre les requ\u00eates faites par les utilisateurs (navigateurs) et celles faites par les robots d’indexation (comme Googlebot). Pour cela, vous pouvez v\u00e9rifier l’agent utilisateur dans les en-t\u00eates HTTP des requ\u00eates entrantes.<\/p>\n

2. Servir du contenu statique aux robots<\/h4>\n

Lorsqu’un robot d’exploration est d\u00e9tect\u00e9, votre serveur redirige la requ\u00eate vers une version HTML statique pr\u00e9-rendue de la page demand\u00e9e, au lieu de servir le contenu habituel, lourd en JavaScript. Pour ce faire, vous pouvez soit utiliser un service de pr\u00e9-rendu, soit disposer d’une configuration de pr\u00e9-rendu sur votre serveur qui g\u00e9n\u00e8re des pages HTML statiques de votre contenu \u00e0 la vol\u00e9e ou \u00e0 partir d’un cache.<\/p>\n

3. Comment le mettre en place avec WordPress<\/h4>\n

Des services comme prerender.io proposent un middleware qui peut \u00eatre int\u00e9gr\u00e9 \u00e0 votre serveur. Ce middleware intercepte les requ\u00eates entrantes, v\u00e9rifie si elles proviennent de robots d’exploration, et si c’est le cas, sert une page pr\u00e9-rendue \u00e0 partir du cache de prerender.io ou d\u00e9clenche le rendu d’une nouvelle page si elle n’est pas en cache.<\/p>\n

Si vous construisez une solution personnalis\u00e9e, vous utiliserez typiquement Puppeteer<\/a> dans un environnement Node.js pour pr\u00e9-rendre les pages. Lorsque votre API WordPress d\u00e9livre du contenu \u00e0 votre serveur Node.js, il v\u00e9rifie l’agent utilisateur. S’il s’agit d’un robot d’exploration, Puppeteer rend la page, enregistre le HTML statique et sert cette version.<\/p>\n

Ce processus peut \u00eatre optimis\u00e9 en mettant en cache les pages statiques afin d’\u00e9viter de les rendre \u00e0 chaque requ\u00eate d’un robot d’exploration.<\/p>\n

Rendu c\u00f4t\u00e9 serveur<\/h3>\n

Le rendu c\u00f4t\u00e9 serveur<\/a>, quant \u00e0 lui, consiste \u00e0 rendre le contenu de la page sur le serveur avant qu’il n’atteigne le client. Cela signifie que lorsqu’un robot de moteur de recherche demande une page, il re\u00e7oit une page HTML enti\u00e8rement rendue, ce qui la rend imm\u00e9diatement indexable.<\/p>\n

Vous pouvez mettre en \u0153uvre le rendu c\u00f4t\u00e9 serveur en utilisant divers frameworks et biblioth\u00e8ques JavaScript, tels que React<\/a> et Node.js<\/a>, pour rendre le contenu directement sur le serveur. Cette approche permet non seulement de rendre le contenu plus accessible aux moteurs de recherche, mais aussi d’am\u00e9liorer l’exp\u00e9rience globale de l’utilisateur en acc\u00e9l\u00e9rant le temps de chargement des pages.<\/p>\n

Pour le rendu c\u00f4t\u00e9 serveur, l’utilisation de frameworks comme Next.js<\/a> en combinaison avec l’API REST de WordPress<\/a> ou GraphQL<\/a> peut rationaliser le processus.<\/p>\n

Une configuration typique peut impliquer la r\u00e9cup\u00e9ration de donn\u00e9es avec GraphQL et le rendu des pages sur le serveur en utilisant Next.js, ce qui permet de pr\u00e9-remplir le contenu avant qu’il ne soit servi.<\/p>\n

Configuration des URL canoniques<\/h2>\n

Configurer des URL canoniques pour un site WordPress headless est un autre moyen de maintenir l’int\u00e9grit\u00e9 du SEO, en particulier lorsque le contenu est servi par un frontend d\u00e9coupl\u00e9 comme Gatsby<\/a> ou Next.js.<\/p>\n

Les URL canoniques<\/a> permettent d’\u00e9viter les probl\u00e8mes de contenu dupliqu\u00e9 en signalant aux moteurs de recherche quelle version d’une page de contenu est la version principale ou \u00ab canonique \u00bb. Ceci est n\u00e9cessaire dans un environnement headless o\u00f9 le contenu peut \u00eatre accessible par plusieurs routes ou points de terminaison.<\/p>\n

Pourquoi les URL canoniques sont importantes<\/h3>\n

Dans un environnement WordPress headless, le risque de duplication du contenu augmente en raison de la s\u00e9paration entre le frontend et le backend de WordPress. Les URL canoniques att\u00e9nuent ce risque en guidant les moteurs de recherche pour qu’ils indexent l’URL<\/a> pr\u00e9f\u00e9r\u00e9e. Cela garantit que la valeur SEO est consolid\u00e9e sur la page canonique plut\u00f4t que d’\u00eatre dilu\u00e9e dans plusieurs versions du m\u00eame contenu.<\/p>\n

Prendre le temps de d\u00e9finir des URL canoniques permet \u00e9galement de clarifier quelle version du contenu doit \u00eatre class\u00e9e dans les r\u00e9sultats de recherche.<\/p>\n

Comment mettre en place des URL canoniques<\/h3>\n

La mise en place d’URL canoniques dans un environnement WordPress headless peut \u00eatre g\u00e9r\u00e9e efficacement avec l’aide de l’extension Yoast SEO, ainsi que WPGraphQL, pour connecter les donn\u00e9es Yoast SEO \u00e0 votre installation headless.<\/p>\n

Voici un aper\u00e7u de haut niveau d’un processus que le d\u00e9veloppeur web Andrew Kepson<\/a> explique en d\u00e9tail et qui implique deux extensions populaires :<\/p>\n