Comment rendre Angular Universal SEO friendly ?

Depuis mon arrivé à BiiG en 2016, je travaille quotidiennement avec Angular, un framework JavaScript pour le développement de mes applications Web (J’ai d’ailleurs fait une petite initiation et un historique du framework sur le blog). Nous verrons ensemble pourquoi les web apps ne sont pas une solution idéale si tu souhaites avoir un référencement naturel efficace et comment y remédier.

De base, l’analyse des pages web d’une application par les crawlers est quasi impossible. Le fonctionnement d’un crawler est réparti en 2 étapes :

  • Le téléchargement de ta page
  • L’analyse du contenu

Si le rendu des pages est trop long, tu peux être certain que tes ressources JavaScript seront ignorées par les robots. L’incapacité du crawler à bien lire le contenu de ton application web entraînera une baisse de ton référencement naturel.

Depuis l’avènement des frameworks JavaScript tels que Backbone, EmberJS ou encore AngularJS, si tu en as entendu parler, les sites web comme nous les connaissons ont évolué vers une nouvelle entité : les Application Web Monopage (Single Page Application).
Cela consiste à garder l’utilisateur sur la même page HTML tout au long de sa visite et de le faire interagir sans temps de chargement de nouvelles pages. Tu auras compris précédemment que ces SPA font l’impasse sur le SEO, alors pourquoi donc les utiliser s’il est impossible de les faire référencer ?

 

Comment réconcilier les frameworks JavaScript et le référencement ?

La plupart des projets que je réalise dans mon agence sont des applications métiers qui n’ont pas vocation à être accessible au grand public. C’est pourquoi le référencement naturel n’est pas un critère primordial dans la conception de ces projets.

Je développe principalement avec Angular et c’est avec cet outil qu’avec mon équipe, nous avons expérimenté une solution pour remédier au problème majeure des « Single Page Application », le référencement. Depuis Angular 5, le framework ouvre la porte du rendu côté serveur (Server-Side Rendering). Un processus permettant la délégation de la construction complète de la page web au serveur avant de l’envoyer au client final, toi et ton navigateur.

 

Pour exemple, ci-dessous, deux corps HTML de la même page web, sans et avec le rendu côté serveur :

 

Code source sans rendu côté serveur

Code source avec rendu côté serveur

J’ai eu l’opportunité de mettre en production cette solution, nommée Angular Universal, pour la conception d’une webapp d’un client qui souhaitait dans un premier temps bénéficier des avantages d’un framework JavaScript et dans un second temps, effectuer un travail sur le référencement naturel. Ce choix de solution a été amené suite à une demande importante axée sur les réseaux sociaux. En effet, ces derniers utilisent également des robots pour analyser les pages web que tu souhaites partager pour en tirer des informations tels que le lien, le titre, une description et si possible un visuel qui attire l’oeil sur ta publication.

 

Comment ça marche ?

Angular Universal se base sur une structure NodeJS et Express pour pouvoir exécuter le rendu côté serveur. Sa configuration est un peu chronophage mais la documentation d’Angular sur le Server-Side Rendering est plutôt bien fournie et la solution se démocratise petit à petit, ce qui donne lieu à des tutoriels et de la documentation par des développeurs passionnés !

La petite difficulté d’Angular Universal, c’est qu’il nécessite une attention particulière lors du développement de ton application car nombreuses sont les erreurs que tu peux rencontrées lors de sa configuration. Certaines fonctionnalités que tu peux mettre en place pour le confort de ton visiteur ne pourront pas être exécutées par le robot qui recevra une erreur JavaScript, erreur qui peut interrompre le rendu de la page. Par exemple, si tu souhaites mettre une libraire JavaScript classique telle que scrollMagic, tu vas devoir prendre en compte dans ton développement qu’elle sera inutilisable et source d’erreur à la compilation serveur.

Rassure toi, si l’utilisation de tels outils est indispensable, il est toujours possible de conditionner l’exécution des lignes de codes faisant appel à ces librairies en dissociant le type de plateforme de rendu utilisée (client ou serveur).

Avec cette solution, tu sera dorénavant en mesure de produire des applications web, non seulement performantes mais également référencées comme un site traditionnel !  

 

Le point bonus

Avec 53% de visites mobiles abandonnées si le temps de chargement de la page excède les 3 secondes, le rendu côté serveur permet d’afficher plus rapidement la première page visitée car elle n’est que pure HTML. Ton navigateur a en fin de compte uniquement à lire le HTML et non interpréter le JavaScript pour le construire, un avantage certain pour les navigateurs installés sur des appareils d’entrée de gamme ou fatigués qui n’exécuteront pas ou mal le JavaScript.

Le référencement naturel avec un framework JavaScript
5 (100%) 6 vote[s]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Je veux Contribuer

C'est parti

Je suis un Professionnel

Voyons voir