Guide du débutant sur Headless CMS

Publié: 2022-02-01

Headless CMS (Content Management Systems) supprime le lien direct entre le backend de votre base de données de contenu et la manière dont le contenu est servi aux utilisateurs lorsqu'ils visitent votre site Web ou votre application.

Cela se compare aux CMS "couplés" traditionnels où la base de données et le rendu du contenu sont contrôlés par le même CMS.

Alors qu'un CMS couplé a ses avantages - comme une interface unique pour éditer à la fois votre base de données et son affichage à l'écran - le CMS headless est plus puissant et flexible.

Cela est particulièrement vrai pour les sites Web plus volumineux, les bases de données complexes ou lorsque plusieurs personnes doivent travailler sur différents aspects de votre contenu, site Web/application et référencement sur site.

Qu'est-ce qu'un Headless CMS ?

Dans un CMS traditionnel, la base de données de contenu backend et la conception du site Web frontal peuvent être modifiées à partir du même tableau de bord CMS, c'est pourquoi ces systèmes sont appelés «couplés».

Un système CMS sans tête utilise des systèmes séparés pour la base de données et la livraison, avec une API (Application Programming Interface) agissant comme un pont entre les deux.

Certains des CMS sans tête les plus couramment utilisés incluent Ghost, Prismic, Netlify et Contentful, et comme les CMS couplés, ils ont été conçus pour fonctionner efficacement, offrir des fonctionnalités flexibles et évoluer rapidement lorsque votre base de données commence à croître.

Le CMS sans tête peut être plus cher, en raison de sa plus grande complexité, mais il offre des fonctionnalités qu'un système couplé ne peut pas, telles que la possibilité de servir du contenu d'une manière complètement différente aux visiteurs qui accèdent à votre site à partir de différents appareils.

Cela a à son tour des implications positives pour les techniques d'optimisation des moteurs de recherche (SEO) telles que la conception de sites Web réactifs, car votre contenu peut être diffusé de manière beaucoup plus réactive, dépendante de la plate-forme et véritablement adaptée aux mobiles.

Plus d'avantages du CMS sans tête

Examinons quelques-uns des avantages spécifiques du CMS sans tête, qui contribuent à la popularité massive et à l'adoption rapide de cette approche sur les sites Web du monde entier :

Contenu personnalisé

Un contrôle plus étroit de votre contenu et de la façon dont il s'affiche signifie que vous pouvez personnaliser vos pages dans une bien plus grande mesure. Que vous le fassiez pour des groupes d'utilisateurs spécifiques ou pour votre public dans son ensemble, cela vous donne encore plus de moyens de vous démarquer de vos concurrents.

Chargement plus rapide

L'utilisation d'une API et d'un frontend adaptés à l'appareil optimise les vitesses de chargement sur différents appareils, y compris ceux qui accèdent à votre site via une connexion de données mobile. Cela prend également en charge toute action que vous entreprenez dans les campagnes de référencement pour améliorer vos performances Core Web Vitals.

Flexibilité à l'épreuve du temps

La possibilité d'installer des API supplémentaires signifie que votre base de données pourra être connectée à de nouvelles interfaces à l'avenir. Cela peut vous permettre de diversifier, par exemple, un site Web pour les visiteurs de bureau et mobiles, pour également servir des écrans d'information en magasin et des technologies portables.

En résumé, un CMS sans tête est idéal lorsque vous avez des besoins frontaux complexes, mais que vous souhaitez simplifier l'édition et la maintenance de votre contenu réel - avec des modifications et des mises à jour reflétées immédiatement sur toutes vos différentes plateformes.

Comment planifier un CMS sans tête

La modélisation de contenu est l'étape de planification cruciale avant de mettre en œuvre un nouveau CMS sans tête. Cela ressemble à la façon dont vous planifiez la hiérarchie des dossiers, la structure des URL et le plan du site d'un site Web, sauf que dans ce cas, vous travaillerez avec des types de contenu plutôt qu'avec des pages individuelles.

Que sont les types de contenu ?

Les différents types de contenu que vous définissez contiennent des champs qui extraient des informations de votre base de données. Cela pourrait être des métadonnées SEO – et si vous utilisez un CMS couplé traditionnel avec un plugin SEO comme Yoast, il est probable que vous ayez déjà vu et rempli des champs de métadonnées dans le passé.

Sur vos pages de contenu principales, vous pouvez avoir des champs pour le slug d'URL, ainsi qu'une ou plusieurs sections de contenu visible à afficher sur la page.

Vous pouvez également définir des types de contenu pour les ressources multimédias, en donnant à vos fichiers un nom, une description qui ne peut être vue qu'en interne et un emplacement où le fichier est accessible.

Comment fonctionnent les types de contenu ?

Une fois que vous avez défini tous les types de contenu requis, vous avez créé une méthode modulaire de "blocs de construction" grâce à laquelle les API peuvent extraire des informations de votre base de données et les assembler pour différentes plates-formes.

Les API peuvent demander des données à partir de différents types de contenu et les construire de manière totalement unique pour afficher les pages d'une manière spécifique à la plate-forme.

Si vous devez apporter des modifications à l'avenir, par exemple pour ajouter une nouvelle balise méta SEO, vous pouvez mettre à jour le type de contenu pour créer le champ nécessaire dans chaque élément pertinent de votre base de données.

Comment définir les exigences SEO

C'est une bonne pratique de définir les exigences SEO pour le CMS sans tête avant d'aller trop loin dans le développement, afin que vos développeurs sachent ce qu'ils doivent mettre en œuvre.

Certains éléments à considérer incluent :

  • Slug d'URL (qui peut être associé à un mot clé par page)
  • Métadonnées (par exemple balises 'title', 'description' et 'keywords')
  • Balise canonique (pour éviter les pénalités de contenu en double)
  • Balise Meta robots (pour empêcher le crawling indésirable des pages)

Vous pouvez également créer des champs pour certaines des méthodes les plus modernes et des vérifications spécifiques à un service qui aident à soutenir votre référencement :

  • Microdonnées, microformats et balisage Schema.org
  • Balises de vérification pour Google Analytics, Search Console et Bing Webmaster Tools
  • Balisage pour les aperçus des médias sociaux (par exemple, les cartes Twitter)

Encore une fois, tout cela influence la façon dont votre contenu est trouvé et comment il s'affiche sur différentes plates-formes - dans ce cas, des sites Web et des applications tiers - donc l'inclusion de ces champs vous aide à garder le contrôle de la façon dont les gens voient votre contenu, peu importe où ils trouvent ce.

De combien de types de contenu ai-je besoin ?

Décider du nombre de types de contenu à utiliser est l'une des grandes questions du passage à un CMS sans tête, et la réponse est que cela dépend de ce que vous essayez d'accomplir.

Pour de meilleures performances SEO, vous devez définir des champs qui couvrent chaque paramètre individuel. Par exemple, vous pouvez avoir un champ pour la balise meta robots follow/nofollow et un champ séparé pour robots index/noindex.

Limites et exigences

Les CMS sans tête comme Contentful vous permettent également de limiter le nombre de caractères dans les champs, de sorte que vous pouvez conserver les balises de titre et autres métadonnées dans un certain nombre de caractères.

Enfin, vous pouvez rendre les champs obligatoires et uniques. Ainsi, si les métadonnées sont répliquées à partir d'une autre page ou sont complètement absentes, l'éditeur recevra un message d'erreur et pourra apporter les corrections nécessaires.

Que vous le fassiez en utilisant plusieurs champs dans un seul type de contenu, ou que vous utilisiez des types de contenu distincts pour une flexibilité encore plus grande du côté du rendu, cela dépend en partie des fonctionnalités que vous souhaitez que vos données prennent en charge, et en partie d'un cas de préférence personnelle.

Mettre ensemble

Vous pouvez penser que c'est comme construire un puits à souhaits. Plus les briques sont grosses, plus la construction sera rapide et facile. Mais plus les briques sont petites, plus la forme circulaire sera parfaite.

Le "bon nombre" de types de contenu doit être un compromis intermédiaire qui vous convient le mieux, afin que vous puissiez créer le site Web que vous souhaitez, sans avoir l'impression de modifier chaque paragraphe, en-tête et balise méta individuellement.

Qu'en est-il de l'interface ?

Tout comme il existe plusieurs backends CMS sans tête courants, il existe également d'excellents frameworks frontaux parmi lesquels choisir.

Deux des meilleurs sont React et Vue, et ces cadres modernes ont, une fois de plus, été conçus pour fonctionner efficacement, charger rapidement le contenu et offrir la meilleure expérience utilisateur aux visiteurs de votre site Web.

N'oubliez pas de tenir compte des considérations techniques. Par exemple, le pré-rendu de votre contenu peut garantir qu'il est entièrement visible pour les robots des moteurs de recherche, qui pourraient ne pas être en mesure de "voir" le contenu s'il est rendu côté client à l'aide de JavaScript.

Considérations finales

Une fois votre CMS headless implémenté, assurez-vous de le faire auditer correctement par des développeurs Web réputés et en particulier par des experts en référencement, pour vous assurer que vous n'avez pas manqué une technicité qui pourrait affecter votre classement de recherche.

Un exemple assez courant avec les API est la prolifération d'URL dynamiques pour des éléments tels que les catégories de commerce électronique, les différentes tailles et couleurs d'un produit et la pagination des résultats.

En rendant toutes ces URL visibles pour les robots des moteurs de recherche, vous risquez de consommer leur budget d'exploration avant qu'ils ne trouvent le contenu d'URL statique le plus précieux sur votre site.

[Étude de cas] Gérer le bot crawling de Google

Avec plus de 26 000 références produits, 1001Pneus avait besoin d'un outil fiable pour suivre ses performances SEO et s'assurer que Google consacrait son budget de crawl aux bonnes catégories et pages. Apprenez à gérer avec succès le budget de crawl des sites e-commerce avec OnCrawl.
Lire l'étude de cas

Encouragez vos développeurs à implémenter des URL statiques dans la mesure du possible et utilisez les balises méta robots implémentées dans votre CMS sans tête pour bloquer l'accès des robots aux pages dynamiques indésirables.

Regarder vers l'avant

En tenant compte de tout ce qui précède, vous pouvez créer des bases de données de sites Web complexes et complètes qui peuvent servir des sites de bureau, des sites et des applications mobiles, des haut-parleurs intelligents, des robots de discussion IA, des écrans d'informations en magasin et bien d'autres types d'appareils via le Internet des objets.

Les futurs travaux de développement peuvent générer des mises à jour instantanées sur les nombreux appareils et plates-formes pour lesquels vous publiez des données, permettant un retour sur investissement plus rapide et plus positif de vos campagnes de référencement et de contenu.

Et tout comme la séparation du contenu et de la conception apportée par les feuilles de style en cascade (CSS) au début des années 2000, le CMS sans tête vous offre un moyen plus granulaire de définir, d'éditer et de rendre votre contenu - vous aidant à atteindre vos objectifs de référencement et de commerce électronique dans une manière plus gérée à mesure que vous construisez votre base de données au cours des mois et des années à venir.