SEO pour Headless CMS : éléments auxquels il faut prêter attention
Publié: 2020-11-30Table des matières
Fondamentalement, le référencement pour un CMS sans tête suit toujours les mêmes règles qu'un CMS traditionnel. Ainsi, la crawlabilité, la vitesse et la qualité du contenu restent les objectifs lorsque vous souhaitez vous y mettre. Mais bien que nous ayons des objectifs similaires à atteindre, les moyens pour atteindre ces objectifs sont différents dans un CMS headless.
En quoi le référencement est différent dans un CMS sans tête
Dans un CMS sans tête, la majeure partie du travail de référencement doit être effectuée manuellement, car il n'y a généralement pas de plug-in ou de modules complémentaires pour faciliter l'ensemble du processus, ce qui signifie plus de travail pour vous et plus de choses à apprendre dans le processus au lieu de en s'appuyant sur des outils tiers. De plus, étant donné que la plupart des frameworks CMS et frontaux sans tête sont actuellement basés sur JavaScript, le référencement pour de tels environnements peut devenir compliqué en raison de la nature des robots d'exploration qui ne sont pas en mesure de restituer facilement JavaScript.
Même si Googlebot peut rendre JavaScript, nous ne voulons pas nous fier à cela.
Martin Splitt, sur la mise en œuvre du rendu dynamique
Lecture recommandée : Headless CMS vs CMS traditionnel
Éléments à surveiller dans un CMS sans tête
Textes alternatifs
Les textes alternatifs aident à rendre le contenu de votre image lisible par les robots Google. Semblable aux métadonnées personnalisées, le texte alternatif pour les images n'est pas une fonctionnalité prête à l'emploi dans la plupart des CMS sans tête, ce qui signifie qu'il devra être implémenté par votre fournisseur de CMS.
Pour un CMS sans tête qui n'a pas de fonctionnalité de texte alternatif intégrée, nous pouvons ajouter manuellement le texte alternatif par image sans trop d'effort, car il vous suffit d'ajouter un attribut <alt> à vos images.
<img src="image.png" alt="notre texte alternatif">
Métadonnées
Les balises de métadonnées sont des balises spéciales que la recherche Google comprend. Ces balises décrivent le contenu de votre site et permettent de contrôler l'affichage de vos pages dans la recherche Google. Et contrairement à un CMS traditionnel, un CMS sans tête n'offre généralement pas la possibilité de modifier les balises de métadonnées à la volée, ce qui signifie que le titre, les descriptions et les autres balises méta de votre page doivent être ajoutés manuellement dans vos modèles de contenu.
Par exemple, pour un site Web sans tête doté d'une interface basée sur React mais sans prise en charge des métadonnées personnalisées, nous utilisons react-helmet pour ajouter facilement des métadonnées dans notre <head> .
Pour un CMS sans tête qui prend en charge les métadonnées personnalisées, vous devrez généralement ajouter des champs contenant des balises de métadonnées personnalisées dans votre modèle de contenu ou créer un modèle de référencement personnalisé contenant toutes les balises méta nécessaires. Le modèle SEO créé doit être configuré pour avoir des relations avec toutes les pages qui en ont besoin.
Extraits de données structurées
Les extraits de données structurés aident la recherche Google à mieux comprendre votre page et tout son contenu. En fournissant des extraits de données structurées valides, votre site est éligible pour des résultats enrichis.
Pour créer un extrait de données structuré, nous utilisons un tableau JSON-LD qui est stocké dans le <head> de votre site. Et contrairement au CMS traditionnel où tout le processus est automatisé avec un plugin (par exemple, Yoast SEO), dans un CMS sans tête, vous devrez :
- Choisissez les bons types de données structurées pour vos pages
- Ajoutez du code JavaScript personnalisé qui permet de générer soit toutes les données structurées nécessaires, soit d'ajouter plus d'informations aux données structurées rendues côté serveur
chercher('https://api.example.com/recipes/123')
.then(response => response.text())
.then(structuredDataText => {
script const = document.createElement('script');
script.setAttribute('type', 'application/ld+json');
script.textContent = texteDeDonnéesstructurées ;
document.head.appendChild(script);
});- Testez votre implémentation à l'aide du test de résultats enrichis
Problèmes de suivi des pages vues
Si vous avez déjà essayé d'implémenter Google Analytics sur un site Web sans tête, vous avez probablement remarqué que seule la première page vue de votre site Web est suivie. Cela est dû en grande partie au fait que l'interface d'un CMS sans tête est une application à page unique par nature, ce qui signifie que la page ne se charge qu'une seule fois et qu'un seul événement pageView est déclenché par session. Pour contourner ce problème, nous implémentons l'API History pour activer les pages vues virtuelles qui peuvent ensuite être suivies à l'aide du déclencheur History Change dans Google Tag Manager.
Le déclencheur de modification de l'historique suit les modifications apportées au fragment d'URL ou à l'objet d'état de l'historique. Lorsqu'un changement se produit entre ces deux, nous avons les variables suivantes :
- Ancien fragment d'URL de l'historique : ce qu'était le fragment d'URL.
- Historique du nouveau fragment d'URL : ce qu'est maintenant le fragment d'URL.
- Ancien état de l'historique : l'ancien objet d'état de l'historique, contrôlé par les appels du site à pushState.
- Nouvel état de l'historique : le nouvel objet d'état de l'historique, contrôlé par les appels du site à pushState.
Pour créer un déclencheur de changement d'historique, accédez simplement à Google Tag Manager et :
- Choisissez Déclencheurs > Nouveau
- Choisissez Configuration du déclencheur > Modification de l'historique
Après cela, nous devrons créer une nouvelle balise de configuration Google Analytics à déclencher sur le déclencheur de modification de l'historique que nous venons de créer, comme ceci :
Et c'est tout. Vous devriez maintenant pouvoir suivre les pages vues sur votre site Web sans tête.
Problèmes d'audit SEO
Étant donné que votre site Web sans tête est principalement composé de JavaScript côté client, l'audit SEO peut poser problème, car les robots d'exploration utilisés dans la plupart des outils d'audit SEO gratuits n'ont pas la capacité de rendre JavaScript.
Ce problème peut, comme prévu, être résolu en payant plus, car vous pouvez passer au prochain plan premium pour activer la prise en charge de cette fonctionnalité. Vous devez également noter que le rendu JavaScript n'est pas activé par défaut dans la plupart des outils d'audit SEO, ce qui signifie que vous devrez l'activer manuellement pour explorer votre site Web sans tête.
Fractionnement de code
Étant donné qu'un CMS headless typique est fortement basé sur JavaScript, la quantité de code JavaScript utilisée dans votre site Web, en particulier lorsque vous utilisez un grand nombre de bibliothèques tierces, peut atteindre le point d'être écrasante.
Et comme nous le savons tous, la vitesse des pages affecte le référencement, nous ne pouvons donc pas laisser notre code JavaScript rester ainsi, c'est pourquoi le fractionnement du code est fait pour contourner ce problème. Avec le fractionnement du code, vous pouvez diviser votre code JS en petits groupes qui peuvent ensuite être chargés dynamiquement au moment de l'exécution. Cette fonctionnalité est actuellement prise en charge par des bundlers tels que Webpack et Browserify via factor-bundle.
import React, { Suspense, paresseux } de 'react' ;
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom' ;
const Home = paresseux(() => import('./routes/Home'));
const À propos = paresseux(() => import('./routes/À propos'));
const App = () => (
<Routeur>
<Suspense fallback={<div>Chargement...</div>}>
<Commutateur>
<Route exact path="/" component={Home}/>
<Route path="/about" component={À propos}/>
</Switch>
</Suspense>
</Router>
);Rendu dynamique
Comme la majorité des sites Web sans tête sont de nature JavaScript, ils sont confrontés au même défi majeur en matière de référencement qu'est le rendu JavaScript.
[…], il est difficile de traiter JavaScript et tous les robots des moteurs de recherche ne sont pas capables de le traiter avec succès ou immédiatement.
Mise en œuvre du rendu dynamique, Google
Les robots d'exploration ne peuvent pas rendre JavaScript efficacement, c'est pourquoi Google lui-même suggère le rendu dynamique comme solution de contournement dans l'intervalle . Introduit dans Google I/O '18, le rendu dynamique est une solution idéale pour les sites Web basés sur JavaScript qui souhaitent résoudre facilement les problèmes de référencement tout en conservant tous les avantages du rendu côté client. Avec cette nouvelle méthode de rendu, votre serveur Web envoie aux utilisateurs un contenu normal rendu côté client, tandis que les robots des moteurs de recherche obtiennent un contenu HTML statique entièrement rendu par le serveur.
Tout cela signifie que vous obtenez le meilleur des deux mondes avec le rendu dynamique : la facilité d'exploration du rendu côté serveur et le rendu ultérieur rapide du rendu côté client.
Pour implémenter le rendu dynamique, nous allons devoir nous appuyer sur des moteurs de rendu dynamiques tels que Rendertron ou Puppeteer pour raccourcir l'ensemble du processus. Ces rendus convertiront le contenu de votre site en HTML statique compréhensible par les robots.
Une fois l'installation et la configuration de votre moteur de rendu dynamique terminées, suivez les étapes supplémentaires de la documentation officielle de Google pour configurer les comportements des agents utilisateurs.
Conclusion
Le référencement pour un CMS sans tête n'est pas le moyen le plus simple, et cela nécessitera un peu de travail de la part de vos développeurs pour que tout soit correct. Mais une fois que vous avez compris, un CMS sans tête peut être tout aussi efficace qu'un CMS traditionnel en matière de référencement. De plus, vous bénéficiez de beaucoup plus de liberté et de flexibilité pour créer du contenu comme vous le souhaitez.