4 minutes de lecture

Aujourd'hui, j'ai testé un framework Javascript pour le SEO

Sommaire

On le sait, WordPress propulse une grosse partie du web.1

WordPress is used by 61.8% of all the websites whose content management system we know. This is 43.5% of all websites

Le rĂ©cent craquage de Matt Mullenweg, son cofondateur, a Ă©tĂ© l’occasion pour moi de tester autre chose aprĂšs avoir installĂ©, dĂ©ployĂ©, mis Ă  jour des centaines de WordPress (le 1er doit dater de 2008 đŸ‘ŽđŸ»). Bref il Ă©tait temps.

Entendu nous, cela reste un outil robuste, trÚs versatile et encore bien adapté à plein de projets.

Ce qui m’intĂ©ressait est de voir comment les frameworks JS ont Ă©voluĂ©, sous l’aspect SEO et maintenance. Comme Googlebot a toujours Ă©tĂ© mauvais et/ou lent pour interprĂ©ter le JS, ces frameworks ont longtemps Ă©tĂ© boudĂ©s par les SEO.

Mes premiers projets nécessitait une étape de pré-rendering du HTML via des services externes (ce qui ajoutait des coûts ou de la complexité); ou les premiÚres versions ne le permettait simplement pas et on se retrouvait avec un site web qui ne ranke pas dans Google (et accessoirement des clients pas contents).

Ce qui est cool, c’est que maintenant les solutions existent.

SSR et SSG

DerriĂšre ces 2 acronymes se trouvent ce qui nous a manquĂ© aux dĂ©buts d’Angular, React et Vue.js pour ne citer que les plus connus.

SSR (Server-Side Rendering) : le framework va gĂ©nĂ©rer les pages HTML dynamiquement sur le serveur Ă  chaque requĂȘte utilisateur, en rĂ©cupĂ©rant les donnĂ©es nĂ©cessaires et en construisant la page avant de l’envoyer au navigateur. Nickel cĂŽtĂ© SEO car le HTML gĂ©nĂ©rĂ© est envoyĂ©, donc tout est lisible pour les robots des moteurs. L’inconvĂ©nient est que c’est un peu plus lourd (et passe la charge Ă  votre serveur)

SSG (Static Site Generation) : ici le framework va directement gĂ©nĂ©rer toutes les pages HTML au moment d’une Ă©tape de build, et crĂ©er un rĂ©pertoire de fichiers statiques (1 par page). Cela permet un site ultra rapide, un hĂ©bergement simplifiĂ©, au prix d’une flexibilitĂ© moindre puisqu’il faut lancer cette commande de build Ă  chaque mise Ă  jour. Si le contenu bouge peu, cela reste idĂ©al.

Tous les principaux framework proposent l’une ou l’autre de ces solutions (voire les 2).

Les principaux noms Ă  connaĂźtre :

  • NextJS (basĂ© sur React)
  • NuxtJs (basĂ© sur Vue)
  • Astro (qui motorise ce blog)
  • Svelte
  • Angular
  • Gatsby

Pour les sites de contenu pur, j’ai une prĂ©fĂ©rence pour le SSG car cela reste imbattable en termes de performances, et permet une surface d’attaque bien plus rĂ©duite (on n’expose que du HTML, pas de failles PHP ou d’injection SQL Ă  craindre).

Pour du ecommerce, Ă©videmment ce n’est pas la mĂȘme histoire, entre les stocks, les paniers persistants, comptes clients, 
 mais une approche hybride est possible.

Et les CMS headless dans tout ça ?

On a parlĂ© des frameworks front qui s’occupent de rendre les contenus, mais pas de leur gestion Ă  proprement parler.

C’est là qu’interviennent les CMS headless comme Contentfull, Prismic ou Strapi. Ce sera l’objet de mon prochain test

À l’inverse des CMS monolithiques comme WordPress ou Drupal, ou en SaaS (de wix Ă  webflow), le choix du CMS headless n’aura pas d’impact direct cĂŽtĂ© SEO, puisque c’est le framework front qui gĂšre le rendu HTML.


Footnotes

  1. Source W3Techs ↩