Gatsby et JavaScript pour le SEO : le guide complet

Gatsby est un outil [générateur de sites statiques](https://www.gatsbyjs.com/docs/glossary/static-site-generator/) basé sur **JavaScript React** qui bénéficient de performances en termes de conception technique mais également de référencement SEO. Depuis l’arrivée de Gatsby, différencier un site statique d’un site dynamique est devenu complexe. Google et ses concurrents ont toujours privilégié les sites dotés d’une rapidité de téléchargement tels que les sites statiques jugés plus performants. [Interpréter correctement JavaScript](https://agence-slashr.fr/blog/javascript-et-seo-bonnes-pratiques-et-erreurs-a-eviter/) n’a pas toujours été simple et les experts avaient tendance à le déconseiller fut un temps. Aujourd’hui, les choses ont évolué favorablement et Google est en mesure d’interpréter correctement l’outil JavaScript. Notez que tous les moteurs de recherche ne bénéficient pas des compétences du géant Google.  La vitesse d’indexation étant complètement aléatoire, il faut parfois du temps pour indexer un contenu dynamiquement généré.  En générant des pages statiques, Gatsby renforce l’accessibilité aux robots d’exploration. La capacité d’interprétation de JavaScript ne rentre plus en ligne de compte. Vous souhaitez faire une refonte de votre site en utilisant Gatsby ? Profitez de notre [accompagnement SEO à la refonte de sites web](https://agence-slashr.fr/seo/prestations/refonte-seo/). ## Gatsby et ses composants SEO Pour être opérationnel d’un point de vue référencement, Gatsby a intégré des composants spécifiques SEO. Citons par exemple react-helmet qui gère les balises méta de manière efficace tout en laissant une large possibilité d’amélioration. ``` import React from "react"; import { Helmet } from "react-helmet"; const SEO = ({ title, description }) => ( ); ``` Tout comme une voiture classique peut devenir une voiture puissante en ajoutant des équipements mécaniques, le **composant SEOSearch Engine Optimization. Ensemble des techniques visant à améliorer le positionnement d'un site web dans les résultats naturels des moteurs de recherche. de Gatsby** a le pouvoir de développer son niveau d’optimisation de manière forte et concrète. L’intégration de données structuréesCode ajouté au HTML pour aider les moteurs à comprendre le contenu et générer des rich snippets. est l’exemple type de **solutions d’améliorations de visibilité** tout comme les balises meta spécifiques face au contenu des médias sociaux. Plus de risques de voir apparaître, lors du partage d’une publication, un contenu totalement différent de celui d’origine. ``` ``` ``` ``` ## Données structurées **Les données structurées** sont des éléments codés qui, de par leur balisage, donnent des informations prAlgorithme historique de Google évaluant l'importance d'une page selon ses backlinks. Toujours utilisé en interne.écises aux moteurs de recherche. Mieux analysées, les données sont ensuite mieux classifiées.  On peut ainsi voir apparaître dans les résultats de recherche, des **extraits enrichis** qui apportent une valeur supplémentaire aux données : nombre d’avis clientsÉvaluations laissées par les clients sur Google Business Profile. Facteur de ranking local., note globale donnée par les internautes, nombre d’étoiles attribuées, etc. Gatsby facilite grandement l’intégration de données structurées afin d’améliorer toujours **l’expérience utilisateurUser Experience. Qualité de l'expérience vécue par un utilisateur sur un site. Facteur de ranking indirect..**Vous souhaitez ajouter des scripts de type application/ld+json à votre site internet ? Utilisez react-helmet. ``` ``` Vous souhaitez informer d’un événement à venir ? Utilisez les données structurées comme dans l’exemple ci-dessous :  Le code lié aux données structurées doit répondre à un formatage précis. Utilisez  l’[outil de test des données structurées](https://search.google.com/structured-data/testing-tool) proposé par Google afin d’éviter une mauvaise interprétation de la part du moteur de recherche.   Les données structurées permettent de clarifier et structurer des informations de manière à apporter :  - Une meilleure visibilité du contenu sur le net. - Une lisibilité agréable et confortable aux lecteurs.  - Une interaction active avec les internautes. Gatsby rend le processus de classification simple et accessible tout en restant technique.  Besoin d'aide ? Faites appel à une [agence SEO technique](https://agence-slashr.fr/seo/prestations/seo-technique/). ## Maillage interneEnsemble des liens entre les pages d'un même site. Distribue le jus SEO et guide les utilisateurs. **Le maillage interne** est une technique informatique donnant de la puissance à un contenu web. On parle en langage SEO de **netlinkingStratégie d'acquisition de backlinks de qualité pour renforcer l'autorité d'un site.**. Il s’agit d’insérer des liens internes entre les différentes pages du site. Un bon maillage interne apporte une qualité de navigation et la garantie d’un meilleur référencement. Pour booster l’efficacité du maillage et améliorer l’expérience utilisateur de manière significative, Gatsby propose le composant Link. ``` import { Link } from "gatsby"; À propos de nous ``` Pour réussir votre maillage interne, nous vous délivrons quelques recommandations :  1. Inclure des liens contextuels dans votre contenu va renforcer sa pertinence auprès des internautes et des moteurs de recherche. 2.  Contrôler la validité des liens. Un lien rompu est néfaste pour votre référencement et pour l’expérience utilisateur. 3.  Sélectionner une ancreTexte cliquable d'un lien hypertexte. Doit être descriptif et pertinent. informative plus puissante qu’une ancre générique.  4. Faciliter la navigation des utilisateurs en structurant votre site par rapport à la page d’accueil. Les moteurs de recherche procéderont ainsi à une indexationProcessus par lequel Google ajoute une page à sa base de données pour qu'elle puisse apparaître dans les résultats. plus juste des pages.  ## Optimisation des images dans Gatsby pour le SEO Grâce à des plugins évolués, Gatsby assure une optimisation de qualité à vos images. ### Gatsby Image et Sharp Le plugin gatsby-image associé avec le plugin gatsby-transformer-sharp combine à la fois le traitement et l’optimisation de vos images. ``` import Img from "gatsby-image"; ``` Plusieurs tailles d’images sont soumises afin de vous laisser le choix de la version la plus qualitative. Avec un format adapté à chaque type de contenu, le temps de chargement est réduit. ### Formats d'image modernes avec WebP Le format WebP est largement utilisé aujourd’hui de par sa qualité et son niveau de compression. Gatsby, grâce à gatsby-plugin-webp convertit simplement vos images au format WebP. ### Attribut altAttribut HTML décrivant le contenu d'une image pour les moteurs de recherche et l'accessibilité. et SEO Un attribut alt est un élément indissociable de l’identification des images par les moteurs de recherche, même avec Gatsby. ``` ``` ### Lazy LoadingTechnique chargeant les images et médias uniquement lorsqu'ils deviennent visibles à l'écran. natif Le plugin gatsby-image intègre le « lazy loading ». Les images sont ainsi chargées une fois visibles à l’écran. Les performances et la vitesse de chargement de la page n’en sont que meilleures. ## Les plugins gatsby essentiels pour le SEO Gatsby vous propose d’installer différents plugins dont certains sont incontournables pour votre optimisation SEO et votre référencement. ### `gatsby-plugin-react-helmet` C’est un plugin de gestion de balises ( descriptions, méta, titres, etc.) qui inclut le contenu de la bibliothèque react-helmet. ``` import { Helmet } from "react-helmet"; const PageComponent = () => ( ); ``` ### `gatsby-plugin-sitemap` Ajouté au fichier gatsby-config.js, le plugin conçoit le sitemap de votre site Gatsby. ``` module.exports = { plugins: [`gatsby-plugin-sitemap`], }; ``` ### `gatsby-plugin-robots-txt` Une fois le plugin configuré dans gatsby-config.js, vous pouvez avoir un regard sur l’exploration et l’indexation de vos pages de site. ``` module.exports = { plugins: [ { resolve: 'gatsby-plugin-robots-txt', options: { policy: [{ userAgent: '*', allow: '/' }] } } ], }; ``` ### `gatsby-plugin-canonical-urls` La génération d’URL canoniques est incontournable pour éviter tout souci lié au duplicate content. Installlez et configurez gatsby-config.js sur votre site.  ``` module.exports = { plugins: [ { resolve: `gatsby-plugin-canonical-urls`, options: { siteUrl: `https://www.votresite.com`, }, }, ], }; ``` Quelques autres plugins intéressants :  **gatsby-plugin-offline**  Ajouté à l’application Progressive Web App (PWA), ce plugin contribue à améliorer le référencement de votre site, son temps de chargement et sa compétitivité. **gatsby-plugin-manifest**  En liant le plugin avec  gatsby-plugin-offline, vous pourrez modifier le visuel de votre site pour une consultation de qualité sur mobile.  **gatsby-plugin-google-analytics**  Un plugin d’analyse de performances bien utile pour établir une véritable stratégie SEO en fonction des données relevées. **gatsby-plugin-preact**   Un plugin à installer à la construction du site pour la partie production. Bénéfique pour la vitesse de chargement. **gatsby-plugin-image**  Réservé à tout ce qui se rattache aux images, le plugin présente un niveau de performance élevé. **gatsby-plugin-advanced-sitemap**  Plus développé que la version classique, ce plugin de gestion de sitemaps offre des particularités telles que la segmentation. Vous souhaitez faire décoller votre référencement naturel ? Faites appel à une [agence SEO lilloise](https://agence-slashr.fr/seo/). ## La gestion du SEO multilingue avec Gatsby Dans l'écosystème Gatsby, il existe plusieurs solutions pour gérer le multilinguisme et l'intégration de la balise `hreflang`. - gatsby-plugin-intl Internationalisation simplifiée, traduction de texte, changement de langue et génération d’URL spécifiques sont les atouts de ce plugin - hreflang et react-helmet L’association des deux plugins permet de profiter du multilinguisme de votre site tout en vous assurant d’avoir des balises d’en-tête appropriées. ``` import { Helmet } from "react-helmet"; const PageComponent = () => ( ); ``` - gatsby-plugin-hreflang: Les balises hreflangAttribut HTML indiquant la langue et la région ciblée d'une page pour le SEO international. sont ajoutées automatiquement sur les pages de votre site. Pratiques pour la gestion d’un gros volume de pages dans plusieurs langues. - Stratégies manuelles Une configuration manuelle est toujours possible si tous ces plugins ne vous conviennent pas. Pour cela, testez le plugin gatsby-node.jsLangage de programmation web. Son mauvais usage peut bloquer l'indexation par les moteurs de recherche.. ## L'importance du contenu pour le SEO S’il y a une chose qui n’a pas changé dans le domaine du SEO c’est que **“le contenu est roiReturn on Investment. Retour sur investissement d'une action SEO.”.** Un contenu de qualité satisfait autant les moteurs de recherche que les utilisateurs. Google ainsi que tous les moteurs de recherche n’ont qu’un seul but : fournir des résultats de recherche au plus près des requêtesTerme ou expression que les utilisateurs saisissent dans un moteur de recherche. Base de toute stratégie SEO. des internautes. **La pertinence, le point fort du SEO.** Plus votre contenu est clair, original, intéressant et structuré, plus les moteurs de recherche lui donneront de la valeur en le référençant favorablement. Gatsby est capable de réunir diverses sources de contenu que ce soit des fichiers Markdown, de CMS ou de simples bases de données. En veillant à ce que votre site respecte une architecture logique et limpide, la navigation de l’utilisateur sera facilitée et votre site sera mieux référencé. Publier du contenu, en rapport avec les questions des internautes, encourage l’engagement et le partage.