CalvinTorra

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


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.

<Head>
  {/* 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 */}
  <GeneralHead
    description={content.acf.excerpt}
    ogUrl={currentURL}
    ogImage={content.acf.Featured_Image}
    ogTitle={content.title.rendered}
  />

  {/* Twitter Sharing Deets */}
  <TwitterHead
    description={content.acf.excerpt}
    ogUrl={currentURL}
    ogImage={content.acf.Featured_Image}
    ogTitle={content.title.rendered}
  />

  {/* regular title */}
  <title>{content.title.rendered}</title>
</Head>

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 well….you.

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.