Robrecht Meersman

<h2>Introduction</h2>
Let me start of with a question: which link are you more likely to click on, the left or the right?
<img src="https://inthepocket.dev/img/2022-03-08-dynamic-open-graph-images/twitter-example.png" alt="Example of a twitter post with and without social media preview image" />
Obviously, adding a social media preview image is a great way to improve the professional look of your website and increase your click through rate (though I have no data on this). These social media images are specified using the <a href="https://ogp.me/">Open Graph Protocol</a>, which is a spec introduced by Facebook and now supported by any software that previews URLs for you. The OG image is specified in the document's head:
<pre class="language-html"><code class="language-html">&lt;head> &lt;meta property="og:image" content="https://url-to-your-image.png" /> &lt;/head></code></pre>
This can be hooked up to a CMS so editors can choose a picture which suits their landing page, blog post, news article… the most. It is important that the preview gives the user a clear idea of what to expect on the webpage, similar to a thumbnail on a YouTube video.
But what if the page's content is not visual at all, and no photo suits the page's contents? And what if we have a lot of these pages with dynamically generated content? Luckily we are not limited to photography. We can use text! The prime example of this is how GitHub generates previews for issue URLs: they create an image containing enough info such that users know what they will click on. These images are generated on-demand, as storing a picture for every GitHub pull request or issue would be unfeasible. Another example is Vercel, which even open-sourced their <a href="https://github.com/vercel/og-image">Open Graph Image as a Service</a> that they occasionally use on blog posts or announcements.
<img src="https://inthepocket.dev/img/2022-03-08-dynamic-open-graph-images/github-issue.jpg" alt="GitHub issue OG image" />
In this article we will find out how we can create these dynamic Open Graph images in Next.js. We will use our In The Pocket <a href="https://inthepocket.tech/">Tech Radar</a> as an example. Our Tech Radar reflects our current view on software engineering technologies. It includes the technology choices we’ve made and motivates why we’ve made them. It also shows which technologies are “on our radar”, and why we consider adopting them. 
Each technology has its own webpage, and we have more than 100 technologies on our radar. Manually creating an OG image for each technology would be a boring, repeating task.
<h2>TL;DR</h2>
Don't care about the details? Here's a small tutorial on how to add an API route to your Next.js app that generates the images on demand.
First, install <a href="https://github.com/neg4n/next-api-og-image"><code>next-api-og-image</code></a>.
<pre class="language-bash"><code class="language-bash">yarn add next-api-og-image</code></pre>
Then configure an API route
<pre class="language-tsx"><code class="language-tsx">// pages/api/og-image.ts import { withOGImage } from 'next-api-og-image'; interface QueryParams { stage: string; name: string; } export default withOGImage&lt;'query', QueryParams>({ template: { // include HTML template here html: ({ name, stage }) => `&lt;h1>${name} - ${stage}&lt;/h1>`, }, cacheControl: 'public, max-age=604800, immutable', dev: { inspectHtml: false, }, });</code></pre>
And call the route from the web page:
<pre class="language-tsx"><code class="language-tsx">// pages/technology/[slug].ts &lt;Head> &lt;title>Next.js | Tech Radar&lt;/title> &lt;meta property="og:image" content="https://inthepocket.tech/api/og-image?name=Next.js&amp;stage=adopt" /> &lt;/Head></code></pre>
and done!
<h2>Behind the scenes</h2>
As you see in the code above, we are using the <a href="https://github.com/neg4n/next-api-og-image"><code>next-api-og-image</code></a> library with almost no configuration required to generate the images. Super easy! The interesting part however is what the library does under the hood.
The <code>withOGImage</code> method exposes a <code>GET /api/og-image?name=Next.js&amp;stage=adopt</code> API route with some query parameters we can define ourselves. In the case of our Tech Radar, we use the <code>name</code> and <code>stage</code> parameters. The API route returns an image containing the name and stage we provided:
<img src="https://inthepocket.dev/img/2022-03-08-dynamic-open-graph-images/tech-radar-og-image.png" alt="GitHub issue OG image" />
When requesting the API route, the Next.js serverless function will actually spin up a web browser on the server (a headless instance of Chromium, using <a href="https://github.com/alixaxel/chrome-aws-lambda"><code>chrome-aws-lambda</code></a>). Next, a webpage will be generated with HTML we can define ourselves. This HTML will be used to construct the image. That means that as a developer we can generate images using HTML and CSS, technologies we are already familiar with!
<pre class="language-tsx"><code class="language-tsx"> template: { html: ({ name, stage }) => `&lt;h1>${name} - ${stage}&lt;/h1>`, },</code></pre>
Of course we are not limited to a simple <code>h1</code> tag, this can be a full HTML document with styles, images and custom fonts.
Finally, a screenshot of the webpage is taken using <a href="https://github.com/puppeteer/puppeteer"><code>puppeteer</code></a> and sent to the client-side.
We add some aggressive caching (<code>public, max-age=604800, immutable</code>) to prevent generating the same image too many times, because the image generation is quite slow and computationally intensive. The way we set up caching is also the reason we pass the query parameters and not just the technology's ID. You might think it is cleaner to fetch the technology's stage and name from the CMS inside the API route, but this makes caching more tricky. By adding all variable elements as query parameters, one URL will always return the same image and we can use the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#immutable">immutable</a> setting on the caching. If the stage or the name of a technology would change on the Tech Radar, we will update the URL, and not update the image behind the URL.
<h2>Conclusion</h2>
Adding dynamic Open Graph images in Next.js is very low effort, but makes your site feel 10x more professional!

Adding social media preview images is a great way to improve the professional look of your website and increase your click through rate. This article will guide you through the setup of dynamic OG images in Next.js.

Dynamic OG Images in Next.js

Sander Goossens

Creating an end-to-end encrypted chat with GetStream.io and seald.io

Remain up to date in the continuously evolving technology landscape. The ITP Tech Radar reflects our current view on software engineering technologies.

Typescript

Why do we adopt this technology?

Articles

Dynamic OG Images in Next.js

Creating an end-to-end encrypted chat with GetStream.io and seald.io