Résoudre les problèmes JavaScript liés à la recherche | Google Search Central | Documentation

Nous sommes maintenant sur LinkedIn : pour consulter des informations et des ressources de Google Search Central sur la découvrabilité de votre site, suivez-nous sur LinkedIn.

Ce guide vous permet d'identifier et de résoudre les problèmes JavaScript susceptibles d'empêcher l'affichage dans la recherche Google de votre page ou de contenus spécifiques associés à des pages JavaScript. Même si la recherche Google exécute JavaScript, vous devez tenir compte de certaines différences et restrictions lors de la conception de vos pages et de vos applications afin de permettre aux robots d'exploration d'accéder au contenu et de l'afficher. Le guide sur les principes de base du référencement JavaScript fournit des informations supplémentaires sur la façon d'optimiser votre site JavaScript pour la recherche Google.

Googlebot est conçu pour être un bon citoyen du Web. Il fait de l'exploration sa priorité, tout en s'assurant de ne pas nuire à l'expérience des internautes qui consultent le site. Googlebot et le service WRS analysent et identifient en permanence les ressources qui ne contribuent pas au contenu essentiel de la page, et n'en tiennent pas toujours compte. Par exemple, les requêtes de rapport et d'erreur, ainsi que d'autres types de requêtes similaires qui ne contribuent pas au contenu essentiel de la page, ne sont pas utilisées ni nécessaires pour extraire ce contenu. Les données analytiques côté client peuvent ne pas fournir une représentation complète ou précise de l'activité de Googlebot et de WRS sur votre site. Utilisez le rapport "Statistiques sur l'exploration" dans la Google Search Console pour suivre les commentaires et l'activité de Googlebot et de WRS sur votre site.

Si vous pensez que des problèmes JavaScript peuvent empêcher l'affichage de votre page ou de contenus spécifiques sur des pages JavaScript dans la recherche Google, procédez comme suit : Si vous ne savez pas si JavaScript est la cause principale, suivez notre guide de débogage général afin de déterminer le problème spécifique.

Pour tester la manière dont Google explore et affiche une URL, utilisez le test des résultats enrichis ou l'outil d'inspection d'URL dans la Search Console. Vous pouvez consulter les ressources chargées, la sortie et les exceptions de la console JavaScript, le rendu DOM ainsi que d'autres informations.

Nous vous recommandons également de collecter et de vérifier les erreurs JavaScript rencontrées par les utilisateurs, y compris Googlebot, sur votre site afin de déceler les problèmes susceptibles de nuire à l'affichage du contenu. Voici un exemple illustrant comment consigner les erreurs JavaScript enregistrées dans global onerror handler. Remarque : Certains types d'erreur JavaScript, tels que les erreurs d'analyse, ne peuvent pas être consignés avec cette méthode.

window.addEventListener('error', function(e) {
    var errorText = [
        e.message,
        'URL: ' + e.filename,
        'Line: ' + e.lineno + ', Column: ' + e.colno,
        'Stack: ' + (e.error && e.error.stack || '(no stack trace)')
    ].join('\n');

    // Example: log errors as visual output into the host page.
    // Note: you probably don't want to show such errors to users, or
    //       have the errors get indexed by Googlebot; however, it may
    //       be a useful feature while actively debugging the page.
    var DOM_ID = 'rendering-debug-pre';
    if (!document.getElementById(DOM_ID)) {
        var log = document.createElement('pre');
        log.id = DOM_ID;
        log.style.whiteSpace = 'pre-wrap';
        log.textContent = errorText;
        if (!document.body) document.body = document.createElement('body');
        document.body.insertBefore(log, document.body.firstChild);
    } else {
        document.getElementById(DOM_ID).textContent += '\n\n' + errorText;
    }

    // Example: log the error to remote service.
    // Note: you can log errors to a remote service, to understand
    //       and monitor the types of errors encountered by regular users,
    //       Googlebot, and other crawlers.
    var client = new XMLHttpRequest();
    client.open('POST', 'https://example.com/logError');
    client.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');
    client.send(errorText);

});

Assurez-vous d'éviter les erreurs soft 404. Dans une application monopage, cela peut être particulièrement difficile. Pour éviter l'indexation des pages d'erreur, vous pouvez adopter les stratégies suivantes, à votre convenance :
- Redirigez les internautes vers une URL où le serveur répond avec un code d'état 404.
```
fetch(`https://api.kitten.club/cats/${id}`)
 .then(res => res.json())
 .then((cat) => {
   if (!cat.exists) {
     // redirect to page that gives a 404
     window.location.href = '/not-found';
   }
 });
```
- Ajoutez ou remplacez la balise meta pour les robots en lui attribuant la valeur noindex.
```
fetch(`https://api.kitten.club/cats/${id}`)
 .then(res => res.json())
 .then((cat) => {
   if (!cat.exists) {
     const metaRobots = document.createElement('meta');
     metaRobots.name = 'robots';
     metaRobots.content = 'noindex';
     document.head.appendChild(metaRobots);
   }
 });
```
Lorsqu'une SPA utilise le code JavaScript côté client pour gérer les erreurs, elle signale souvent un code d'état HTTP 200 au lieu du code d'état approprié. Cela peut entraîner l'indexation des pages d'erreur et leur affichage éventuel dans les résultats de recherche.
Attendez-vous à ce que Googlebot refuse les demandes d'autorisation utilisateur.
Les fonctionnalités qui nécessitent des autorisations utilisateur n'ont pas de sens pour Googlebot ni pour tous les utilisateurs. Par exemple, si vous imposez l'utilisation de Camera API, Googlebot ne peut pas vous fournir de caméra. Donnez donc plutôt aux utilisateurs un moyen d'accéder à votre contenu sans qu'ils ne soient obligés d'autoriser l'accès à leur caméra.
N'utilisez pas de fragments d'URL pour charger un contenu différent.
Une SPA peut utiliser des fragments d'URL (par exemple, https://example.com/#/produits) pour charger des vues distinctes. Le schéma du processus d'exploration AJAX est obsolète depuis 2015. Vous ne pouvez donc pas espérer que les fragments d'URL fonctionnent avec Googlebot. Nous vous recommandons d'utiliser l'API History pour charger un contenu différent en fonction de l'URL dans une SPA.
Ne comptez pas sur la persistance des données pour diffuser le contenu.
WRS charge chaque URL (voir Fonctionnement de la recherche Google pour découvrir comment Google identifie le contenu), en suivant les redirections de serveur et de client, comme avec un navigateur classique. Toutefois, WRS ne conserve pas l'état de tous les chargements de page :
- Les données de stockage local et de stockage de session sont effacées pour tous les chargements de page.
- Les cookies HTTP sont effacés pour tous les chargements de page.
Utilisez les empreintes de contenu pour éviter les problèmes de mise en cache avec Googlebot.
Googlebot met le contenu en cache de manière intensive afin de réduire les requêtes réseau et l'utilisation des ressources. WRS peut ignorer les en-têtes de mise en cache. Cela peut entraîner l'utilisation de ressources JavaScript ou CSS obsolètes par WRS. L'empreinte du contenu évite ce problème en prenant une empreinte de la partie contenu du nom de fichier, par exemple main.2bb85551.js. L'empreinte dépend du contenu du fichier. Par conséquent, les mises à jour génèrent un nom de fichier différent à chaque fois. Pour en savoir plus, consultez le guide web.dev sur les stratégies de mise en cache de longue durée.
Assurez-vous que votre application utilise la détection de fonctionnalité pour toutes les API critiques dont elle a besoin et configurez un comportement de remplacement ou un polyfill, le cas échéant.
Certaines fonctionnalités Web peuvent ne pas encore être adoptées par tous les user-agents, tandis que d'autres peuvent désactiver intentionnellement certaines fonctionnalités. Par exemple, si vous utilisez WebGL pour afficher un effet photo dans le navigateur, la détection de fonctionnalité indique que Googlebot n'est pas compatible avec WebGL. Pour résoudre ce problème, vous pouvez ignorer l'effet photo ou choisir d'utiliser le rendu côté serveur pour pré-afficher l'effet photo, ce qui rend votre contenu accessible à tous, y compris à Googlebot.
Assurez-vous que votre contenu fonctionne avec les connexions HTTP.
Googlebot utilise des requêtes HTTP pour récupérer le contenu de votre serveur. Il n'est pas compatible avec les autres types de connexions, comme WebSockets ou WebRTC. Pour éviter les problèmes potentiels, veillez à fournir une URL HTTP de substitution pour récupérer le contenu, et à avoir recours à un outil robuste de gestion des erreurs et de détection de fonctionnalités.
Assurez-vous que vos composants Web s'affichent comme prévu. Utilisez le test des résultats enrichis ou l'outil d'inspection d'URL pour vérifier que le rendu HTML affiche le contenu souhaité.
WRS regroupe les composants Light DOM et Shadow DOM. Si vos composants Web n'utilisent pas le mécanisme <slot> pour le contenu Light DOM, reportez-vous à la documentation spécifique à ces composants pour en savoir plus, ou recourez à un autre composant Web à la place. Pour plus d'informations, consultez les bonnes pratiques concernant les composants Web.
Après avoir corrigé les éléments de cette checklist, testez à nouveau votre page avec le test des résultats enrichis ou l'outil d'inspection d'URL dans la Search Console.
Si vous avez résolu le problème, une coche verte apparaît et aucune erreur ne s'affiche. S'il reste des erreurs, publiez un message sur le site de la Communauté d'aide Search Central.