Grab The Guides
Grab The Ultimate Guide To Headless Wordpess and Next.js
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.
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.
Grab The Guides
