February 9, 2025
Open Graph protocol is the backbone of how content is represented when shared on social media. As the official Open Graph protocol site states,
The Open Graph protocol enables any web page to become a rich object in a social graph.
It’s a set of meta tags that allow you to control how your content appears when shared on platforms like Facebook, Twitter, LinkedIn, and more.
When your content is dynamic—like blog posts, e-commerce products, or news articles—static Open Graph meta tags won’t cut it. That’s where Next.js (v.15.1.6) and its App Router come into play.
Note that the <Head /> component from next/head only works on Pages Router.
In this guide, we’ll explore how to create dynamic Open Graph content in Next.js, ensuring your shared links look stunning and drive engagement. We’ll break down the code to help you implement this simply.
Open Graph meta tags were introduced by Facebook in 2010 to standardize the way content is represented when shared on social media. As the protocol evolved, it became a universal standard adopted by platforms like Twitter, LinkedIn, and Pinterest. These tags allow you to control how your content appears when shared, including the title, description, image, and more.
For instance, when you share a blog post, the Open Graph meta tags determine whether it shows up as a bland link or a rich preview with a captivating image, a snappy title, and a concise description. This is crucial for engagement. As Rand Fishkin, founder of Moz, once said,
Content is fire. Social media is gasoline.
Open Graph tags are the match that lights it all up.
Static Open Graph meta tags are straightforward. You define them in your HTML, and they remain the same for every page. But what if your content is dynamic? Imagine an e-commerce site with thousands of products or a blog platform with constantly updated posts. Hardcoding Open Graph tags for each page is impractical. This is where dynamic Open Graph comes in.
Dynamic Open Graph is generated on the fly based on the content of the page. For example, a product page might pull the product name, description, and image to create its Open Graph tags. Similarly, a blog post might use its title, excerpt, and featured image.
Next.js, with its App Router and support for server-side rendering (SSR), is a perfect fit for generating dynamic Open Graph. Let’s break down the process step by step.
In Next.js, you can define metadata for each page using the generateMetadata function. This function can be asynchronous, allowing you to fetch data and generate Open Graph meta tags dynamically.
import { Metadata } from 'next';
export type ParamsType = Promise<{ slug: string }>;
export async function generateMetadata(params: {params: ParamsType}): Promise<Metadata> {
// Fetch your awaited content based on params
...
const content = ...
return {
title: content.title,
description: content.description || "Read more...,
openGraph: {
title: content.title,
description: content.description || "Read more...,
keywords: content.keywords,
images: [
{
url: content.image,
width: 800,
height: 600,
alt: content.title,
},
],
},
twitter: {
card: "summary_large_image",
title: content.title,
description: content.description || "Read more...",
images: [content.image],
},
};
}Here’s what’s happening:
generateMetadata function that takes params as an argument.slug parameter.Metadata object with the title, description, and Open Graph tags.With the metadata in place, your page component can focus on rendering the content. Here’s an example:
export type ParamsType = Promise<{ slug: string }>;
export default async function Page(params: {params: ParamsType}) {
// Fetch your awaited content based on params
...
const content = ...
return (
<div>
<h1>{content.title}</h1>
<p>{content.description}</p>
<img src={content.image} alt={content.title} />
</div>
);
}This component fetches the content and renders it, ensuring that the metadata and the content are in sync.
import { Metadata } from 'next';
export type ParamsType = Promise<{ slug: string }>;
export async function generateMetadata(params: {params: ParamsType}): Promise<Metadata> {
// Fetch your awaited content based on params
...
const content = ...
return {
title: content.title,
description: content.description || "Read more...,
openGraph: {
title: content.title,
description: content.description || "Read more...,
images: [
{
url: content.image,
width: 800,
height: 600,
alt: content.title,
},
],
},
twitter: {
card: "summary_large_image",
title: content.title,
description: content.description || "Read more...",
images: [content.image],
},
};
}
export default async function Page(params: {params: ParamsType}) {
// Fetch your awaited content based on params
...
const content = ...
return (
<div>
<h1>{content.title}</h1>
<p>{content.description}</p>
<img src={content.image} alt={content.title} />
</div>
);
}Feel free to test out and preview Open Graph on OpenGraph.dev.
One core reason to use Open Graph is that it builds trust and reduces suspicion. Without Open Graph, shared links can look vague or suspicious, making users hesitant to click. A rich preview with a clear title, description, and image reassures users that the link is legitimate and worth their time.
For a blog platform, each post will have a unique title, description, and featured image. Dynamic Open Graph tags ensure that when a post is shared, it displays the correct information, increasing click-through rates.
In an e-commerce site, each product page will have its own name, description, and images. Dynamic Open Graph tags allow you to showcase the product effectively when shared on social media, driving traffic and sales.
News articles often have time-sensitive content. Dynamic Open Graph tags ensure that the latest headlines and images are displayed when shared, keeping the content relevant and engaging.
fetchContent function to ensure that metadata is generated quickly. Slow metadata generation can delay page loads.Dynamic Open Graph meta tags are a game-changer for any website with dynamic content. They ensure that your content looks its best when shared, driving engagement and traffic. With Next.js and its App Router, implementing dynamic Open Graph tags is both efficient and straightforward.
As we wrap up, remember the words of Steve Jobs:
Details matter, it’s worth waiting to get it right.
Taking the time to implement dynamic Open Graph tags correctly will pay off in the long run, making your content stand out in the crowded world of social media.
Now, go forth and make your content share worthy!