React SEOmatic
React helper components for Craft’s SEOmatic plugin.
Install
npm i react-seomatic
Usage
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.
GraphQL example
{
# ↓ ↓ ↓ ↓ ↓
seomatic (uri: "/", asArray: true) {
metaTitleContainer
metaTagContainer
metaLinkContainer
metaScriptContainer
metaJsonLdContainer
metaSiteVarsContainer
}
}Simple example
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>
)Next.js
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} />
</>
)
}Components
The library’s built up of several components that allow flexibility and control where needed.