Storybook showcase

Section

SEO component is a new way to add SEO content to pages. The goal of this component is to have a dedicated component instead of complex Header component. That component is also a way to improve performance and SEO efficiency.

How to use SEO component?

SEO component needs to be used with LayoutWithoutHead component (and vice versa)

If you are using classic Layout component there is a risk to define SEO properties twice

Parameters

noindex (optional) : add noindex meta tag to the page
customCanonical (optional) : add custom canonical link to the page
meta : add meta tags to the page
hreflangs : add hreflangs to the page


            // At the top of the page
            export const Head = () => {
            return (
                <Seo
                noindex
                customCanonical="/liberty/"
                hreflangs={[
                    { lang: 'fr', href: 'https://www.assoconnect.com/' },
                    { lang: 'en-us', href: 'https://www.springly.org/en-us/' },
                ]}
                meta={{
                    title:
                    "L'outil en ligne qui facilite la vie des responsables d'associations | AssoConnect",
                    description:
                    'llll➤ Collectes de paiement, comptabilité, gestion des membres et communication. Comme plus de 40 000 associations, adoptez AssoConnect !',
                }}
                />
            )
            }

            // In the page
            const IndexPage = () => {
            return (
                <LayoutWithoutHead headerBackgroundColor="clearBlue">
                ...
            )}