Gatsby est un outil générateur de sites statiques 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 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.
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 }) => (
<Helmet>
<title>{title}</title>
<meta name="description" content={description} />
</Helmet>
);Tout comme une voiture classique peut devenir une voiture puissante en ajoutant des équipements mécaniques, le composant SEO 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ées 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.
<Helmet>
<script type="application/ld+json">
{JSON.stringify({
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "Titre de l'article",
"image": "URL de l'image",
"author": "Nom de l'auteur",
"datePublished": "2022-01-01"
})}
</script>
</Helmet><Helmet>
<meta property="og:title" content="Titre de l'article" />
<meta property="og:description" content="Description de l'article" />
<meta property="og:image" content="URL de l'image" />
<meta name="twitter:card" content="summary_large_image" />
</Helmet>Données structurées
Les données structurées sont des éléments codés qui, de par leur balisage, donnent des informations pré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, 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 utilisateur.Vous souhaitez ajouter des scripts de type application/ld+json à votre site internet ? Utilisez react-helmet.
<Helmet>
<script type="application/ld+json">
{JSON.stringify({
"@context": "https://schema.org",
"@type": "Event",
"name": "Conférence sur le SEO",
"startDate": "2023-05-01T20:00",
"location": {
"@type": "Place",
"name": "Centre de conférence de Paris",
"address": "123 Rue de Paris, Paris, France"
}
})}
</script>
</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 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.
Maillage interne
Le maillage interne est une technique informatique donnant de la puissance à un contenu web. On parle en langage SEO de netlinking. 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";
<Link to="/about/">À propos de nous</Link>Pour réussir votre maillage interne, nous vous délivrons quelques recommandations :
- Inclure des liens contextuels dans votre contenu va renforcer sa pertinence auprès des internautes et des moteurs de recherche.
- Contrôler la validité des liens. Un lien rompu est néfaste pour votre référencement et pour l’expérience utilisateur.
- Sélectionner une ancre informative plus puissante qu’une ancre générique.
- Faciliter la navigation des utilisateurs en structurant votre site par rapport à la page d’accueil. Les moteurs de recherche procéderont ainsi à une indexation 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";
<Img fluid={data.file.childImageSharp.fluid} alt="Description de l'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 alt et SEO
Un attribut alt est un élément indissociable de l’identification des images par les moteurs de recherche, même avec Gatsby.
<Img fluid={data.file.childImageSharp.fluid} alt="Un paysage montagneux au coucher du soleil" />Lazy Loading 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 <head> ( descriptions, méta, titres, etc.) qui inclut le contenu de la bibliothèque react-helmet.
import { Helmet } from "react-helmet";
const PageComponent = () => (
<div>
<Helmet>
<title>Titre de la page</title>
<meta name="description" content="Description de la page" />
</Helmet>
{/* Reste du composant */}
</div>
);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.
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 = () => (
<div>
<Helmet>
<link rel="alternate" hreflang="en" href="https://www.example.com/en/page" />
<link rel="alternate" hreflang="fr" href="https://www.example.com/fr/page" />
{/* ... autres langues ... */}
</Helmet>
{/* Reste du composant */}
</div>
);- gatsby-plugin-hreflang:
Les balises hreflang 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.js.
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 roi”.
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êtes 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.