How To add Open Graph Social Metadata to Next.js using WordPress

Join The JS Discord

A chill community of Javascript hackers, pair programming, product launching and learning together

If you've seen my post on linking up the WordPress API with Next.js to create a headless CMS blog then this is for you.

Previous Problems

React doesn't index well by itself. There's a whole tonne of workarounds to get the whole shebang working and OG sharable image is one of those problems.

When you share a link on social media, a lot of websites will have something like this...

Unfortunately when working with bare bones React.js you get NOTHING!

Default OG image sharing

First thing we need is to use Next/head to inject content into the head element of our rendered pages.

import Head from "next/head";

I decided to break the next parts into components because things were looking super messy and hard to read for me.

I set up a default (general) OG component and passed in the props that I'm receiving from getStaticProps(). This includes all the parts of my wordpress post like titles, content, excerpts, featured images etc - The featured image part is important - makes life easier later.

  {/* default deets */}
  <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  <meta name="description" content={content.acf.excerpt} />
  <meta charSet="utf-8" />

  {/* OG Sharing Deets */}

  {/* Twitter Sharing Deets */}

  {/* regular title */}

We then have a separate component for the Twitter card, because.... Twitter - The set up is slightly different.

Default OG component

Typical component but for Social sharing we need a couple of meta tags as you can see below.

const GeneralHead = ({ description, ogUrl, ogImage, ogTitle }) => {
  return (
      <meta property="og:url" content={ogUrl} key="ogurl" />
      <meta property="og:image" content={ogImage} key="ogimage" />
      <meta property="og:site_name" content="Calvin Torra" key="ogsitename" />
      <meta property="og:title" content={ogTitle} key="ogtitle" />
      <meta property="og:description" content={description} key="ogdesc" />

export default GeneralHead;

Twitter OG component

Twitter is a little bit different. We need to add the content creator as

const TwitterHead = ({ description, ogUrl, ogImage, ogTitle }) => {
  return (
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:site" content="@Gr8087" />
      <meta name="twitter:title" content={ogTitle} />
      <meta name="twitter:description" content={description} />
      <meta name="twitter:creator" content="@Gr8087" />
      <meta property="og:url" content={ogUrl} />
      <meta name="twitter:image" content={ogImage} />

export default TwitterHead;

Because these images are already hosted elsewhere AND we have the full url to those images. Using them in the OG sharing component is as simple as pasting the link.