Dynamic Link Previews in Next.js — Displaying Dynamic Content When Sharing Links

Frontend
1

When you’re building platforms where content is dynamic (like an auction site, e-commerce, marketplace, or news), sharing links on social media and chat apps should automatically generate a beautiful preview — showing the right title, description, and image.

We recently tackled this for our auction platform built with Next.js App Router!

link_preview
link_preview1536×1024 90 KB

The Challenge

  • Images are uploaded dynamically by sellers.
  • Each auction page is unique, with its own title, description, and thumbnail image.
  • When users share a link (in WhatsApp, Facebook, Slack, etc.), we need a live preview of the auction image and details — without hardcoding anything.

The Solution: generateMetadata

Next.js introduced the generateMetadata function to dynamically build metadata on the server side for each page.

The generateMetadata function is used in Next.js App Router (starting from Next.js 13).

Here’s how we did it:

export async function generateMetadata({ params }) {
   const id = params.slug;


   try {
       const data = await dataService.ViewAuction(id);     //api call to fetch data
       const auctionData = data?.data?.data?.data;


       if (!auctionData) {
           return {
               title: 'Buyer Web Application',
               description: 'Buyer Web Application',
           };
       }


       const imageUrl = `${cdn_url}${auctionData.auction_image}`;


       return {
           metadataBase: new URL(`${your_exact_url}`), 
           title: auctionData.title || 'Buyer Web Application',
           description: 'Buyer Web Application',
           icons: {
               icon: '/images/Favicon.png',
           },
           openGraph: {
               title: `Auction Application | ${auctionData.title}`,
               description: auctionData.description,
               images: [
                   {
                       url: imageUrl,
                       width: 800,
                       alt: 'auction image',
                   },
               ],
               type: 'website',
           },
           twitter: {
               card: 'summary_large_image',
               title: `Auction Title | ${auctionData.title}`,
               description: auctionData.description,
               images: [imageUrl],
           },
       };
   } catch (error) {
       console.error('Metadata generation failed:', error);
       return {
           title: 'Buyer Web Application',
           description: 'Buyer Web Application',
       };
   }
}
Key What It Does
metadataBase Defines the base URL for relative links (especially important for Open Graph and canonical links). Must match the actual page URL being shared!
title Sets the page title (shows in browser tab, social previews, SEO results).
description Sets the short description for the page (used in search engines and previews).
icons Defines a favicon (small icon shown in the browser tab).
openGraph Object that configures how the page appears when shared on platforms like Facebook, LinkedIn, Slack.
openGraph.title Title shown in the social media link preview.
openGraph.description Description shown below the title.
openGraph.images Image shown in the preview card. (You can also specify size, alt text.)
openGraph.type Defines the type of content. Here it’s set to “website”.
twitter Object that configures the Twitter Card preview when the page is shared on Twitter.
twitter.card Type of Twitter card. ‘summary_large_image’ means a big image preview card.
twitter.title Title shown in the Twitter card preview.
twitter.description Description shown in the Twitter card preview.
twitter.images Image shown in the Twitter card preview.

Quick Tips

  • metadataBase must match exactly the URL being shared — otherwise platforms like WhatsApp or Facebook may not pull the correct preview.

  • If your images are on a CDN, use the full absolute URL.

  • generateMetadata must run on the server — this ensures SEO bots and social platforms can access the metadata.

Final Result

Whenever a user shares an auction link:

:white_check_mark: The uploaded auction image appears automatically
:white_check_mark: Fast metadata fetching
:white_check_mark: Works across Facebook, WhatsApp, Twitter, Slack, LinkedIn and more!

4 Likes