React helper components for Craft’s SEOmatic plugin.
Note If you’re using the Next.js App Router, please use
next-seomaticinstead, which has support for the new metadata handling.
npm i react-seomatic
These components expect array from the GraphQL response (i.e. the asArray set to true). Please see the Headless SPA API documentation for how to use this.
{
# ↓ ↓ ↓ ↓ ↓
seomatic (uri: "/", asArray: true) {
metaTitleContainer
metaTagContainer
metaLinkContainer
metaScriptContainer
metaJsonLdContainer
metaSiteVarsContainer
}
}For most use cases, it’s recommended to just pass the containers directly into the Seomatic component as properties.
return (
<body>
{/* … */}
<Seomatic {...entry.seomatic} />
</body>
)Note If you’re using the App Router, please use
next-seomaticinstead, which has support for the new metadata handling.
When using Next.js the Head property is required, otherwise the tags won’t be correctly picked up on client-side navigations. See the next/head documentation for further information on this.
import Head from 'next/head';
function App({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<Seomatic Head={Head} {...pageProps.entry.seomatic} />
</>
)
}The library’s built up of several components that allow flexibility and control where needed.