Comprendre les bases du SEO JavaScript

JavaScript est une partie importante de la plate-forme Web car il fournit de nombreuses fonctionnalités qui transforment le Web en une plate-forme d’application puissante. Rendre vos applications Web basées sur JavaScript détectables via la recherche Google peut vous aider à trouver de nouveaux utilisateurs et à réengager les utilisateurs existants lorsqu’ils recherchent le contenu fourni par votre application Web. Bien que la recherche Google exécute JavaScript avec une version evergreen de Chromium, il y a quelques points que vous pouvez optimiser.

Ce guide décrit comment la recherche Google traite JavaScript et les meilleures pratiques pour améliorer les applications Web JavaScript pour la recherche Google.

Comment Google traite JavaScript

Google traite les applications Web JavaScript en trois phases principales :

1. Exploration (Crawling)
2. Rendu (Rendering)
3. Indexation

Googlebot met les pages en file d’attente pour l’exploration et le rendu. Il n’est pas immédiatement évident de savoir quand une page attend d’être explorée et quand elle attend d’être rendue. Lorsque Googlebot récupère une URL de la file d’attente d’exploration en effectuant une requête HTTP, il vérifie d’abord si vous autorisez l’exploration. Googlebot lit le fichier robots.txt . S’il marque l’URL comme non autorisée, Googlebot ignore la requête HTTP vers cette URL et ignore l’URL. La recherche Google ne rendra pas JavaScript à partir de fichiers bloqués ou sur des pages bloquées.

Googlebot analyse ensuite la réponse pour trouver d’autres URL dans l’attribut href des liens HTML et ajoute les URL à la file d’attente d’exploration. Pour empêcher la découverte de liens, utilisez le mécanisme nofollow ..

. L’exploration d’une URL et l’analyse de la réponse HTML fonctionnent bien pour les sites Web classiques ou les pages rendues côté serveur où le HTML dans la réponse HTTP contient tout le contenu. Certains sites JavaScript peuvent utiliser le modèle d’application shell où le HTML initial ne contient pas le contenu réel et Google doit exécuter JavaScript avant de pouvoir voir le contenu réel de la page généré par JavaScript.

Googlebot met en file d’attente toutes les pages avec un 200 code d’état HTTP pour le rendu, à moins qu’une balise meta robots ou un en-tête n’indique à Google de ne pas indexer la page. La page peut rester dans cette file d’attente pendant quelques secondes, mais cela peut prendre plus de temps. Une fois que les ressources de Google le permettent, un Chromium sans tête rend la page et exécute le JavaScript. Googlebot analyse à nouveau le HTML rendu à la recherche de liens et met en file d’attente les URL qu’il trouve pour l’exploration. Google utilise également le HTML rendu pour indexer la page.

Gardez à l’esprit que le rendu côté serveur ou le pré-rendu est toujours une excellente idée car il rend votre site Web plus rapide pour les utilisateurs et les robots d’exploration, et tous les robots ne peuvent pas exécuter JavaScript.

Décrivez votre page avec des titres et des extraits uniques

Des éléments <title> uniques et descriptifs et des méta-descriptions aident les utilisateurs à identifier rapidement le meilleur résultat pour leur objectif. Vous pouvez utiliser JavaScript pour définir ou modifier la méta-description ainsi que l’élément <title> .

Définissez l’URL canonique

La balise de lien rel=”canonical” aide Google à trouver la version canonique d’une page. Vous pouvez utiliser JavaScript pour définir l’URL canonique, mais gardez à l’esprit que vous ne devez pas utiliser JavaScript pour remplacer l’URL canonique par une autre que celle que vous avez spécifiée comme URL canonique dans le HTML d’origine. La meilleure façon de définir l’URL canonique est d’utiliser HTML, mais si vous devez utiliser JavaScript, assurez-vous de toujours définir l’URL canonique sur la même valeur que le HTML d’origine. Si vous ne pouvez pas définir l’URL canonique dans le HTML, vous pouvez utiliser JavaScript pour définir l’URL canonique et l’omettre du HTML d’origine.

Écrivez du code compatible

Les navigateurs proposent de nombreuses API et JavaScript est un langage qui évolue rapidement. Google a certaines limitations concernant les API et les fonctionnalités JavaScript qu’il prend en charge. Pour vous assurer que votre code est compatible avec Google, suivez nos.

directives pour résoudre les problèmes JavaScript . Nous recommandons d’utiliser le service différentiel et les polyfills

si vous détectez une API de navigateur manquante dont vous avez besoin. Étant donné que certaines fonctionnalités du navigateur ne peuvent pas être complétées par des polyfills, nous vous recommandons de consulter la documentation des polyfills pour connaître les limitations potentielles.

Utilisez des codes d’état HTTP significatifs Googlebot utilise des codes d’état HTTP

pour savoir si quelque chose a mal tourné lors de l’exploration de la page. 404 Pour indiquer à Googlebot si une page ne peut pas être explorée ou indexée, utilisez un code d’état significatif, comme un 401 pour une page introuvable ou un

code pour les pages derrière une connexion. Vous pouvez utiliser les codes d’état HTTP pour indiquer à Googlebot si une page a été déplacée vers une nouvelle URL, afin que l’index puisse être mis à jour en conséquence. Voici une liste des codes d’état HTTP

et comment ils affectent la recherche Google. Évitez les erreurs soft 404

dans les applications monopages Dans les applications monopages rendues côté client, le routage est souvent implémenté en tant que routage côté client. Dans ce cas, l'utilisation de codes d'état HTTP significatifs peut être impossible ou peu pratique. Pour éviter les erreurs soft 404 lors de l’utilisation du rendu et du routage côté client, utilisez l’une des stratégies suivantes :

• Utilisez une redirection JavaScript vers une URL pour laquelle le serveur répond avec un 404 Code d’état HTTP (par exemple, /not-found).
• Ajoutez une <meta name="robots" content="noindex"> aux pages d’erreur en utilisant JavaScript.

Voici un exemple de code pour l’approche de redirection :

Voici un exemple de code pour l’approche de noindex balise :

Utilisez l’History API au lieu des fragments

Google ne peut découvrir vos liens que s’ils sont <a> des éléments HTML avec un href attribut.

Pour les applications monopages avec routage côté client, utilisez l’ History API pour implémenter le routage entre différentes vues de votre application web.
Pour vous assurer que Googlebot puisse analyser et extraire vos URL, n’utilisez pas de fragments pour charger différents contenus de page.
L’exemple suivant est une mauvaise pratique, car Googlebot ne peut pas résoudre les URL de manière fiable :

Au lieu de cela, vous pouvez vous assurer que vos URL sont accessibles à Googlebot en implémentant l’History API :

Injectez correctement la rel="canonical" balise de lien

Bien que nous ne recommandions pas d’utiliser JavaScript pour cela, il est possible d’injecter une rel="canonical" balise de lien avec JavaScript.
La recherche Google récupérera l’URL canonique injectée lors du rendu de la page. Voici un exemple pour injecter une rel="canonical" balise de lien avec JavaScript :

Utilisez robots meta balises avec précaution

Vous pouvez empêcher Google d’indexer une page ou de suivre des liens via la robots meta balise.
Par exemple, l’ajout de la meta balise suivante en haut de votre page empêche Google d’indexer la page :

Vous pouvez utiliser JavaScript pour ajouter une robots meta balise à une page ou modifier son contenu.
L’exemple de code suivant montre comment modifier la robots meta balise avec JavaScript pour empêcher l’indexation de la page actuelle si un appel API ne renvoie aucun contenu.

Utilisez une mise en cache à longue durée

Googlebot met en cache de manière agressive afin de réduire les requêtes réseau et l’utilisation des ressources. WRS peut ignorer les en-têtes de cache. Cela peut amener WRS à utiliser des ressources JavaScript ou CSS obsolètes.
L’empreinte numérique du contenu évite ce problème en faisant de l’empreinte numérique du contenu une partie du nom de fichier, comme main.2bb85551.js.
L’empreinte numérique dépend du contenu du fichier, donc les mises à jour génèrent un nom de fichier différent à chaque fois.
Consultez le guide web.dev sur les stratégies de mise en cache à longue durée pour en savoir plus.

Utilisez des données structurées

Lorsque vous utilisez des données structurées sur vos pages, vous pouvez utiliser JavaScript pour générer le JSON-LD requis et l’injecter dans la page. Assurez-vous de tester votre implémentation pour éviter les problèmes.

Suivez les meilleures pratiques pour les composants web

Google prend en charge les composants web. Lorsque Google effectue le rendu d’une page, il aplatit le shadow DOM et le light DOM contenu. Cela signifie que Google ne peut voir que le contenu visible dans le HTML rendu. Pour vous assurer que Google peut toujours voir votre contenu après son rendu, utilisez le Rich Results Test ou l’outil URL Inspection Tool et examinez le HTML rendu.

Si le contenu n’est pas visible dans le HTML rendu, Google ne pourra pas l’indexer.

L’exemple suivant crée un composant web qui affiche son contenu light DOM à l’intérieur de son shadow DOM. Une façon de s’assurer que le contenu light DOM et shadow DOM est affiché dans le HTML rendu consiste à utiliser un Slot élément.

Après le rendu, Google peut indexer ce contenu :

Corrigez les images et le contenu en chargement différé (lazy-loading)

Les images peuvent être assez coûteuses en termes de bande passante et de performances. Une bonne stratégie consiste à utiliser le chargement différé pour ne charger les images que lorsque l’utilisateur est sur le point de les voir. Pour vous assurer que vous implémentez le chargement différé d’une manière adaptée à la recherche, suivez nos directives de chargement différé.