Fonctionnement et bonnes pratiques du SEO Javascript

visuel fonctionnement et bonnes pratiques du SEO Javascript

Un sujet bien technique comme on les aime, ça faisait longtemps que je n’en avais pas traité. L’utilisation du Javascript pour le SEO est un véritable défi, dont les notions sont probablement encore plus dures à comprendre en tant que néophytes. Aujourd’hui, je vais essayer de vulgariser les contraintes et enjeux de ce langage de programmation pour le référencement naturel.

 

Qu’est-ce que le Javascript ?

Souvent abrégé « JS« , il s’agit d’un langage de programmation favorisant l’interactivité avec la page. Ce langage peut se baser sur différents frameworks (bibliothèques de ressources fonctionnelles). Il en existe 3 principaux :

  • Angular (le plus populaire)
  • Vue
  • React

A la différence du HTML et CSS qui sont statiques, Javascript offre la possibilité de dynamiser la page, voire de l’animer. En termes d’expérience utilisateur, il est possible d’apporter une valeur ajoutée importante en programment avec du JS.

 

En quoi le JS est traité différemment pour le SEO ?

Processus de crawl

Je vais essayer de simplifier ça au maximum. D’une manière générale, Google traite l’exploration, l’indexation et le positionnement des pages de votre site web comme ceci :

 

processus de google pour son exploration, indexation et positionnement

 

Et comment ça se passe selon le langage utilisé ?

Pour les pages HTML :

  1. Les googlebots récupèrent le document HTML de la page, avant d’en extraire le contenu et les liens
  2. Il récupère ensuite le document CSS et le combine avec le HTML
  3. Puis Google décide d’indexer la page ou non

Tandis que pour les pages en JS :

  1. Récupération du document HTML de la page, mais impossible de récupérer le contenu et les liens
  2. Il télécharge alors les documents CSS et Js
  3. Les googlebots font alors appel à Google WRS (Web Rendering Service) pour compiler ces informations
  4. Google WRS exécute le javascript, et en compilant le tout obtient son rendu
  5. Maintenant que Google a un rendu complet de la page… Il peut ajouter les liens qu’il découvre à crawler dans sa file d’attente d’exploration

Et ce process de crawl Javascript prend… Plusieurs heures à plusieurs jours. J’espère que vous êtes patient.

 

meme des étapes pour crawler un site en HTML/CSS versus des pages en Javascript

Vous n’y comprenez rien ? Retenez simplement que découvrir et crawler des pages en Javascript est plus fastidieux en termes de process.

 

Temps de crawl

Allons au concret, crawler du Javascript prend 9 fois plus de temps que crawler du HTML/CSS. Et qui dit plus de temps, dit aussi plus de ressources consommées.

 

graphique du temps pris par Google pour crawler du Javascript versus du HTMLSource (d’ailleurs très intéressante) : https://www.onely.com/blog/google-needs-9x-more-time-to-crawl-js-than-html/

 

Si vous faites un site internet optimisé SEO en Javascript, je vous recommande d’optimiser au maximum votre Budget Crawl derrière. Pour expliquer cette notion simplement, quand un moteur de recherche vient sur votre site, il attribue des ressources à l’exploration de vos pages. Dans le cas de Google, plus il a confiance en votre site, plus ce dernier est reconnu et consulté, plus le géant Américain investira des ressources pour explorer plus régulièrement et davantage en profondeur votre site.

 

Comment vérifier si son code Javascript est SEO-Friendly ?

La commande cache: pour une page déjà indexée

Pratique si la page est indexée et disponible en cache sur les serveurs de Google. Il vous suffit simplement de rentrer la commande cache: avant votre URL, un tableau de bord de Google devrait apparaître. Ensuite sélectionnez « lecture seule », et vous aurez le rendu HTML tel qu’obtenu par Google.

 

La version en cache actuelle de https://hugodomeur.com/.

 

Et là, ce sera le jeu des différences : si vous voyez du contenu visible et/ou cliquable visuellement sur votre page, mais non sur la version en cache enregistrée (sous réserve que la dernière version de votre page ait été prise en compte), c’est que ces éléments n’ont pas été pris en compte par le moteur de recherche. Dans ce cas, sautez quelques lignes et rendez-vous dans le h2 dédié aux bonnes pratiques du SEO et Javascript.

Désactiver le Javascript sur la page avec une extension

L’objectif ici est de voir le contenu de la page comme le verrait un bot de moteur de recherche lors de sa 1ère visite. Personnellement, je vous recommande l’extension Web Developer (décidément cet add-on sert à tout). Il vous suffira simplement d’aller dans l’onglet « Disable » et de cocher « Disable Javascript ».

 

page web du site sephora avec javascript désactivé

Capture d’écran de la version sans javascript du site Sephora, entièrement développé en JS. Tout est en ordre, faites également le test de votre côté.

 

Ici, on peut voir que le contenu de la page est le même que dans la version avec Javascript. Les liens sont cliquables, le texte visible.

Par contre, si vous testez ça sur un de vos sites (ou sur celui d’un client), et que vous ne voyez que du blanc, il y a de fortes chances que Google ne puisse pas explorer correctement la page, provoquant des problèmes d’indexation majeurs. Dans ce cas, voyez pour changer de solution de rendering (j’en parle également dans la partie bonnes pratiques Javascript SEO).

 

Est-ce que le JS peut avoir des avantages pour le référencement naturel ?

On a vu que le Javascript est un vrai défi pour le SEO, mais pour autant est-ce qu’il peut apporter du positif si bien utilisé ? Eh bien la réponse est oui.

  • Le Javascript permet d’animer la page, coder des programmes comme des simulateurs, et autres éléments intéressants en termes d’UX et de SXO. Un utilisateur qui reste sur la page, trouve ce dont il a besoin et ne va pas chez les concurrents envoie des signaux positifs à Google, ce qui permet d’améliorer indirectement son positionnement.
  • C’est également un langage de référence pour les e-commerces, capable d’afficher des produits dynamiquement grâce aux filtres et paramétrages. Une bonne opportunité d’aller chercher des requêtes SEO longues traînes facilement grâce à l’indexation d’URLs dynamiques, si cette dernière notion est bien gérée.

Ce dernier point peut aussi être réalisé et implémenté sur-mesure à partir d’un CMS codé en PHP, comme WordPress.

 

Les bonnes pratiques de référencement JS

Choisir une solution de rendering adaptée

Et là, c’est le moment où je vous perds… Pourtant c’est le plus important. Bon je vais essayer de vulgariser au maximum, même si de mon côté j’ai dû relire mes sources plusieurs fois avant d’y comprendre quelque chose.

La solution de rendering détermine comment est délivré le contenu. Par exemple, dans le cas du CSR (Client-side Rendering), vous donnez les documents au navigateur de l’utilisateur, et il se débrouille pour assembler tout ça et afficher un résultat cohérent. Par contre, dans le cas du SSR (Server-side Rendering), vous donnez les éléments à votre serveur qui s’occupe de tout mettre en forme de son côté, et afficher le résultat déjà construit dès qu’un humain / robot vient sur le site.

La 2nde solution vous paraît plus simple ? En réalité, côté utilisateur, les 2 marchent aussi bien l’une que l’autre. Par contre, côté robot, oui, utiliser une solution de rendering SSR est bien plus pratique pour son crawl. Car au final le document HTML d’une page Javascript sans SSR est tout simplement… vide. Donc non exploitable.

Proposer un code accessible aussi bien aux utilisateurs qu’aux moteurs de recherche

La base de la base, si vos utilisateurs ne voient pas le contenu de votre site web, ça va être difficile de les convertir (et le taux de rebond fort devrait vous faire perdre quelques précieuses positions). Mais saviez-vous que même si votre interface est bien visible pour les utilisateurs, Google peut en résulter une vision différente ?

Pour que Google crawle (visite) la page et son contenu dans son entièreté, l’idée est d’indiquer votre code dans des fichiers externes au détriment d’inclure des balises <script>.

Utiliser la balise noscript à bon escient

Ce que cherche Google avant tout, c’est le contenu et ses liens. Et ça tombe bien car c’est précisément ce que la balise noscript donne : cet attribut offre la possibilité d’afficher une page dans le cas où elle ne pourrait pas être accessible avec son Javascript.

Sauf que… cette balise était la porte des SEO Black-Hat en 2014 et avant. L’idée était simple : faire un beau site en javascript pour les utilisateurs, et bourrer la balise noscript de blabla SEO destiné pour les moteurs de recherche. Eh oui : le Cloaking dans toute sa splendeur. Cette pratique étant pénalisée assez ardument, si vous utilisez cet attribut, reprenez bien le contenu de la page sans ajouter de fantaisies.

Insérer ses liens avec l’attribut <a href= » »>

Un lien hypertexte, ou même une redirection, en Javascript sans l’attribut <a> ne peut pas être reconnu par les robots des moteurs de recherche. Et qui dit liens non explorables, dit pages orphelines à foison.

Pire que ça, dans le cas d’articles de blog, les robots ne pourront pas explorer les anciens articles si la pagination se déclenche au clic de l’utilisateur. De même pour les menus accordéon, attention à ce que leur contenu soit bien accessible aux robots sans clic nécessaire. Je mentionne cet exemple particulier car j’ai déjà eu ce problème sur un site client…

Eviter les # dans les URLs

Selon Google, tout ce qui suit des # dans une URL est non pertinent. John Mueller explique même que les Googlebots auront tendance à ignorer le contenu incorporé dans ces cas précis :

 

 

Tester et retester

Une fois qu’on a pris en compte toutes ces recommandations, on teste la page sans Javascript. On l’avait vu plus haut dans l’article, le rendu doit avoir le même contenu et être navigable (notamment et surtout au niveau des liens) comme sur la version du site avec Javascript. Sortir une page sans l’avoir testée, d’autant plus si c’est lors d’une refonte, est le meilleur moyen pour perdre son positionnement (et mettre un bon bout de temps à le récupérer une fois l’erreur pointée du doigt).

 

Conclusion

Je pense que c’est la première fois que j’en apprends plus sur un sujet en l’écrivant plutôt qu’après avoir travaillé dessus. N’étant pas développeur de métier, je sors de cette rédaction avec de bons maux de tête, mais espère avoir pu vulgariser au maximum le principe pour vous éviter ça.

Pour finir, je vais citer l’article de WeGrowth en tant que principale source d’inspiration (il faut rendre à César ce qui est à César), mais aussi en tant qu’article complémentaire si vous souhaitez vous pencher davantage sur le SEO Javascript : https://www.wegrowth.io/seo-referencement-naturel/javascript-seo.

 

Laisser un commentaire

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

J’accepte les conditions et la politique de confidentialité

div#stuning-header .dfd-stuning-header-bg-container {background-size: initial;background-position: top center;background-attachment: initial;background-repeat: initial;}#stuning-header div.page-title-inner {min-height: 650px;}