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.

Keywords

FAQs

What is react-seomatic?

Is react-seomatic popular?

Is react-seomatic well maintained?

Last updated on 15 Dec 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install