Améliorer le SEO de Gatsby

Pour améliorer le SEO d'un site Gatsby, il existe le plugin helmet qui permet d'overrider les balises meta de votre site :

yarn add -D react-helmet

Ensuite, créez le fichier src/component/seo.js qui génerera toutes les balises meta nécessaires pour un bon référencement :

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

export default ({ title, image, description, article, datePublished, dateModified, tags = [], meta = [] }) => {
    const location = useLocation();

    const { site } = useStaticQuery(graphql`
        query {
            site {
                siteMetadata {
                    title
                    lang
                    logo
                    description
                    author
                    twitter
                    siteUrl
                    siteName
                }
            }
        }
    `);

    const defaultTitle = site.siteMetadata?.title;
    const defaultDescription = site.siteMetadata?.description;

    return (
        <Helmet
            htmlAttributes={{ lang: site.siteMetadata.lang }}
            title={title || defaultTitle}
            meta={[
                {
                    name: 'description',
                    content: description || defaultDescription,
                },
                {
                    property: 'og:url',
                    content: location.href,
                },
                {
                    property: 'og:site_name',
                    content: site.siteMetadata.siteName,
                },
                {
                    property: 'og:title',
                    content: title || defaultTitle,
                },
                {
                    property: 'og:description',
                    content: description || defaultDescription,
                },
                {
                    property: 'og:type',
                    content: article ? 'article' : 'website',
                },
                ...(image ? [{
                    property: 'og:image',
                    content: image,
                }] : []),
                ...(tags ? tags.map((tag) => ({
                    property: 'article:tag',
                    content: tag,
                })) : []),
                {
                    name: 'twitter:title',
                    content: title || defaultTitle,
                },
                {
                    name: 'twitter:creator',
                    content: site.siteMetadata.twitter,
                },
                {
                    name: 'twitter:site',
                    content: site.siteMetadata.twitter,
                },
                {
                    name: 'twitter:description',
                    content: description || defaultDescription,
                },
                ...(image ? [{
                    name: 'twitter:image',
                    content: image,
                }, {
                    name: 'twitter:card',
                    content: 'summary_large_image',
                }] : [{
                    name: 'twitter:card',
                    content: 'summary',
                }]),
            ].concat(meta)}
        >
            <script type="application/ld+json">
                {JSON.stringify({
                    '@context': 'https://schema.org',
                    '@type': article ? 'Article' : 'WebSite',
                    mainEntityOfPage: {
                        '@type': 'WebPage',
                        '@id': site.siteMetadata?.siteUrl,
                    },
                    url: location.href,
                    headline: title || defaultTitle,
                    author: {
                        '@type': 'Person',
                        name: site.siteMetadata.author,
                    },
                    publisher: {
                        '@type': 'Organization',
                        name: site.siteMetadata.author,
                        url: site.siteMetadata?.siteUrl,
                        logo: {
                            '@type': 'ImageObject',
                            url: site.siteMetadata.logo,
                        },
                    },
                    description: description || defaultDescription,
                    ...(image && { image }),
                    ...(dateModified && { dateModified }),
                    ...(datePublished && { datePublished }),
                })}
            </script>
        </Helmet>
    );
};

Vous pouvez gérer les données par défault de votre site dans le fichier gatsby-config.js :

// gatsby-config.js
module.exports = {
    siteMetadata: {
        title: 'Website Title',
        siteName: 'Website Name',
        description: 'Description',
        author: 'author',
        twitter: '@author',
        logo: 'http://example.com/logo.png',
        lang: 'fr',
        siteUrl: 'https://example.com',
    }
};

Vous pouvez Intégrer le composant SEO dans la page de votre choix (ex: index.js) :

// src/pages/index.js
import React from 'react';
import SEO from '../components/seo';

const IndexPage = () => (
    <>
        <SEO />
        <p className="text-red-800">Hello world!</p>
    </>
);

export default IndexPage;

Pour remplacer les balises meta par défaut, vous pouvez ajouter des propriétés au composant <SEO /> :

<SEO
    title="title"
    description="description"
    image="https://example.com/image.png"
    dateModified="2020-01-01T08:00"
    datePublished="2020-01-01T08:00"
    tags={["tag1", "tag2"]}
    article={true}
/>