La plupart des sites Web modernes contiennent du JavaScript, ce qui les rend dynamiques et interactifs. Bien que les robots des moteurs de recherche soient assez intelligents, ils peuvent toujours ne pas afficher une grande partie du contenu JavaScript, ce qui affecte le classement des pages.
Le contenu JavaScript dépend beaucoup de la façon dont votre site Web restitue le code.
Par exemple, dans le rendu côté serveur, le serveur contient le contenu du site Web. Sur demande, le navigateur reçoit le code HTML entièrement rendu.
Cependant, dans le rendu côté client, le JavaScript est rendu par le navigateur à l’aide de DOM.
La troisième option de rendu est le rendu dynamique, où le contenu rendu côté client va au navigateur, tandis que le contenu rendu côté serveur va au(x) moteur(s) de recherche.
Les techniques de rendu affectent la façon dont JS est rendu et donc le classement des pages.
Pour vous assurer que tout le code JS de votre site Web est rendu, vous devez suivre les bonnes pratiques de référencement JavaScript. Mais d’abord, comprenons ce qu’est le référencement JavaScript.
Table des matières
Qu’est-ce que le référencement JavaScript ?
JavaScript SEO permet aux moteurs de recherche d’explorer et d’indexer facilement le code JavaScript (contenu dynamique) d’un site Web (ou d’une page Web). Google ou tout autre moteur de recherche traite JavaScript en trois étapes, à savoir l’exploration, le rendu et l’indexation. Pour que Google fasse tout cela, le contenu JavaScript doit être optimisé pour le référencement, c’est-à-dire visible et disponible.
Comment Google traite le contenu JavaScript sur une page
Voici les étapes suivies par Googlebot pour traiter JavaScript :
- Récupère une URL de la file d’attente d’exploration via la requête HTTP
- Vérifie le fichier robots.txt pour les URL que le site n’autorise pas l’exploration
- Ignore les URL « non autorisées », analyse la réponse pour d’autres URL et les ajoute à la file d’attente d’exploration
- Met les pages en file d’attente pour le rendu, à l’exception de celles qui sont marquées comme n’étant pas indexées
- Chromium rend la page, exécute le JavaScript et indexe la page
- Analyse à nouveau le HTML rendu pour les liens
- Met les URL en file d’attente pour l’exploration
Quand Google n’indexe-t-il pas le contenu JavaScript ?
Google peut indexer JavaScript lorsqu’il est correctement implémenté. Par exemple, si certains de vos fichiers JS et CSS sont masqués, Google peut ne pas être en mesure d’explorer correctement le site Web. De même, si vous avez des liens dans le HTML brut qui ne sont pas présents dans le HTML rendu, Google peut éviter que ces liens ne soient explorés ou indexés.
De plus, si JavaScript n’est pas directement intégré au code HTML, Google doit télécharger le fichier pour l’exécuter. De plus, les moteurs de recherche peuvent avoir une version en cache d’une page Web (pour de meilleures performances), et le JavaScript de la page peut ne pas être synchronisé avec celle-ci.
Étant donné que chaque bit de code JavaScript doit être lu, une utilisation excessive de JavaScript peut ralentir la vitesse de la page ou provoquer des erreurs de temporisation.
Pourquoi le référencement JavaScript est-il important ?
Le référencement JavaScript est important car il affecte de nombreux éléments sur la page et facteurs de classement que Google (ou les moteurs de recherche) analysent pour le référencement :
Élément sur la page
Problème de référencement potentiel
Solution de référencement possible
Contenu rendu
Les moteurs de recherche (comme Google) ne peuvent pas afficher votre page si ses ressources sont bloquées dans le fichier robots.txt de votre site. De plus, Google ne peut pas indexer ou rendre les fichiers JS et CSS, qui sont bloqués ou masqués.
Réduisez JavaScript sur le contenu principal de la page, suivez des approches alternatives pour le rendu côté client, comme le rendu côté serveur, le rendu dynamique, le rendu hybride (combinaison de côté client et côté serveur)
Liens
Si certains liens sont internes ou que JavaScript génère les liens vers une URL lorsque l’utilisateur clique dessus, Google ne peut pas découvrir ces liens.
Utilisez des liens d’ancrage avec l’attribut href, des textes d’ancrage descriptifs pour les liens. Les pseudo-liens comme les balises
Métadonnées
À moins que le site n’utilise des packages Node.js comme vue-meta, les moteurs de recherche peuvent explorer la même chose ou, pire, aucune métadonnée pour chaque vue ou page.
Utilisez les packages Node.js comme react-helmet, vue-meta, react-meta-tags
Images chargées paresseusement
Le robot d’exploration du moteur de recherche ne sélectionne aucun contenu marqué pour le chargement différé. Le moteur de recherche ne peut pas faire défiler le contenu et, par conséquent, certains contenus peuvent ne jamais être affichés.
Utilisez l’API IntersectionObserver, qui comprend la visibilité et la position des éléments DOM une fois qu’ils sont disponibles. Vous pouvez également utiliser la fonctionnalité native de chargement paresseux du navigateur (Chrome).
Temps de chargement des pages
Une page avec beaucoup de contenu JavaScript peut être lente à se charger, ce qui peut affecter son classement dans les recherches.
Ajoutez du code JS critique en ligne et différez le code JS non critique jusqu’à ce que le contenu principal soit rendu, ce qui réduit le code JS global.
Meilleures pratiques pour le référencement JavaScript
En suivant certaines des meilleures pratiques, nous pouvons amener les moteurs de recherche à explorer et à mieux afficher les pages :
Ajouter des liens et des images selon les normes Web définies
Ajoutez tous les liens en utilisant le ahreftag plutôt que onclick, #pageurl ou window.location.href=’/page-url. Google peut facilement explorer les liens et les suivre.
<a href=”http://toptips.fr.com”>Welcome to Geek world</a>
De la même manière, ajoutez des images en utilisant la balise img src et non la balise img data-src :
<img src=”myimg.png” />
Préférez le rendu côté serveur
Assurez-vous que le contenu de votre site Web est disponible sur le serveur indépendamment du navigateur de l’utilisateur.
Assurez-vous que votre HTML rendu contient tout le contenu important que vous souhaitez afficher
Le HTML rendu doit avoir le titre, les méta-robots, les méta-descriptions, les images, les données structurées et les balises canoniques corrects.
Rendre votre site Web JavaScript convivial pour le référencement
Pour tester l’implémentation de JavaScript SEO sur votre page Web, vous pouvez suivre les étapes ci-dessous :
- Sachez combien de JavaScript votre site Web utilise : Pour cela, vous pouvez simplement désactiver JavaScript sur votre navigateur. Si vous ne voyez pas beaucoup de contenu, cela signifie que votre site Web repose en grande partie sur JavaScript.
- Vérifiez si Googlebot obtient tous les contenus et balises importants : vous pouvez utiliser le Outil de test adapté aux mobiles de Google ou l’outil de test des résultats enrichis pour vérifier comment Googlebot utilise le code HTML brut pour afficher le contenu.
- Vous pouvez également utiliser des extensions chromées telles que Afficher la source rendue pour comprendre comment JavaScript modifie la page et compare le HTML source et celui rendu.
- Vous pouvez vérifier les balises importantes (titre, méta description, etc.) sur le HTML rendu en utilisant le Extension SEO Pro pour Chrome.
Conclusion
Dans cet article, nous avons appris comment JavaScript peut rendre la gestion du référencement un peu complexe et les approches pour résoudre les problèmes potentiels causés par l’ajout de beaucoup de JavaScript à votre code.
Nous avons également vu quelques meilleures pratiques et outils pour rendre votre site Web JavaScript convivial pour le référencement. D’autres excellents outils qui aident Google à reconnaître et à explorer votre contenu dynamique sont Prerender, AngularJSet Huckabuy.
Vous pouvez également consulter certaines des meilleures façons de réduire le temps de chargement du site Web.
Vous avez apprécié la lecture de l’article ? Que diriez-vous de partager avec le monde ?