Être SEO-compliant avec Angular pour les néophytes

Développer un site internet Angular SEO-Friendly n’est pas toujours une mince affaire. Le but de cet article est de vous donner un aperçu des problèmes et solutions pour réussir cette étape à travers l’histoire qui suit.

Comment naquit le SEO devenu sacré

Tout commença par une chaude matinée de printemps dans les années 90, la cassette audio était à la mode et internet en était à ces balbutiements. A l’époque, le premier site internet était lancé, et d’autres sites suivirent. Comme dans une grande bibliothèque, le besoin de se retrouver dans tout ce bazar se fit vite sentir, et la solution qui émergea fut les moteurs de recherche. Pour être trouvable sur des mots clefs et compréhensible par ces moteurs de recherches, le site a besoin d’être structuré et organisé. C’est la base du SEO (Search Engine Optimisation, optimisation pour les moteurs de recherches). Après des années d’évolutions du web et une certaine dominance de Google à partir des années 2000, le SEO est devenu vital pour les sites internet en recherche d’audience. En 2009, avec l’arrivée du framework AngularJS (puis en 2016 Angular), une technologie qui permet un rendu plus dynamique des pages web, il est devenu plus facile de générer du contenu coté client. C’est-à-dire que l’organisation du contenu visuel est générée dans le navigateur internet du visiteur.  

Comment Angular entre en jeu

Après cette introduction nous voici donc en 2020, à essayer de faire en sort que son site Angular soit visible sur Google et autres moteurs de recherche. Jusque-là, tout va bien, vous avez fait un super site, il est beau et dynamique. Plein de joie, vous le mettez en ligne et là... c’est le drame : sur le moteur de recherche, votre site ressort avec plein de {{ title }} et autres {{ }}. Un peu d’explication s'impose sur ce qui vient de se passer. Le moteur de recherche est en fait un serveur, un robot qui va explorer le site internet et parcourir le HTML. Il n’est pas un navigateur internet et ne comprend donc pas le Javascript ; il ne va pas générer le contenu (partie client). Ne perdons pas espoir, sur ce, vous allez demander à un expert SEO comment faire, et là il vous dira peut-être : « Le principe de single page et la techno utilisée rend impossible toute intervention SEO. On ne peut pas faire un site Angular SEO-friendly aujourd'hui. »

 

 

Après avoir cherché des tutos pour se reconvertir en éleveur de chèvres dans le Larzac, vous tombez par hasard sur la documentation Angular où on vous parle de SSR (server-side rendering) avec Angular Universal. Ça tombe bien, vous avez le vertige et aller chercher des caprins dans des arbres, ce n’est pas votre truc. Génial, mais c’est quoi au juste ? Angular Universal est une extension d’Angular qui permet un rendu côté serveur, donc avec ceci votre serveur peut générer les pages du site et les servir déjà prêtes à être lues. Le moteur de recherche n’a plus besoin de comprendre le Javascript, vous le faites pour lui.

 

 

 

 

Pour la suite cela devient beaucoup plus technique. Si on part de zéro avec le projet exemple Angular Universal et NodeJS, ça se passe bien, mais si on l’intègre à un projet déjà existant, c’est une autre paire de manches.  

Google et Angular, ennemis ?

La question que tout le monde se pose est : « Mais pourquoi la technologie de Google (Angular) ne marche pas facilement avec le moteur de recherche Google ? ». Pour faire simple, c’est plus cher (même pour Google) et plus lent. Les robots de Google comprennent un peu le Javascript  ; ils ont fait de gros effort ces dernières années pour le comprendre, notamment en faisant un deuxième passage sur votre site en utilisant Chromium headless (navigateur sans tête).

 

 

Pour les sites simples, cela peut être suffisant et plus simple de laisser les robots comprendre le Javascript sans server-side rendering. Malgré tout, si vous voulez être aussi indexé par les moteurs de recherches concurrents qui n’ont pas les ressources de Google (Bing, Yahoo, Baidu, DuckDuckGo, Ecosia, Qwant...) le server-side rendering reste indispensable.