An Open Graph image is crucial for creating an appealing webpage. It can be configured both statically and dynamically based on data managed by tools like a CMS.
But with Next.js, you can push this dynamic capability even further.
But with Next.js, you can push this dynamic capability even further.
How Next.js supports Open Graph Image?How Next.js supports Open Graph Image?
How Next.js supports Open Graph Image?How Next.js supports Open Graph Image?
In older Next.js versions, it supports via a tag imported from
next/head.jsx
import Head from 'next/head'; export default function HomePage() { return ( <> <Head> <title>My Awesome Page</title> <meta name="description" content="This is an awesome page made with Next.js" /> <link rel="icon" href="/favicon.ico" /> </Head> <main> <h1>Welcome to My Awesome Page</h1> </main> </> ); }
An example usage of next/head
At the time, I found Next.js to be one of the first frameworks that handled SEO-related tasks exceptionally well. I had been struggling with meta tags in React, and Next.js made it much easier.
Back then, we had to manually create those tags…
Next.js supports SEO well, but we still need to manually create meta tags and place them in the
Head tag. Although this process is more convenient in Next.js compared to other frameworks, it still requires us to carefully decide which tags to include, understand their syntax, and determine the appropriate values.Starting from Next.js 14. SEO is easier than ever.
Next.js now supports those meta tags seamlessly! We have several ways to create the meta tags that suit our need: file-based opengraph, metadata object, create metadata object asynchronously…
With metadata object, we manage the meta tags by object - just fill in, and Next.js will generate them for you.
jsx
// app/page.tsx or app/layout.tsx export const metadata = { title: 'My Awesome Page', description: 'This is an awesome page made with Next.js 14', icons: { icon: '/favicon.ico', }, };
Next.js 14 automatically generates meta tags based on the metadata object.
How cool is that!!
How dynamic a Open Graph Image can be in Next.js?How dynamic a Open Graph Image can be in Next.js?
How dynamic a Open Graph Image can be in Next.js?How dynamic a Open Graph Image can be in Next.js?
In Next.js, this is… up to you.
The Open Graph image can be set as a fixed image for the entire website, served dynamically by a server or CMS, or even generated on the fly.
Yes. It could be like that.
We can easily define a route in Next.js that would return an image based on the content you passed in.
1920 x 1080, 278.1 KB, PNG
When we need this?
It’s when you can’t control the number of pages!
For example, if your website has a search results page, the content can vary greatly depending on the search term and the data returned. In this scenario, you might want a different Open Graph image for each search, but it’s challenging because you can’t predict how many variations there will be.
In the image above, the preview image is generated after the initial search is sent to Next.js. The image features a static background with dynamic text displayed at the center.
1920 x 1080, 247.1 KB, PNG
If you choose not to implement this suggestion and believe it to be unnecessary, that is entirely your prerogative. It is your page, and you have the discretion to make such decisions. However, incorporating this small change would enhance my experience as a user when viewing a preview image on social media.
That’s it.
Thanks for reading. 🎉
