Gérer le SEO

19 octobre 2021

Le sitemap

Il existe un plugin déjà tout prêt sur Gatsby pour générer le sitemap.

yarn install gatsby-plugin-sitemap

Source : https://www.gatsbyjs.com/plugins/gatsby-plugin-sitemap/

A noter que le sitemap ne se génère qu'avec la commande build de Gatsby, et le chemin pour accéder au sitemap générer est le suivant : http://localhost:9000/sitemap/sitemap-index.xml si vous utilisez la commande serve pour lancer le serveur de production qui par défaut est sur le port 9000.

Les meta

Il existe un plugin qui permet d'ajouter des éléments dans le

<head>

ou se situe les Meta-Tags.

Installons-le :

yarn add gatsby-plugin-react-helmet react-helmet

Puis l'ajouter dans notre tableau de plugins dans le fichier de config.

plugins: [`gatsby-plugin-react-helmet`]

Ensuite nous allons découper nos besoins de seo sous la forme de composant React que nous importerons et auxquels nous fournirons des données soit globales, soit au cas par cas.

Source : https://www.gatsbyjs.com/docs/add-seo-component/

/* src/components/seo.js */
import React from "react";
import { Helmet } from "react-helmet";
import { useLocation } from "@reach/router";
import { useStaticQuery, graphql } from "gatsby";

const SEO = ({ title, description, image, article, url }) => {
  const { pathname } = useLocation()
  const { site } = useStaticQuery(query)
  const {
    defaultTitle,
    defaultDescription,
    siteUrl,
    defaultImage,
    twitterUsername,
  } = site.siteMetadata
  const seo = {
    title: title || defaultTitle,
    description: description || defaultDescription,
    image: `${siteUrl}${image || defaultImage}`,
    url: `${siteUrl}${pathname}`,
  }
  return (
    <Helmet title={seo.title}>
      <link rel="canonical" href={seo.url} />
      <meta name="description" content={seo.description} />
      <meta name="image" content={seo.image} />
      {seo.url && <meta property="og:url" content={seo.url} />}
      {(article ? true : null) && <meta property="og:type" content="article" />}
      {seo.title && <meta property="og:title" content={seo.title} />}
      {seo.description && (
        <meta property="og:description" content={seo.description} />
      )}
      {seo.image && <meta property="og:image" content={seo.image} />}
      <meta name="twitter:card" content="summary_large_image" />
      {twitterUsername && (
        <meta name="twitter:creator" content={twitterUsername} />
      )}
      {seo.title && <meta name="twitter:title" content={seo.title} />}
      {seo.description && (
        <meta name="twitter:description" content={seo.description} />
      )}
      {seo.image && <meta name="twitter:image" content={seo.image} />}
    </Helmet>
  )
}
export default SEO

const query = graphql`
  query SEO {
    site {
      siteMetadata {
        defaultTitle: title
        defaultDescription: description
        siteUrl: url
        defaultImage: image
        twitterUsername
      }
    }
  }
`

Dans notre fichier gatsby-config.js nous allons rajouter quelques informations dans l'objet siteMetadata afin d'avoir des valeurs par défaut sur tout notre site :

siteMetadata: {
    siteUrl: "http://localhost:9000/",
    title: "My Gatsby Site",
    twitterUsername: "",
    image: `${__dirname}/src/images/icon.png`,
    url: `http://local.9.d9-test.com/`,
  },

De manière générale vous pourrez alimenter cet objet si vous souhaitez passer de nouvelles valeurs par défaut à notre composant seo.js.

La dernière étape consiste à inclure notre composant dans une page.

Dans notre fichier pages/index.js nous allons ajouter notre composant SEO entre les balises

<Layout><Layout/>

/* src/pages/index.js */
...
<Layout>
	<SEO 
    	title={data.nodePage.title}
    	description="Ceci est la meta description de ma page d'accueil"
	/>
	...
</Layout>

Ainsi à tout moment sur chacune de vos pages vous pourrez soit choisir de surcharger les données, soit de ne fournir aucune valeur et le composant SEO chargera les valeurs de votre objet siteMetaData de votre fichier gatsby-config.js.

Les données structurées

Pour afficher les données structurées nous allons reprendre le même principe, nous allons créer notre propre composant JsonLD.

/* src/components/JsonLd.js */
import React from 'react'
import Helmet from 'react-helmet'

export function JsonLd({ children }) {
  return (
    <Helmet>
      <script type="application/ld+json">{JSON.stringify(children)}</script>
    </Helmet>
  )
}

Et voici un exemple d'utilisation :

/* src/pages/index.js */
<Layout>
	<SEO
    	title={data.nodePage.title}
        description="Ceci est la meta description de ma page d'accueil"
    />
    <JsonLd>
    {{
    	'@context': 'https://schema.org',
        '@type': 'Organization',
        url: 'http://www.example.com',
        name: 'My website',
        contactPoint: {
       		'@type': 'ContactPoint',
            telephone: '+1-401-555-1212',
            contactType: 'Customer service',
          },
   }}
   </JsonLd>
    ...
</Layout>