Generating Dynamic OG Images For Your Blog With Vercel OG
Improve your Next.js-based blog with OG images generated with @vercel/og.
Throughout the years, Open Graph images became more and more important. Most modern tools (like Slack, Facebook, or Twitter) automatically show a little preview image of your website whenever you share it. This is the Open Graph image (or OG image).
Especially on social media platforms, link preview images influence heavily whether or not the user decides to visit your site. A well-designed image shows your competence even before the first page view.
Too bad that generating those images dynamically has been quite a struggle… until now. Vercel has a new library, called Vercel OG, that helps you create preview images on the fly.
Let’s take a look how we can use it to improve our blog.
Installing @vercel/og
First, I set up a brand new Next.js site with the Blog Starter Kit. We will use this blog as an example throughout this article.
With the new site up and running, we can install the @vercel/og library:
npm install @vercel/ogThat’s it for now! We do not need any further configuration.
