Adding Open Graph meta tags to the head without react-helmet

NOTE: This info may be out of date. Run a few tests before putting it in production. I tried this other approach, but that has a problem with the fact that the page gets delivered with default metadata then updated via script. The result being that the customized OG social card stuff doesn't show up.

Looking to add metatags to my next.js site, everything I found pointed to react-helmet, but that was throwing the error TKTKTKTKT. There are some work arounds, but I figured there was an easier way.

I ended up using the default `import Head from 'next/head'` and `

The way I did it was to make a new component file at `components/MetaData.js` with the content:

Code

import Head from 'next/head'

export default function MetaData({ description, image, title, type, url }) {
  return (
    <Head>
      <meta charSet="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <title>{title}</title>
      <meta name="description" content={description} />

      <meta property="og:description" content={description} />
      <meta property="og:image" content={image} />
      <meta property="og:title" content={title} />
      <meta property="og:type" content={type} />
      <meta property="og:url" content={url} />

      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:creator" content="@theidofalan" />
      <meta name="twitter:title" content={title} />
      <meta name="twitter:image" content={image} />
    </Head>
  )
}

Then use it in the `pages/index.js` style pages:

Code

return (
    <>
      <MetaData
        description="A game of decryption"
        image="https://monocrack.alanwsmith.com/og-images/monocrack-open-graph-v1.png"
        title="monocrack"
        type="website"
        url="https://monocrack.alanwsmith.com"
      />
      <main>
       <div>Content Goes Here</div>
      </main>
    </>
  )
}

TOOD: Look at the other post about your full set of metadata tags