JavaScript SEO :

Les meilleures pratiques pour les débutants

JavaScript SEO: les meilleures pratiques pour les débutants en bref

Si votre site Web repose fortement sur le JavaScript rendu côté client, les moteurs de recherche ont du mal à l’explorer et à l’indexer efficacement. Dans la plupart des cas, cela signifie que votre site ne sera pas bien classé.

Découvrez comment Google gère les sites JavaScript et quelles sont les meilleures pratiques que vous pouvez appliquer pour que votre site JavaScript fonctionne aussi bien que tout autre site !

Table des matières

• Qu’est-ce que le référencement JavaScript ?
• Qu’est-ce que Javascript?
• Pourquoi le Javascript SEO est important ?
• Quel est l’impact de JavaScript sur vos performances SEO ?
• Comment Google gère-t-il les sites JavaScript ?
• Meilleures pratiques
• Options de rendu
• Comment vérifier à quoi ressemblent des pages rendues ?
• Budget de rendu
• Qu’en est-il des robots d’exploration des médias sociaux?
• Questions Fréquemment Posées

Qu’est-ce que le référencement JavaScript ?

Le référencement JavaScript englobe tout ce qu’il faut faire pour qu’un site Web basé sur JavaScript soit performant dans les moteurs de recherche.

Il s’agit d’une spécialisation au sein du référencement technique.

Qu’est-ce que JavaScript ?

Heureux que vous ayez posé la question ! JavaScript est un langage de programmation pour le web qui s’exécute localement dans votre navigateur. Il est utilisé pour donner vie aux pages web.

Par exemple, il permet d’envoyer des notifications, de personnaliser les sites web, d’intégrer automatiquement des mises à jour de contenu ou de charger du nouveau contenu lorsque vous atteignez presque le bas d’une page.

Vos sites web les plus visités dépendent fortement de JavaScript pour fonctionner !

Twitter, Facebook, Instagram, YouTube, Netflix – tous utilisent JavaScript.

Et il est très peu probable que votre propre site n’utilise pas JavaScript. Il est partout, et il n’est pas près de disparaître. L’adoption de JavaScript ne fera que croître.

Dans une enquête réalisée en 2019, 67,8 % des développeurs ont déclaré utiliser JavaScript.

GitHub confirme sa popularité et montre qu’il a toujours été le langage de programmation le plus populaire depuis plusieurs années consécutives.

Pourquoi le Javascript SEO est important ?

Les développeurs vous diront que JavaScript est extraordinaire et s’extasieront sur AngularJS, Vue, Backbone ou React. Ils sont amoureux de JavaScript parce qu’il leur permet de créer des pages web hautement interactives que les gens adorent.

Les référenceurs vous diront que JavaScript est souvent horrible pour vos performances de référencement, et ils iront même jusqu’à dire que JavaScript est une sécurité d’emploi pour eux tout en sortant rapidement des graphiques montrant une forte baisse du trafic organique après qu’un site ait commencé à s’appuyer sur le rendu côté client.

Les deux ont raison.

En même temps, lorsque les développeurs et les spécialistes du référencement travaillent ensemble de manière productive, ils peuvent obtenir d’excellents résultats.

Lorsqu’ils s’attachent à créer la meilleure expérience possible pour les visiteurs et les moteurs de recherche, même les sites web reposant sur JavaScript peuvent obtenir de très bons résultats dans les moteurs de recherche.

Pour qu’un site web utilisant JavaScript obtienne de bons résultats, il est absolument essentiel que les moteurs de recherche soient en mesure de comprendre pleinement le contenu de vos pages et vos directives d’exploration et d’indexation dès la réponse HTML initiale.

Astuces Graines de Référenceur

En fin de compte, tous les problèmes de référencement que rencontrent les sites web utilisant JavaScript proviennent du fait qu’il s’agit d’un outil inadapté.

Les frameworks JavaScript sont parfaits pour construire des applications web. Cependant, les applications web ne sont pas des sites web.

C’est cette inadéquation fondamentale entre la fonction des cadres JavaScript et celle des sites web qui est à l’origine de la quasi-totalité des frictions entre les moteurs de recherche et les sites JavaScript.

il existe maintenant toute une génération de développeurs qui cherchent instinctivement une solution JavaScript à n’importe quel problème, alors que souvent ces problèmes sont mieux résolus avec le bon vieux HTML et le CSS.

Tant que nous n’aurons pas comblé ce fossé, JavaScript continuera à être un problème pour le référencement, et vice versa.

Mais ne dérange pas outre mesure : il est possible de gagner beaucoup d’argent grâce à des sites web JavaScript construits par des développeurs qui, tardivement, prennent le référencement au sérieux et se rendent compte qu’ils n’ont pas les connaissances fondamentales pour le faire.

Quel est l’impact de JavaScript sur vos performances en matière de référencement ?

Les pages web qui s’appuient fortement sur JavaScript sont indexées lentement.

Avant d’expliquer pourquoi, nous devons d’abord expliquer comment fonctionnent les requêtes HTTP et comment JavaScript affecte les pages web.

Comment fonctionnent les requêtes HTTP?

Lorsque vous naviguez vers une URL, votre navigateur demande le contenu de l’URL au serveur. Si la demande a abouti, le serveur répond en envoyant le document HTML correspondant à l’URL.

Ce document HTML contient le texte, ainsi que des références à des fichiers externes tels que des images, des feuilles de style CSS et du JavaScript, s’ils sont présents. Si c’est le cas, votre navigateur crée des requêtes supplémentaires et distinctes pour ces fichiers également.

Comment JavaScript affecte les pages web?

C’est à ce moment que l’exécution de JavaScript entre en jeu!

L’étape suivante consiste, pour votre navigateur, à construire le DOM et à commencer le rendu de la page web. Une partie de ce processus consiste à exécuter le code JavaScript qui modifie le DOM.

Il peut s’agir de petites modifications (par exemple, le chargement d’un chat d’assistance) ou de grandes (par exemple, le chargement de tout le contenu de la page).

La page apparaît dans votre navigateur et vous pouvez interagir avec elle. Mais le rendu JavaScript qui modifie fortement le DOM peut ajouter des secondes au temps nécessaire pour que la page devienne interactive pour les visiteurs.

Nous appelons ces modifications du DOM « rendu côté client » (« CSR » en abrégé), c’est-à-dire le rendu JavaScript effectué du côté client, en l’occurrence votre navigateur.

Le rendu JavaScript peut être lent pour diverses raisons, comme par exemple une grande quantité de contenu à extraire, de nombreuses requêtes supplémentaires à effectuer et un code inefficace.

De nombreux thèmes WordPress, par exemple, sont terriblement chargés en JavaScript parce qu’ils chargent de nombreuses bibliothèques JavaScript, souvent inutiles.

Lighthouse de Google va même jusqu’à proposer des bibliothèques JavaScript alternatives.

Astuces Graines de Référenceur

Nous avons vu différents sites clients qui utilisaient JavaScript non seulement pour implémenter mais aussi pour modifier les métadonnées de certaines pages, ainsi que les balises canoniques et les éléments de navigation principaux.

Il s’agissait de sites web de grande taille, avec des millions d’URL, qui souffraient également de problèmes de vitesse avec des temps de rendu non triviaux (partiellement causés par l’utilisation importante de JavaScript).

Bien que, dans certains cas, des changements non triviaux aient dû être apportés aux plateformes, il était clair que la manière dont JavaScript était utilisé était inutile et nuisait à la capacité du site d’être entièrement et régulièrement exploré et indexé.

En fin de compte, cela conduisait à une mauvaise expérience de la page en raison des temps de chargement plus élevés, et il fallait y remédier.

Lorsque les changements ont commencé à être apportés, les performances du site en matière d’exploration, d’indexation et de vitesse ont été réellement perceptibles.

Astuces Graines de Référenceur

Au cours des dernières années, le référencement JavaScript est devenu très compliqué. Il ne s’agit plus seulement du rendu côté client, du rendu côté serveur ou du pré-rendu.

Il est désormais crucial de comprendre précisément comment et où JavaScript est utilisé dans la mise en page de votre site.

En fin de compte, JavaScript a un coût. Il y a de plus en plus de composants qui s’ajoutent au coût global du code de votre site web.

Cela va des limitations de l’unité centrale sur les appareils mobiles, qui affectent directement les Signaux Web essentiels de votre site web, à un JavaScript non optimisé qui cause des problèmes d’indexation de votre site web dans les moteurs de recherche, en passant par les goulets d’étranglement du service de rendu web et de l’horloge virtuelle.

En bref, JavaScript est fantastique. Assurez-vous simplement d’avoir un expert en référencement JavaScript à vos côtés lorsque vous concevez votre nouvelle expérience web flashy.

Qu’est-ce que le DOM ?

Le DOM est une représentation orientée objet d’une page web, qui peut être modifiée à l’aide d’un langage de programmation tel que JavaScript.

DOM signifie Document Object Model :

Document : Ceci est la page Web.

Objet : chaque élément de la page Web (par exemple <head></head>, <body></body>, <title></title>, <h1></h1> et <p></p>).

Modèle : décrit la hiérarchie au sein du document (par exemple, <title></title> va dans le <head></head>).

Les problèmes que cela pose

S’il faut plusieurs secondes à votre navigateur pour afficher la page web dans son intégralité et si la source de la page ne contient pas beaucoup de contenu, comment les moteurs de recherche pourront-ils déterminer le sujet de cette page ?

Ils devront rendre la page, comme votre navigateur vient de le faire, mais sans avoir à l’afficher sur un écran. Les moteurs de recherche utilisent ce que l’on appelle un « navigateur sans tête ».

Comparé au simple téléchargement de HTML, le rendu de JavaScript est très gourmand en ressources (100 fois plus). C’est pourquoi les moteurs de recherche n’affichent pas toutes les pages qu’ils rencontrent.

En juillet 2016, Google a déclaré avoir trouvé plus de 130.000 milliards de documents, et on peut dire sans risque de se tromper que depuis lors, ce nombre de documents a considérablement augmenté.

Google n’a tout simplement pas la capacité de rendre toutes ces pages. Il n’a même pas la capacité de parcourir toutes ces pages. C’est la raison pour laquelle chaque site web dispose d’un crawl budget qui lui est attribué.

Les sites web disposent également d’un budget de rendu. Cela permet à Google de hiérarchiser ses efforts en matière de rendu, ce qui signifie qu’il peut consacrer plus de temps au rendu des pages que les visiteurs sont censés rechercher plus souvent.

De ce fait, les pages web JavaScript à forte dépendance sont indexées beaucoup plus lentement que les pages HTML « normales ». Or, si vos pages web ne sont pas indexées, elles ne peuvent pas être classées et vous n’obtiendrez pas de trafic organique.

Remarque : nous continuons à parler de « moteurs de recherche », mais à partir de maintenant, nous nous concentrerons sur Google (la part de marché des autres moteurs de recherche est beaucoup plus faible que celle de Google).

Comment Google traite-t-il les sites JavaScript ?

L’illustration ci-dessus explique de manière conceptuelle les processus de Google, de l’exploration au classement. Elle a été grandement simplifiée ; en réalité, des milliers de sous-processus sont impliqués.

Nous allons expliquer chaque étape du processus :

1. Crawl Queue/file d’attente du crawl : Elle garde la trace de chaque URL qui doit être explorée et est mise à jour en permanence.

2. Crawler : Lorsque le robot d’exploration (« Googlebot ») reçoit des URL de la file d’attente, il en demande le code HTML.

3. Processing/Traitement : Le code HTML est analysé et

a) les URL trouvés sont transmis à la file d’attente Crawl pour l’exploration.

b) Le besoin d’indexation est évalué – par exemple, si le code HTML contient une méta robots noindex, il ne sera pas indexé (et ne sera pas rendu non plus !). Le HTML sera également vérifié pour tout contenu nouveau ou modifié. Si le contenu n’a pas changé, l’index n’est pas mis à jour.

c) La nécessité d’un rendu est évaluée en fonction de la dépendance de la page à l’égard de JavaScript. Les URL qui nécessitent un rendu sont ajoutées à la file d’attente du rendu. Notez que Google peut déjà utiliser la réponse HTML initiale alors que le rendu est toujours en cours.

d) Les URL sont canonisées (notez que cela va au-delà de l’élément de lien canonique ; d’autres signaux de canonisation, tels que les sitemaps XML et les liens internes, sont également pris en compte).

4. Render Queue/File d’attente de rendu : Elle garde la trace de toutes les URL qui doivent être rendues et, comme la Crawl Queue, elle est mise à jour en permanence.

5. Renderer/Rendu : Lorsque le moteur de rendu (Web Rendering Services, ou « WRS » en abrégé) reçoit des URL, il les rend et renvoie le code HTML rendu pour traitement. Les étapes 3a, 3b et 3d sont répétées, mais en utilisant le HTML rendu.

6. Index : Il analyse le contenu pour en déterminer la pertinence, les données structurées et les liens, et (re)calcule le PageRank et la mise en page.

7. Ranking/Classement : L’algorithme de classement utilise les informations de l’index pour fournir aux utilisateurs de Google les résultats les plus pertinents.

Ainsi, pour que Google comprenne une page web basée sur JavaScript, il doit passer par la phase de rendu complète, au lieu de pouvoir directement

1. Transférer les URL qui doivent être explorées vers la file d’attente d’exploration (Crawl Queue) et

2. transmettre les informations qui doivent être indexées à la phase d’indexation. Cela rend l’ensemble du processus d’exploration et d’indexation très inefficace et lent.

Imaginez que vous ayez un site de 50.000 pages et que Google doive faire un double passage et rendre toutes ces pages.

Cela ne va pas très bien et cela a un impact négatif sur les performances de votre référencement : il faudra une éternité pour que votre contenu commence à générer du trafic organique et à produire un retour sur investissement.

Mais rassurez-vous, en poursuivant votre lecture, vous apprendrez comment résoudre ce problème.

Astuces Graines de Référenceur

Ne bloquez pas les fichiers CSS et JavaScript pour essayer de préserver le crawl budget, car cela empêche les moteurs de recherche de rendre vos pages – ce qui entraîne une mauvaise compréhension de vos pages par les moteurs de recherche et, inévitablement, de mauvaises performances en matière de référencement.

Meilleures pratiques

Éviter aux moteurs de recherche de devoir rendre vos pages

Sur la base de la réponse HTML initiale, les moteurs de recherche doivent être en mesure de comprendre pleinement le contenu de vos pages et vos règles d’exploration et d’indexation. S’ils n’y parviennent pas, vous aurez du mal à classer vos pages de manière compétitive.

Astuces Garines de Référenceur

Même si Google améliore le rendu de JavaScript, il ne faut pas s’y fier. N’oubliez pas que le rendu de JavaScript par « un navigateur sans tête » est beaucoup plus gourmand en ressources pour Google que la simple analyse du code HTML.

Si vous utilisez JavaScript sur votre site web, assurez-vous que votre contenu, vos images et vos liens sont affichés même si JavaScript est désactivé.

Inclure le contenu essentiel dans la réponse HTML initiale

Si vous ne pouvez pas empêcher que vos pages soient rendues par les moteurs de recherche, assurez-vous au moins que le contenu essentiel, tel que le titre et les éléments méta qui se trouvent dans la section <head> de votre HTML, et le contenu important du corps de page soient chargés par JavaScript.

Ils doivent être inclus dans la réponse HTML initiale. Cela permet à Google d’avoir une bonne première impression de votre page.

Contenu à onglets

Veuillez noter que cela s’applique également au contenu sous forme d’onglets.

Par exemple, sur les pages de détail des produits, assurez-vous que le contenu caché derrière des onglets est inclus dans la réponse HTML initiale et ne nécessite pas l’exécution d’un code JavaScript pour l’intégrer.

Toutes les pages doivent avoir une URL unique

Chaque page de votre site doit avoir une URL unique, sans quoi Google aura beaucoup de mal à explorer votre site et à déterminer ce pour quoi vos pages doivent être classées.

N’utilisez pas de fragments dans les URL pour charger de nouvelles pages, car Google les ignorera la plupart du temps.

Si les visiteurs peuvent consulter votre page « À propos de nous » sur https://exemple.com#a-propos, les moteurs de recherche ne tiendront souvent pas compte du fragment, ce qui signifie qu’ils n’apprendront rien sur cette URL.

Astuce Graines de Référenceur

Saviez-vous que…

…que les référenceurs techniques recommandent d’utiliser des fragments pour la navigation à facettes sur des sites tels que les sites de commerce électronique afin de préserver le crawl budget ?

Inclure les éléments de navigation dans votre réponse HTML initiale

Tous les éléments de navigation doivent être présents dans la réponse HTML.

Inclure votre navigation principale est une évidence, mais n’oubliez pas votre barre latérale et votre pied de page, qui contiennent des liens contextuels importants.

Cet élément est particulièrement important dans le domaine du commerce électronique : la pagination.

Si le défilement infini offre une expérience agréable à l’utilisateur, il ne fonctionne pas bien pour les moteurs de recherche, car ils n’interagissent pas avec votre page. Ils ne peuvent donc pas déclencher les événements nécessaires pour charger du contenu supplémentaire.

Voici un exemple de ce qu’il faut éviter, car cela oblige Google à rendre la page pour trouver le lien de navigation :

<a onclick= »goto(‘https://exemple.com/chaussures/’) »>

Au lieu de cela, procédez comme suit :

<a href= »https://exemple.com/chaussures/ »>

Astuce Graines de Référenceur

Lors de la refonte ou de la modification d’un site web, le débogage de tout problème JavaScript est essentiel avant la mise en ligne.

Si les moteurs de recherche ne peuvent pas afficher correctement votre navigation, vous manquez une occasion de signaler vos pages clés et la structure de votre site.

Il est possible de régler le problème après la mise en ligne, mais vous risquez de constater que votre performance organique s’est déjà détériorée.

L’un des principaux problèmes que nous avons constatés récemment est que les développeurs utilisent des JavaScripts pour des liens que Google ne peut pas explorer, tels que les liens de type « onclick » ou « bouton », à moins qu’ils n’aient rendu la page.

Si vous voulez que Google trouve et suive vos liens sans les vérifier, ils doivent être présentés en html simple, car des liens internes propres et de qualité sont l’un des éléments les plus critiques pour Google.

Envoyez des signaux d’indexation clairs et sans ambiguïté

Google conseille vivement aux propriétaires de sites d’envoyer des signaux d’exploration et d’indexation clairs et sans ambiguïté.

Nous examinerons ici plusieurs directives et expliquerons pourquoi il est plus important que jamais de communiquer clairement dans le cadre du référencement JavaScript.

Directives meta robots

L’écrasement de vos directives meta robots à l’aide de JavaScript est source de problèmes. Voici pourquoi :

• • Si vous avez une <meta name="robots" content="noindex, follow"/> incluse dans la réponse HTML initiale que vous avez remplacée par une valeur index, follow à l’aide de JavaScript, Google ne s’en apercevra pas parce qu’en voyant la valeur noindex, il décidera de ne pas dépenser de précieuses ressources de rendu sur ce site.

En outre, même s’il découvre que le noindex a été remplacé par l’index, Google s’en tient généralement aux directives les plus restrictives, à savoir le noindex dans le cas présent.

• • Mais que se passe-t-il si vous faites l’inverse, en ayant <meta name="robots" content="index, follow"/> et en utilisant ensuite JavaScript pour changer cet index en noindex ?

Dans ce cas, Google indexera probablement la page parce qu’elle est autorisée par la réponse HTML initiale. Toutefois, ce n’est qu’après le rendu de la page que Google découvre l’existence du noindex et supprime la page de son index. Pendant une (brève) période, la page que vous ne souhaitiez pas voir indexée l’a été et a même pu être classée.

Liens canoniques

L’écrasement des liens canoniques est également source de désordre.

En mai 2018, John Mueller a déclaré : « Nous ne traitons (actuellement) le rel=canonical que sur la version initialement recherchée, non rendue » et Martin Splitt a déclaré en novembre 2020 que ce « comportement non défini conduit à des suppositions de la part de Google » – et c’est vraiment quelque chose que vous devriez éviter.

L’injection de liens canoniques par JavaScript conduit à une situation où Google ne découvre les liens canoniques qu’après avoir exploré et rendu vos pages.

Nous avons vu des cas où Google commence à explorer des quantités massives de pages personnalisées avec des URL uniques parce que le lien canonique n’a pas été inclus dans la réponse HTML initiale, mais injecté par JavaScript.

Il s’agit d’un gaspillage du crawl budget qu’il convient d’éviter.

Valeur de l’attribut de lien rel="nofollow"

Il en va de même pour l’ajout de la valeur de l’attribut rel="nofollow" aux liens à l’aide de JavaScript. Le robot d’exploration de Google extraira simplement ces liens et les ajoutera à la file d’attente d’exploration.

Ils sont explorés plus tôt que Google n’a pu rendre la page, ce qui entraîne la découverte de l’attribut rel="nofollow". Là encore, il s’agit d’un gaspillage du crawl budget et d’une source de confusion.

Dans l’autre sens, la présence de la valeur de l’attribut de lien rel="nofollow" et sa suppression à l’aide de JavaScript ne fonctionneront pas (comme pour les directives meta robots), car Google se conformera à la directive la plus restrictive.

Autres directives

N’oubliez pas d’inclure également d’autres directives dans votre réponse HTML initiale, comme par exemple :

link rel="prev"/"next" attribut
link rel="alternate" attribut hreflang
link rel="alternate" attribut mobile
link rel="amphtml" attribut

Astuce Graines de Référenceur

La gestion des erreurs et l’affichage de codes d’état corrects sont souvent négligés lors de l’audit des sites JavaScript, car les robots d’exploration les manquent fréquemment.

Nous avons constaté que de nombreux sites JavaScript renvoient toujours des codes d’état 200, même s’ils effectuent des redirections ou affichent un modèle d’erreur.

Cela peut se produire si la ressource est demandée à l’aide de JavaScript après que la page a renvoyé un code 200 lors du chargement des ressources.

Le fait de renvoyer des codes d’état erronés a une incidence sur l’exploration et l’indexation, ce qui empêche le transfert d’autorité. Veillez à ce que votre routage renvoie des réponses d’en-tête exactes.

Une solution de contournement courante pour les sites JavaScript consiste à rediriger les URL vers une page /404 spécifique qui renvoie le code de réponse 404.

Laissez les moteurs de recherche accéder à vos fichiers JavaScript

Assurez-vous que vous n’empêchez pas accidentellement les moteurs de recherche d’accéder à vos fichiers JavaScript par l’intermédiaire de votre fichier robots.txt, ce qui empêcherait les moteurs de recherche de restituer et de comprendre correctement vos pages.

Astuce Graines de Référenceur

L’intégration de JavaScript peut être une excellente solution pour fournir rapidement des ressources importantes à Googlebot en évitant le temps de latence des requêtes sur le réseau.

Toutefois, cette méthode n’est conseillée que pour les petits scripts critiques, car l’intégration de ressources JS importantes dans le <head> augmente le temps nécessaire au robot pour explorer la page.

Étant donné que toutes les ressources sont analysées par ordre d’apparition dans le code, il est également important de veiller à ce que les informations cruciales de la page, telles que les métadonnées et les fichiers CSS critiques, ne soient pas retardées par les scripts intégrés et soient placées en haut de l’élément <head>.

Astuce Graines de Référenceur

Ce que Googlebot ne peut pas rendre correctement, il ne peut pas l’indexer correctement.

Assurez-vous donc que le contenu et les liens que vous souhaitez voir explorés se trouvent dans la version rendue de votre page.

Pour que le contenu pèse de tout son poids dans le classement, veillez également à ce qu’il soit « visible » dès le chargement de la page, sans interaction avec l’utilisateur (défilement, clic, etc.).

L’optimisation des différentes mesures de vitesse permet de s’assurer que le processus de rendu ne prend pas de retard, ce qui donnerait aux moteurs de recherche une image incomplète de votre page ou, pire, de l’ensemble de votre site, car plus les moteurs de recherche peuvent rendre vos pages rapidement, plus ils sont enclins à les parcourir.

Si l’optimisation du chemin de rendu critique et la limitation de la taille des paquets JS sont utiles, il convient également de vérifier l’impact des scripts tiers sur le fil d’exécution principal de votre navigateur, car ils peuvent avoir une incidence considérable sur les performances.

Une voiture de sport tractant une remorque restera douloureusement lente.

Tirer parti de la division du code et du chargement paresseux

Imaginez la situation suivante : votre page d’accueil s’appuie fortement sur JavaScript, et toutes vos autres pages utilisent peu JavaScript.

Il serait alors très inefficace de charger tous les fichiers JavaScript « réservés à la page d’accueil » lorsqu’une page de votre site est demandée.

En plus de cela, appliquez la division de code pour charger le JavaScript qui est nécessaire immédiatement, et chargez le reste paresseusement.

Cela permet à vos pages de se charger rapidement et de devenir interactives.

Mise en œuvre du chargement paresseux des images à l’aide de l’attribut loading

Le chargement paresseux des images est un excellent moyen d’améliorer la vitesse de chargement des pages, mais vous ne voulez pas que Google doive effectuer un rendu complet de la page pour déterminer quelles images sont incluses.

Avec l’introduction de l’attribut loading, il n’est plus nécessaire d’implémenter le lazy-loading via JavaScript. Les navigateurs alimentés par Chromium (Chrome, Edge et Opera) ainsi que Firefox offrent une prise en charge native de l’attribut loading.

Voir ci-dessous l’exemple d’une image incluse grâce à l’attribut loading :

<img src="/images/cat.png" loading="lazy" alt="Black cat" width="250" height="250">

En incluant des images via l’attribut loading, vous obtenez le meilleur des deux mondes :

1. Les moteurs de recherche sont en mesure d’extraire les URL des images directement à partir du code HTML (sans avoir à le rendre).

2. Les navigateurs de vos visiteurs savent qu’ils doivent charger l’image paresseusement.

Tirez parti de la mise en cache JavaScript et utilisez des caches de contenu

Afin de ne pas affecter l’expérience utilisateur de votre site web, Google met en cache JavaScript de manière agressive.

C’est une bonne chose lorsque votre code JavaScript ne change pas trop souvent, mais qu’en est-il si c’est le cas ? Vous devez alors être en mesure de permettre à Google d’extraire rapidement la version la plus récente.

Ajoutez un content-hash aux noms de vos fichiers JavaScript, y compris les noms de fichiers tels que :

• • main.2a846fa617c3361f.js
  • example.117e1c5c1e1838c3.js
  • runtime.9bdf68f2f1992a3d.js

Lorsque votre code JavaScript est modifié, le hachage est mis à jour et Google sait qu’il doit le demander.

Astuce Graines de Référenceur

Ne faites pas l’erreur de croire que tout le monde possède un smartphone dernière génération, un accès à la 4G et à un signal WiFi puissant.

Ce n’est pas le cas de la plupart des gens.

Veillez donc à tester les performances de votre site sur des appareils différents et plus anciens, ainsi que sur des connexions plus lentes.

Et ne vous fiez pas uniquement aux données de laboratoire, mais plutôt aux données de terrain.

Options de rendu

Il est clair maintenant que le rendu côté client, qui repose entièrement sur le client (un navigateur ou un explorateur) pour exécuter le code JavaScript, a un impact négatif sur l’ensemble du processus d’exploration, d’indexation et de classement.

Mais, outre les meilleures pratiques de référencement JavaScript que nous venons d’aborder dans la section précédente, il existe d’autres mesures que vous pouvez prendre pour empêcher JavaScript de nuire à vos performances en matière de référencement.

Bien qu’il existe de nombreuses options de rendu (par exemple, le pré-rendu), il n’est pas possible de les aborder toutes dans le cadre de cet article.

Nous allons donc aborder les options de rendu les plus courantes afin d’offrir aux moteurs de recherche (et aux utilisateurs !) une meilleure expérience :

1. Rendu côté serveur
2. Rendu dynamique

Rendu côté serveur

Le rendu côté serveur consiste à rendre les pages web sur le serveur avant de les envoyer au client (navigateur ou robot d’exploration), au lieu de compter sur le client pour les rendre.

Ce processus de rendu se déroule en temps réel, et les visiteurs et, par exemple, Googlebot sont traités de la même manière.

Le code JavaScript peut toujours être utilisé et est exécuté après le chargement initial.

• Avantages
  • • Tous les éléments importants pour les moteurs de recherche sont immédiatement disponibles dans la réponse HTML initiale.
    • Il fournit une première peinture de contenu (First Contentful Paint ou FCP) rapide.
• Inconvénients
  • • Le temps d’accès au premier octet (Time To First Byte ou TTFB) est lent, car le serveur doit rendre les pages web à la volée.

Rendu dynamique

Le rendu dynamique signifie qu’un serveur répond différemment en fonction de l’auteur de la requête.

S’il s’agit d’un robot d’exploration, le serveur rend le code HTML et le renvoie au client, alors qu’un visiteur doit s’en remettre au rendu côté client.

Cette option de rendu est une solution de contournement et ne doit être utilisée que temporairement.

Bien que cela ressemble à du cloaking, Google ne considère pas le rendu dynamique comme du cloaking tant que le rendu dynamique produit le même contenu pour les deux types de requêtes.

• Avantages
  • • Tous les éléments importants pour les moteurs de recherche sont immédiatement disponibles dans la réponse HTML initiale envoyée aux moteurs de recherche.
    • Il est souvent plus facile et plus rapide à mettre en œuvre.
• Inconvénients
  • • Cela rend les problèmes de débogage plus complexes.

Astuce de Graines de Référenceur

Ne prenez pas de raccourcis pour fournir à Google une version rendue côté serveur. Après avoir affirmé pendant des années qu’ils pouvaient parfaitement gérer les sites web CSR (rendus côté client), ils encouragent désormais activement les configurations de rendu dynamique.

Cela est également bénéfique pour les robots d’exploration autres que ceux de Google, comme les moteurs de recherche concurrents qui ne peuvent pas encore gérer JavaScript et les demandes de prévisualisation des médias sociaux.

Veillez à toujours inclure les éléments de référencement de base, les liens internes, les balises de données structurées et tout le contenu textuel dans la réponse initiale à Googlebot.

Mettez en place une surveillance appropriée pour la détection de Googlebot (et d’autres), car vous ne voulez pas prendre de risques.

Google peut ajouter de nouvelles plages d’adresses IP, de nouveaux agents utilisateurs ou une combinaison de ces deux éléments.

Les fournisseurs de solutions préétablies ne sont pas tous aussi rapides qu’ils devraient l’être pour se tenir au courant de l’identification des Googlebots.

Astuce de Graines de Référenceur

Lorsque vous résolvez des problèmes liés à JavaScript, tirez parti de votre compréhension de l’ordre des opérations utilisé par Google. Imaginez que l’on vous dise qu’un site a mis en place un balisage de données structurées sur un ensemble de pages, mais qu’il n’obtient pas de résultats satisfaisants.

Prenons un peu de recul. Ces pages figurent-elles dans l’index ? Le balisage des données structurées est une phase supplémentaire de traitement de l’index. Son apparition nécessite des signaux techniques propres pendant l’exploration, un rendu efficace et une valeur unique pour l’index.

La plupart des problèmes liés à JavaScript peuvent être classés dans une phase : exploration, rendu ou indexation.

Astuce de Graines de Référenceur

Votre travail en tant que référenceur est de vous assurer que les robots des moteurs de recherche comprennent votre contenu.

D’après notre expérience, la meilleure pratique consisterait à adopter un modèle hybride dans lequel le contenu et les éléments importants pour le référencement sont fournis sous la forme d’un rendu côté serveur, puis toutes les améliorations UX/CX pour les visiteurs sont ajoutées sous la forme d’une « couche » de rendu côté client.

De cette manière, vous obtenez le meilleur des deux mondes, de manière organisée. 

Il est essentiel de séparer le contenu, les liens, les schémas, les métadonnées, etc. des améliorations apportées aux visiteurs. C’est ainsi que vous obtiendrez des résultats exceptionnels.

Comment vérifier à quoi ressemblent des pages rendues ?

Vous pouvez utiliser le test d’optimisation mobile de Google pour récupérer et tester une page, et voir à quoi ressemblerait votre page rendue sous l’onglet CAPTURE D’ÉCRAN :

Ne vous inquiétez pas si votre page est coupée dans la capture d’écran ; c’est tout à fait normal.

Vous pouvez également vérifier à quoi ressemblent vos pages rendues à l’aide de l’outil Inspection des URL de Google Search Console.

Notez que vous pouvez également accéder à l’onglet HTML, qui affiche le code HTML rendu. Cela peut être utile pour le débogage.

Astuce Graines de Référenceur

Vérifier à quoi ressemblent les pages rendues est une tâche essentielle pour tout projet de référencement JavaScript, mais le problème avec Google Search Console est qu’il ne permet pas de vérifier des centaines, des milliers ou même des centaines de milliers de pages. 

Les éléments importants de la page que vous supposiez être affichés dans le code HTML rendu, tels que les titres de page, les méta-descriptions, les liens internes des menus et les fils d’Ariane, ne sont souvent pas cohérents d’un modèle à l’autre.

Vérifiez vos modèles, en particulier les différences entre le HTML initial et le HTML rendu !

Budget de rendu

Lors de la conférence Google I/O ’18, Tom Greenaway de Google a expliqué :

« Le rendu des sites web alimentés par JavaScript dans Google Search est différé jusqu’à ce que Googlebot dispose des ressources nécessaires pour traiter ce contenu. »

Comme vous pouvez l’imaginer, Google doit établir des priorités en matière de rendu, car tous les sites web ne sont pas égaux. C’est pourquoi les sites web disposent d’un budget de rendu qui leur est attribué.

Cela permet à Google de consacrer plus de temps au rendu des pages que les visiteurs sont censés rechercher plus souvent.

De ce fait, les pages web reposant fortement sur JavaScript sont indexées beaucoup plus lentement que les pages HTML « normales », surtout si le site web en question se situe dans la dernière tranche de rendu.

Qu’en est-il des robots d’indexation des médias sociaux ?

Les robots d’indexation des médias sociaux tels que ceux de Facebook, Twitter ou , LinkedIn doivent pouvoir accéder facilement à votre code HTML afin de générer des extraits significatifs.

S’ils ne peuvent pas trouver l’OpenGraph d’une page, le balisage Twitter Card ou, s’ils ne sont pas disponibles, votre titre et votre méta-description, ils ne pourront pas générer d’extrait.

Cela signifie que votre extrait aura une mauvaise apparence et qu’il est probable que vous n’obtiendrez pas beaucoup de trafic à partir de ces plateformes de médias sociaux.

FAQ 

Les robots d’indexation de Google utilisent-ils JavaScript ?

Non, les robots d’exploration de Google n’exécutent pas de JavaScript. Le rendu de JavaScript intervient bien plus loin dans le pipeline d’indexation, si Google estime qu’il est nécessaire à la bonne compréhension d’une page.

Que recherchent les robots de Google ?

Les robots d’indexation de Google recherchent en permanence du nouveau contenu et, lorsqu’ils le trouvent, le traitent dans le cadre d’un processus distinct. Ce processus examine d’abord la réponse HTML initiale.

Cette réponse doit contenir tout le contenu essentiel pour que les moteurs de recherche puissent comprendre le contenu de la page et les relations qu’elle entretient avec d’autres pages.

Facebook peut-il afficher du JavaScript ?

Non, il ne le peut pas. Il est donc fortement recommandé d’utiliser le rendu côté serveur ou le rendu dynamique. Sinon, Facebook (et d’autres plateformes de médias sociaux) ne sera pas en mesure de générer un bon extrait pour votre URL lorsqu’elle est partagée.