Découvrez les dernières actualités et les derniers insights de la conférence Google I/O 2019.
La recherche Google ouvre de nouvelles perspectives. Nous avions hâte d'en parler lors de la conférence Google I/O 2019.
Dans ce post, nous allons nous intéresser aux bonnes pratiques pour rendre les applications Web JavaScript visibles dans la recherche Google. En voici quelques exemples:
- Le nouveau Googlebot, un robot à la page
- Pipeline Googlebot pour l'exploration, l'affichage et l'indexation
- Détection de caractéristiques et gestion des erreurs
- Stratégies d'affichage
- Outils de test pour votre site Web dans la recherche Google
- Défis courants et solutions possibles
- Bonnes pratiques de SEO pour les applications Web JavaScript
À la rencontre de Googlebot, l'intemporel
Cette année, nous avons annoncé le lancement du nouveau Googlebot, toujours à jour d'aujourd'hui.
Googlebot utilise désormais un moteur Chromium moderne afin d'afficher les sites Web dans la recherche Google. Nous allons également tester les nouvelles versions de Chromium pour maintenir Googlebot à jour, généralement quelques semaines après chaque version stable de Chrome. Cette annonce est importante pour les développeurs Web et les référenceurs, car elle marque le lancement de plus de 1 000 nouvelles fonctionnalités (ES6+, IntersectionObserver et Web Components v1, par exemple) dans Googlebot.
En savoir plus sur le fonctionnement de Googlebot
Googlebot est un pipeline constitué de plusieurs composants. Voyons comment Googlebot indexe les pages pour la recherche Google.
Le processus fonctionne comme ceci :
- Googlebot met les URL en file d'attente pour l'exploration.
- Il extrait ensuite les URL avec une requête HTTP en fonction du budget d'exploration.
- Googlebot analyse le code HTML à la recherche de liens et met les liens détectés en file d'attente pour l'exploration.
- Googlebot met ensuite la page en file d'attente pour l'affichage.
- Dès que possible, une instance Chromium sans interface graphique affiche la page, ce qui inclut l'exécution de JavaScript.
- Googlebot utilise le rendu HTML pour indexer la page.
Votre configuration technique peut influencer le processus d'exploration, d'affichage et d'indexation. Par exemple, des temps de réponse lents ou des erreurs de serveur peuvent avoir une incidence sur le budget d'exploration. Autre exemple : utiliser du code JavaScript pour afficher les liens peut ralentir la découverte de ces liens.
Utiliser la détection de fonctionnalités et gérer les erreurs
Googlebot propose de nombreuses nouvelles fonctionnalités, mais certaines d'entre elles ne sont toujours pas prises en charge. Si vous utilisez des fonctionnalités non compatibles ou si vous ne gérez pas correctement les erreurs, Googlebot ne pourra pas afficher ou indexer votre contenu.
Voyons un exemple :
<body>
<script>
navigator.geolocation.getCurrentPosition(function onSuccess(position) {
loadLocalContent(position);
});
</script>
</body>
Dans certains cas, il est possible que cette page n'affiche aucun contenu, car le code ne gère pas le refus de l'autorisation par l'utilisateur ou l'affichage d'une erreur par l'appel getCurrentPosition. Par défaut, Googlebot refuse les demandes d'autorisation de ce type.
Voici une meilleure solution:
<body>
<script>
if (navigator.geolocation) {
// this browser supports the Geolocation API, request location!
navigator.geolocation.getCurrentPosition(
function onSuccess(position) {
// we successfully got the location, show local content
loadLocalContent(position);
}, function onError() {
// we failed to get the location, show fallback content
loadGlobalContent();
});
} else {
// this browser does not support the Geolocation API, show fallback content
loadGlobalContent();
}
</script>
</body>
Si vous rencontrez des problèmes pour indexer votre site JavaScript, consultez notre guide de dépannage pour trouver des solutions.
Choisir la stratégie d'affichage adaptée à votre application Web
Aujourd'hui, la stratégie de rendu par défaut pour les applications monopages est le rendu côté client. Le code HTML charge le code JavaScript, qui génère ensuite le contenu dans le navigateur au fur et à mesure de son exécution.
Prenons l'exemple d'une application Web qui affiche une collection d'images de chats et utilise JavaScript pour s'afficher entièrement dans le navigateur.
Si vous êtes libre de choisir votre stratégie de rendu, envisagez d'utiliser le rendu côté serveur ou le préaffichage. Ils exécutent du code JavaScript sur le serveur pour générer le contenu HTML initial, ce qui peut améliorer les performances pour les utilisateurs et les robots d'exploration. Ces stratégies permettent au navigateur de commencer à afficher le code HTML dès qu'il arrive sur le réseau, ce qui accélère le chargement de la page. La session de rendu lors de Google I/O ou l'article de blog sur le rendu sur le Web montrent comment l'affichage côté serveur et l'hydratation peuvent améliorer les performances et l'expérience utilisateur des applications Web. Ils fournissent également d'autres exemples de code pour ces stratégies.
Si vous cherchez une solution de contournement pour aider les robots d'exploration qui n'exécutent pas JavaScript, ou si vous ne pouvez pas modifier le codebase de votre interface, envisagez d'utiliser l'affichage dynamique, que vous pouvez essayer dans cet atelier de programmation. Notez toutefois que vous n'offrirez pas l'expérience utilisateur ni les gains de performances que vous auriez obtenus avec l'affichage côté serveur ou le préaffichage, car l'affichage dynamique ne fournit du code HTML statique qu'aux robots d'exploration. Il s'agit donc d'une étape provisoire plutôt que d'une stratégie à long terme.
Tester vos pages
Même si la plupart des pages fonctionnent généralement bien avec Googlebot, nous vous recommandons de tester vos pages régulièrement pour vous assurer que votre contenu est accessible à Googlebot et qu'il n'y a pas de problème. Il existe plusieurs excellents outils pour vous aider à y parvenir.
Le test d'optimisation mobile est le moyen le plus simple de vérifier rapidement une page. En plus de vous signaler les problèmes d'adaptation aux mobiles, cet outil vous fournit également une capture d'écran du contenu au-dessus de la ligne de flottaison et du code HTML affiché tel que Googlebot le voit.
Vous pouvez également vérifier s'il existe des problèmes de chargement des ressources ou des erreurs JavaScript.
Nous vous recommandons de valider votre domaine dans la Google Search Console. Vous pourrez ainsi utiliser l'outil d'inspection d'URL pour en savoir plus sur l'état de l'exploration et de l'indexation d'une URL, recevoir des messages lorsque la Search Console détecte des problèmes et en savoir plus sur les performances de votre site dans la recherche Google.
Pour obtenir des conseils généraux en matière de SEO, vous pouvez utiliser les audits SEO dans Lighthouse. Pour intégrer des audits SEO à votre suite de tests, utilisez la CLI Lighthouse ou le bot de CI Lighthouse.
Ces outils vous aident à identifier, déboguer et résoudre les problèmes liés aux pages dans la recherche Google. Ils doivent faire partie de votre routine de développement.
Tenez-vous informé et contactez-nous
Pour vous tenir informé des annonces et des modifications concernant la recherche Google, consultez notre blog pour les webmasters, la chaîne YouTube dédiée aux webmasters Google et notre compte Twitter. Pour en savoir plus sur le SEO et JavaScript, consultez également notre guide du développeur sur la recherche Google et notre série de vidéos sur le SEO JavaScript.