Nextjs
Published in

Nextjs

What is OG Image Generation, and How to use with nextjs?

Nextjs + OG image

What is OG Image Generation, and How to use with nextjs?

Vercel introduced the new Nextjs OG Image functionality built with satori. Satori is a new library That converts HTML to png or SVG, and satori was created and maintained by vercel. OG Image Generation is lightweight and runs on vercel Edge. That means you can genrate OG Images for all frameworks deployed with vercel.

OG ( Open Graph ) Image API has used the powder of the vercel Edge function to generate a dynamic image. It helps to increase user engagement by 40%, according to vercel.

OG Image only supports -

  1. OG image support CSS.TailwindCSS (Beta) and flexbox.
  2. OG image support nested image, custom font, google fonts, etc
  3. OG image work for all frameworks and libraries deployed with vercel.

All the code is available on the github.

Demo

How to use OG Image Generation with nextjs 13?

You can achieve OGImage Generation with copy-paste code and design according to requirements.

Steps

  1. Install @vercel/og npm package
  2. Create a new API for OGImage
  3. How to use it?

Install @vercel/og npm package

The @vecel/og is a new npm package that is helping to generate Open Graph images for nextjs. You can also use @vercel/og library for other packages as well framework.

npm i @vercel/ogorpnpm add @vercel/ogoryarn add @vercel/og

Create a new API for OGImage

We can genrate an open graph dynamic image with API and use it with @vercel/og npm package.

How to use it?

You can easily use it with an image meta tag in nextjs. You only need the nextjs head component, and you can use it on any page in nextjs.

<Head>
<title>Hello world</title>
<meta property="og:image" content="https://og-image-liart-iota.vercel.app/api/og"></Head>

The most imponent OGImage Generation use case in nextjs with next-seo npm package. Simple, you can paste your OGImage API in the next-seo images property, and you can genrate a dynamic image lool-like.

<NextSeo
title="Minimal blog"
description="Minimal blog design and built with tailwindcss and nextjs"
twitter={{ handle: '@Official_R_deep', site: '@Official_R_deep',
cardType: 'summary_large_image' }}
openGraph={{ type: 'website', url: domain, title: "Minimal blog",
description: "minimal blog design and built with tailwindcss and nextjs",
images: [
{
url: `${domain}api/og`, // or url:"yourdomain.com/api/og" width: 1200, height: 600, alt: "minimal blog",

}
]
}}/>

You can also pass dynamic title, colour, and background colour with the next-seo package to OGImage.

url: `${domain}api/og title=${post[0].title}&BgColor=blue&color=black`,

You can dynamically pass the title, background colour (BgColor), and text colour (color) to change OGImage. It creates an image png for your website.

<NextSeo title={post[0].title}twitter={{ handle: '@Official_R_deep', site: '@Official_R_deep', cardType: 'summary_large_image' }}openGraph={{ type: 'website', authorName: "Rajdeep Singh", url: `${domain}${slug}`, title: post[0].title, description: post[0].description, authors: [ 'https://officialrajdeepsingh.medium.com/'],images: [   {     url: `${domain}api/og?title=${post[0].title}&BgColor=blue&color=black`,
width: 1200,
height: 600,
alt: post[0].title,
},
],}} />
Genrate the OG Image by Dynamically with vercel
Genrate the Dynamic image

Note

You can test open graph images for Facebook, LinkedIn and Twitter separately, or maybe you can use an open graph Debugger. The solution is straightforward in nextjs, and you can use the next-seo package.

  1. Facebook open graph Debugger.
  2. Twitter open graph Debugger.
  3. Linkedin open graph Debugger.
  4. For All social media, open graph Debugger.

Conclusion

The OGImage Generation is more beneficial for a website. Currently, OGImage is in the beta phase. You can genrate dynamic open graph images based on the title, name, etc. Depending on requirements, you can also change image colour, padding, margin, font, etc. My demo project changed the background and text colour according to my needs.
It does not replace a human (designer ) thumbnail. It just helps to increase user engagement number. Because humans easily interact visually (images) and then start to read something. According to the youtube team, a 90% chance is to increase audiences with a good thumbnail.

You can share and follow us on Twitter and Linkedin. If you like my work, please read more content on the officialrajdeepsingh. dev, Nextjs, frontendweb, and Sign up for a free newsletter on nextjs.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep singh

JavaScript || Reactjs || Nextjs || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || Writer || https://officialrajdeepsingh.dev/