Save time with your Jamstack Headless WordPress and Next.js integration. The guide I wish I had when first starting out Here
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.
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!
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.
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 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.