Sans prise de dispositions, un site ou we web app JS est plus moins bien indexé par les moteurs de recherche. En fonction du contexte applicatif, des solutions existent optimiser le SEO. Résumé.

Si Google indexe désormais les webapps JS (cf l’article de Erik Hendriks et Michael Xu sur le blog Google, ce n’est pas encore le cas de Bing et des autres moteurs de recherche. Si en France Google est utilisé par 90% des internautes, il l’est seulement 67% aux U.S.

Les techniques abordées ici conservent leur intérêt pédagogique et ont le mérite de proposer de bonnes pratiques.

##Frameworks MVC et snapshots HTML

• Mécanique :
  • Une web app JS (basée sur un framework MVC) est une application JS qui génère le HTML dans le navigateur
  • Du point de vue de Google, qui n’execute pas le JS, les pages téléchargées sont vides (à l’exception du bootsrap du framework MVC)
  • Le principe est de pré-rendre les différentes pages du site par un navigateur headless sur le serveur et de stocker sur le disque ces “snapshots” HTML
  • Quand Google demande une page, le serveur lui donnera un snapshot déjà rendu plutôt que la web app
• Avantages :
  • Aucun rendu côté serveur
  • Compatible hashbangd et pushState
• Inconvénients :
  • Mécanique de snapshots à mettre en place (simplifiée utilisation de prerender.io)
• Resources :
  • Méanique de génération de snapshots + angular JS : article concis
  • Méanique de génération de snapshots + angular JS : article plus détaillé
  • prerender.io ou brombone.com : solutions de rendering, caching et hostings de snapshots HTML
  • Doc Google

##Progressive enhancement

• Mécanique :
  • En progressive enhancement, le serveur sait générer le HTML de chaque page
  • Le JS prend ensuite le relai côté navigateur pour améliorier ou ajaxifier le site
  • Techiquement, par exemple les liens peuvent être hijackés pour ne pas demander les pages complètes au serveur, mais des portions
• Avantages :
  • SEO natif
  • La web app (ou plutôt le site) fonctionne nativement en mode dégradé sur des navigateurs sans JS (e-readers, vieux IEs)
• Inconvénients :
  • Le serveur doit savoir rendre toutes les pages
  • Si framework MVC, il doit savoir prendre le relais sur du contenu déjà rendu
• Resources :
  • Pushstate et progressive enhancement : bon article qui justifie l’implémentation du progressive enhancement au cours d’une webapp ou spa
  • progressive enhancement et backbone : exemple de progressive enhancement avec un framework MVC JS
  • https://github.com/defunkt/jquery-pjax : implémentation de progresssive enhancement simplifié

##Conclusions Google se charge maintenant du snapshoting des sites et web apps JS, mais n’est pas le seul moteur de recherche utilisé dans le monde

Dans le cas d’une web app très fonctionnelle, les frameworks MVC comme backbone ou angular sont le meilleur ami du développeur. Si des besoins de SEO sont présents, le snapshoting est la bonne solution.

Dans le cas d’un site web orienté contenus, le progressive enhancement n’est finalement qu’une théorisation des pratiques classiques. Le progressive enhancement couplé à des frameworks MVC parait quant à lui assez lourd.