Introduction
The Open Graph Protocol (https://ogp.me/) allows for parsing of specific metadata that many social networks utilize to create dynamic sharable content. An example of this could be when you share a post on Facebook with a link but when you actually share it, the link is joined with a description, an author, an even a cover photo/picture. We can take it a step further and generate the photo/picture and also populate the other metadata fields. This article will focus on creating dynamic images based on your dynamic pages. I utilize this method deploying to Vercel for this blog on my website (https://kleveland.dev).
Tech used
- NextJS
- Serverless functions (via Vercel/AWS)
Example
https://www.kleveland.dev/posts/create-notion-blog
When I try and share one of my blog posts on Linkedin, you can see it gets populated with a preview image and text. We will go over how that image is generated and how we can customize it.
How It Works
As a starting point, I am going to assume you have some dynamic content/pages in a NextJS application. In my case, I utilize the following files for this blog:
Pages:
- /pages/posts/[slug].tsx
- /pages/posts/open-graph/[slug].tsx
- /pages/api/open-graph-image.ts
Utils:
- /utils/use-open-graph-image.ts
- /utils/utils.ts
The code is actually borrowed heavily from here with a set of adjustments to make it more customizable:
https://playwright.tech/blog/generate-opengraph-images-using-playwright
api/open-graph-image
// path: /pages/api/open-graph-image.ts
import type { NextApiRequest, NextApiResponse } from "next";
import chromium from 'chrome-aws-lambda';
import { chromium as playwrightChromium } from 'playwright-core';
// getAbsoluteURL is in a snippet further down
import { getAbsoluteURL } from 'utils/utils';
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
// Start the browser with the AWS Lambda wrapper (chrome-aws-lambda)
const browser = await playwrightChromium.launch({
args: chromium.args,
executablePath: await chromium.executablePath,
headless: chromium.headless,
})
// Create a page with the Open Graph image size best practise
// 1200x630 is a good size for most social media sites
const page = await browser.newPage({
viewport: {
width: 1200,
height: 630
}
});
// Generate the full URL out of the given path (GET parameter)
const relativeUrl = (req.query["path"] as string) || "";
const url = getAbsoluteURL(relativeUrl)
await page.goto(url, {
timeout: 15 * 1000,
// waitUntil option will make sure everything is loaded on the page
waitUntil: "networkidle"
})
const data = await page.screenshot({
type: "png"
})
await browser.close()
// Set the s-maxage property which caches the images then on the Vercel edge
res.setHeader("Cache-Control", "s-maxage=31536000, stale-while-revalidate")
res.setHeader('Content-Type', 'image/png')
// write the image to the response with the specified Content-Type
res.end(data)
}
getAbsoluteURL
// Gets the URL for the current environment
export const getAbsoluteURL = (path: string) => {
const baseURL = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : "http://localhost:3000"
return baseURL + path
}
use-open-graph-image
import { useRouter } from "next/router";
import { getAbsoluteURL } from "./utils";
export default function useOpenGraphImage() {
const router = useRouter();
const searchParams = new URLSearchParams();
// The [slug] from /posts/[slug] and /posts/open-graph/[slug]
// should be identical.
searchParams.set(
"path",
router.asPath.replace("/posts/", "/posts/open-graph/")
);
// Open Graph & Twitter images need a full URL including domain
const fullImageURL = getAbsoluteURL(`/api/open-graph-image?${searchParams}`);
return { imageURL: fullImageURL };
}
pages/posts/[slug]
Both of these files should generate the same slugs; the open-graph route slug will correspond to the image for the corresponding article from /pages/posts/[slug].tsx. For example, this article on my website has this route:
https://www.kleveland.dev/posts/create-notion-blog
and if I want the open graph image for that route, I can go to:
https://www.kleveland.dev/posts/open-graph/create-notion-blog
The part that matters is the usage of the custom hook in /pages/posts/[slug].tsx that will get us the imageURL to pass to the meta tags:
import Head from "next/head";
const postComponent = (props) => {
const { imageURL } = useOpenGraphImage(); // <- This custom hook here!
return <>
<Head>
<title>Kacey Cleveland - {title}</title>
<meta name="description" content={props.description} />
<meta property="og:title" content={props.title} />
<meta property="og:type" content="article" />
<meta property="og:image" content={imageURL} />
</Head>
<div>
// Content here
</div>
</>;
}
/utils/use-open-graph-image.ts
import { useRouter } from "next/router";
import { getAbsoluteURL } from "./utils";
export default function useOpenGraphImage() {
const router = useRouter();
const searchParams = new URLSearchParams();
searchParams.set(
"path",
router.asPath.replace("/posts/", "/posts/open-graph/") // This will take the current URL of the post and give us the open-graph one. Modify as needed for how you have your routing setup
);
const fullImageURL = getAbsoluteURL(`/api/open-graph-image?${searchParams}`); // This will then pass along the route for the open-graph image to our api request which will run the serverless function which runs headless chrome and goes to the /posts-open-graph/[slug].tsx route and takes a screenshot to serve as the 'fullImageURL' return.
return { imageURL: fullImageURL };
}
Fin
TLDR the order of operations are the following:
- A user shares a link to your article/dynamic content
- The site that the article is shared on finds reads the meta tags and finds there is an open graph image tag
- The image URL is a GET request to a serverless function that will take a screenshot of the passed route (/posts/open-graph/[slug].tsx) and return the image to be served on the social media site the link was shared on.
Top comments (0)