@stefanprobst/next-page-metadata

Next.js component for adding metadata to pages for search engine optimization.


License
MIT
Install
npm install @stefanprobst/next-page-metadata@1.0.1

Documentation

next-page-metadata

Next.js component for adding metadata to pages for search engine optimization.

How to use

Add <title> and <meta> tags

import { Fragment } from 'react'
import Metadata from '@stefanprobst/next-page-metadata'

export default function Page() {
  const metadata = {
    title: 'Hello world',
  }
  return (
    <Fragment>
      <Metadata {...metadata} />
      <h1>Hello World</h1>
    </Fragment>
  )
}

Add JSON-LD

import { Fragment } from 'react'
import { createJsonLd, JsonLd } from '@stefanprobst/next-page-metadata'

export default function Page() {
  const author = createJsonLd({
    '@type': 'Person',
    name: 'Stefan'
  })
  const article = createJsonLd({
    '@type': 'Article',
    headline: 'Hello World',
    author,
  })
  return (
    <Fragment>
      <Jsonld schema={article}>
      <h1>Hello World</h1>
    </Fragment>
  )
}

When using createJsonLd to create schema objects, provide the @type key to narrow the discriminated union for better intellisense. See schema-dts for details.