Meilleures pratiques de référencement (SEO) en JavaScript

-

JavaScript est un langage de programmation répandu, utilisé par plus de 80 % des magasins renommés aux États-Unis. Il existe cependant des processus et des problèmes uniques qui peuvent survenir avec les sites Web JavaScript de référencement. Il est donc essentiel d’adhérer aux meilleures pratiques à tout moment.

La relation entre le référencement et JavaScript est un sujet qui a été longtemps débattu. Comprendre les bases du référencement est devenu une tâche essentielle pour les professionnels du référencement. La plupart des sites Web en développement utilisent JavaScript comme langage de programmation. Il utilise d’excellents cadres pour construire des pages Web et contrôler les différents éléments de la page.

Les frameworks JavaScript ont d’abord été mis en œuvre du côté client uniquement, alors que le rendu côté client posait de nombreux problèmes. Ils ont récemment été intégrés dans le logiciel hôte et du côté serveur des serveurs Web afin de minimiser les problèmes. En outre, cette initiative a ouvert la voie à l’association de JavaScript aux pratiques de référencement afin de renforcer la valeur des pages Web écrites en JavaScript pour les moteurs de recherche.

Comme j’ai récemment été amené à répondre à ces questions dans mon travail. Je vous partage les détails de mes connaissances à l’heure actuel sur le site.

JavaScript SEO – Qu’est-ce que c’est ?

Le référencement JavaScript se concentre sur l’optimisation des sites Web construits avec JavaScript pour qu’ils soient visibles dans les moteurs de recherche. Il s’agit principalement d’optimiser le contenu, de veiller à ce que les pages Web soient repérables par les moteurs de recherche en utilisant les meilleures pratiques, d’améliorer le temps de chargement des pages, etc. Voyons d’abord comment le moteur de recherche Google traite JavaScript.

Image Source: developers.google.com

Pour un web moderne, JavaScript est essentiel, car il le rend évolutif et plus facile à maintenir. Le référencement JavaScript s’intéresse principalement aux points suivants :

  • La prévention, le dépannage et le diagnostic des problèmes de classement pour les applications à page unique et les sites Web construits sur des frameworks JavaScript, qui comprennent Angular, React et Vue.
  • Optimisation du contenu injecté par JavaScript pour le rendu, l’exploration et l’indexation par les moteurs de recherche.
  • Amélioration des temps de chargement des pages exécutant du code JavaScript pour une expérience utilisateur rationalisé.
  • S’assurer que les pages web sont découvrables par les moteurs de recherche en suivant les meilleures pratiques.

Problèmes de référencement JavaScript

Navigation

Avec JavaScript SEO, la navigation du site web n’est pas explorable. Cela signifie que les liens de navigation ne sont pas en conformité avec les normes du web ; ainsi, Google ne pourrait pas les voir ou les suivre, car :

  • L’autorité au sein du site Web n’est pas distribuée de manière appropriée.
  • Il est plus difficile pour Google de découvrir les pages internes.
  • L’établissement des relations entre les pages du site Web n’est pas clair.

Il en résulte un site Web avec des liens que Google n’a pas pu suivre. Voici un exemple tiré de Searchenginejournal sur un problème de navigation.

Image Source: searchenginejournal.com

Liens internes

Outre l’injection de contenu dans le DOM, JavaScript peut également avoir un impact sur la capacité d’exploration des liens. L’exploration des liens sur les pages permet à Google de découvrir de nouvelles pages. Google recommande spécifiquement comme meilleure pratique de lier les pages avec des balises d’ancrage HTML avec des attributs href et d’inclure également des textes d’ancrage descriptifs pour les hyperliens.

Google ne navigue pas d’une page à l’autre comme le ferait un utilisateur normal. Au lieu de cela, il télécharge une version de la page sans état, ce qui signifie qu’il ne capte pas les modifications apportées à une page, qui dépendent de ce qui se passe sur la page précédente. Le lien est-il affecté par cela ?

Oui. Si les liens dépendent d’une action, Google sera incapable de trouver le lien particulier et ne pourra pas trouver toutes les pages du site Web. Voici un exemple de mauvaise pratique en matière de liens.

<a onclick=”goTo(‘page’)”>non, pas de href</a>
<a href=”javascript:goTo(‘page’)”>non, le lien manquant</a>
<a href=”javascript:void(0)”>non, le lien manquant</a>

Rendu côté client

Les sites Web construits avec React, Angular, Vue et d’autres frameworks JavaScript sont tous définis par défaut comme un CSR ou un rendu côté client. Cependant, le problème est que les crawlers de Google ne peuvent pas voir ce qui se trouve sur la page ; ils ne verront qu’une page blanche. Regardez l’exemple ci-dessous, tiré de la conférence I/O de Google.

Une solution consiste à utiliser un choix plus traditionnel, le rendu côté serveur ou SSR. Cependant, lorsque vous utilisez le SSR, vous risquez de perdre les avantages en termes d’expérience utilisateur que vous ne pouvez obtenir qu’avec le CSR. Il est recommandé d’utiliser le prérendu, qui vérifie chaque agent utilisateur qui demande une page.

Lorsque vous comprenez comment fonctionne le rendu côté client, il devient plus facile de voir pourquoi les problèmes d’optimisation des moteurs de recherche se produisent. Pour le rendu côté serveur, le rendu dynamique est une solution alternative et viable pour servir un site Web aux utilisateurs avec un contenu JavaScript généré dans le navigateur mais une version statique de Googlebot. Voici comment fonctionne le rendu dynamique.

Image Source:developers.google.com

Vous pouvez lire aussi mon article plus détaillé sur le sujet : Client-Side Rendering (CSR) vs Server-Side Rendering (SSR)

Duplication de contenu

Il existe une possibilité de plusieurs URL pour le même contenu avec JavaScript, ce qui pourrait causer des problèmes de duplication de contenu. La duplication peut être causée par des identifiants, des majuscules, des paramètres avec des identifiants, etc. La duplication du contenu pourrait être éliminée du HTML téléchargé avant qu’il ne soit envoyé au rendu.

La réponse HTML avec les modèles de coquilles d’applications montre très peu de contenu et de code. Chaque page du site web pourrait afficher le même code, qui pourrait être le même code affiché sur plusieurs sites web.

Dans certains cas, les pages peuvent être considérées comme des doublons et ne seront pas envoyées immédiatement au rendu. Le pire est que le mauvais site Web ou une mauvaise page pourrait apparaître dans les résultats de recherche. Ce problème finira par se résoudre de lui-même, mais il peut poser des problèmes, en particulier pour les sites Web récents.

Si vous utilisez l’ancien système d’exploration AJAX, n’oubliez pas qu’il est déjà déprécié et qu’il n’est donc plus pris en charge.

Meilleures pratiques JavaScript SEO

Les meilleures pratiques permettent de tirer le meilleur parti de JavaScript SEO. Quelles sont ces meilleures pratiques ? Découvrons-les.

Rendu côté serveur

Le rendu côté serveur est le processus de récupération d’une page Web, de lancement du code et d’évaluation de la conception et de la structure d’une page. En outre, le rendu peut s’effectuer de plusieurs manières : côté serveur, côté client et dynamique. Le SSR ou rendu côté serveur est le processus de rendu des pages Web via vos propres serveurs.

Exemple de code de site Web avec SSR

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Exemple de site Web avec rendu côté serveur</title>
  </head>
  <body>
    <h1>Site de démonstration</h1>
    <p>Voici un exemple de nouveau site web SSR</p>
    <p>Ceci n'est qu'un site de demonstration.html</p>
  </body>
</html>

Dans le CSR, le processus est accompli par le navigateur de l’utilisateur. Le rendu dynamique, quant à lui, s’effectue par le biais d’un serveur tiers. L’avantage le plus important du rendu est la rapidité avec laquelle les pages peuvent être rendues. Le rendu côté serveur garantit également que tous les éléments de la page sont rendus.

Indexation du contenu JavaScript

L’indexation du contenu JavaScript par Google est l’un des problèmes techniques les plus courants en matière de référencement. L’utilisation de JavaScript sur le Web se développe rapidement, et de nombreux sites Web ont du mal à générer une croissance organique. Regardez ce que John Mueller de Google dit à propos des sites Web injectés en JS.

Lorsque vous travaillez sur des sites Web développés avec des frameworks JavaScript, vous êtes inévitablement confronté à divers problèmes pour ceux qui utilisent WordPress et d’autres plateformes de systèmes de gestion de contenu populaires. Néanmoins, pour réussir dans les moteurs de recherche, vous devez savoir précisément comment vérifier si les pages du site peuvent être indexées et rendues, déterminer les problèmes et les rendre compatibles avec les moteurs de recherche. Vous pouvez utiliser des outils comme screaming frog ou vérifier le statut de Google dans la console de recherche de Google.

Erreurs 404 dans les applications à page unique (Single-Page Apps ou SPA)

Lorsqu’il s’agit d’applications à page unique, évitez d’utiliser des erreurs 404 logicielles. Pensez plutôt à rediriger vers une page non trouvée lorsque vous rencontrez une erreur 404 lors de requêtes HTTP. De cette façon, Google saura qu’il s’agit d’une page 404.

Exemple d’une redirection correcte avec cette approche.

fetch(`/api/article/${articleId}`)
.then((response) => response.json())
.then((article) => {
  if (!article.exists) {
    window.location.href = '/not-found';
  }

  showItem(article); 
})

Codes d’état HTTP (Status Codes)

Pensez à utiliser des codes d’état HTTP significatifs, car Google les utilise pour savoir si quelque chose ne va pas lors de l’exploration d’une page. Utilisez un code d’état significatif, tel que 404, pour une page introuvable afin d’indiquer à Googlebot qu’une page ne peut être indexée ou explorée. Les codes HTTP peuvent également être utilisés pour indiquer à Googlebot si une page a été déplacée vers une nouvelle URL, afin que l’index soit mis à jour en conséquence.

Conclusion

Pour garantir le succès des sites Web, en particulier des sites commerciaux, il est primordial de s’assurer que le public peut accéder au contenu et le lire. Google a classé les pages en tête des moteurs de recherche pour en faciliter l’accès. Il y a suffisamment de technologie pour s’assurer que le site Web est superbe.

Cependant, la visibilité du site sera réduite au centuple si les moteurs de recherche ne peuvent pas accéder à ce contenu. Ainsi, le référencement doit fonctionner et s’adapter aux limitations techniques afin de stimuler le trafic et la visibilité pour la rentabilité de l’entreprise.

Alfredhttps://www.alfreddagenais.com
Je suis un développeur Web Full Stack sénior. Chaque jour est pour moi une journée de plus pour découvrir de nouvelles idées. Le développement web et l'informatique sont omniprésents dans mon quotidien. Pour que la créativité soit à son maximum, il ne faut pas avoir peur d’expérimenter et nous avons tous que le Web est infiniment grand pour expérimenter nos idées.

Share this article

Recent posts

Popular categories

LAISSER UN COMMENTAIRE

S'il vous plaît entrez votre commentaire!
S'il vous plaît entrez votre nom ici

Recent comments