Angular et SEO : Pourquoi éviter le framework JS

Angular et SEO : Pourquoi éviter le framework JS
4.8 (95%) 4 votes

Il y a quelque temps, j’ai développé un système de stats pour la société dans laquelle je travaille (https://todaycycling.com/statistiques/). Enfin bref, j’ai tout d’abord commencé à développer le projet sous Angular 5.

Le projet en lui-même

Ce qui m’a fait partir sur un framework front et notamment Angular, c’est que le développement devait être fait uniquement sur la partie front du site. Le développeur précédent avait pris le soin de séparer la partie backoffice de la partie frontoffice, pour mon plus grand plaisir !

Le système de stats contenait déjà toutes les données, tout ce que j’avais à faire c’était :

  1. Créer des requêtes SQL pour récupérer les infos ;
  2. Créer les webservices pour récupérer les données de ces requêtes côté client ;
  3. Les afficher sur la page grâce à Angular et notamment Angular Material.

Concernant la partie SEO, j’avais déjà eu de bons échos en termes de performances sur Angular Universal (il précharge la page côté serveur et rend le HTML correspondant, ceci évitant de donner au navigateur le JS à parser et à Google une grosse ligne de fichier JS à interpréter).

Le crawl de Google, et le rendu Angular Universal

Angular Universal permet donc au crawler de Google ou d’un autre moteur de recherche, de venir directement lire le code HTML ; au lieu de se retrouver avec un fichier JS à interpréter.

Depuis la console pour webmaster de Google, j’ai testé le crawl de Google pour savoir comment la page apparaissait.

Google Webmaster Tool SEO affichage de la page

Google rendering sur l’affichage de la page avec Angular, Angular Materiel et Angular Universal

La page apparaît vide, Google n’affiche pas les données contenues dans la page.

Google Webmaster Tool code HTML

Code HTML crawlé par Google avec Angular Universal

Quand on regarde le code récupéré par Google, on constate pourtant que le code HTML contenant l’affichage de la page est bien téléchargé. Google n’interprète donc pas correctement le code contenu dans la page. Angular Universal fonctionne correctement en rendant un code HTML contenant les infos, mais Google n’arrive vraisemblablement pas à les lire.

Conclusion, que penser du SEO sur Angular ?

Cela fait des années que l’on nous dit que Google comprend parfaitement le code des pages Javascripts, et que les frameworks modernes s’intègrent bien dans l’écosystème SEO. Cependant, on nous dit également qu’il faut faciliter le travail de Google en diminuant les efforts qu’il devrait faire pour récupérer les infos sur notre page.

Est-ce que la console Google Webmaster Tool doit être interprété comme tel ? Angular Universal serait donc « mauvais » pour le SEO ? On en saura peut-être plus avec la nouvelle version de la Search Console qui tarde à venir…

Je ne sais pas pour ma part si le Javascript est un problème pour le SEO, en revanche c’est la crainte qui m’a fait me tourner vers un langage front « sans Javascript » (en utilisant PHP renderer avec Slim). Autre chose, le code HTML généré par Angular n’était pas valide W3C car le Shadow Dom d’Angular ajoute des attributs dans les balises HTML comme « ngcontent-c25 ». Tout ceci mis bout à bout, j’ai préféré écarter Angular par précaution.

Qu’en pensent les experts SEO ?

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.