Skip to content
This repository has been archived by the owner on Nov 22, 2024. It is now read-only.

Latest commit

 

History

History
74 lines (55 loc) · 1.9 KB

README.md

File metadata and controls

74 lines (55 loc) · 1.9 KB

Important

This repository is no longer maintained.

Note

If you’re using the Next.js App Router, please use next-seomatic instead, which has support for the new metadata handling.

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

Note If you’re using the App Router, please use next-seomatic instead, 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} />
    </>
  )
}

Components

The library’s built up of several components that allow flexibility and control where needed.