Metadata and OG Images in Next.js – SEO, Shareability, and Dynamic Generation

Introducing Metadata in Next.js

Next.js automatically generates <head> tags using metadata APIs. These tags improve SEO and social sharing and can be inspected in browser dev tools.

Default Meta Tags

Two meta tags are always included:

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

Static Metadata

Export a metadata object from a layout or page file to define static metadata:

// app/blog/layout.tsx
export const metadata = {
  title: 'My Blog',
  description: '...',
}

Dynamic Metadata with generateMetadata

Use generateMetadata to fetch metadata based on route data:

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const post = await fetch(`https://api.vercel.app/blog/${params.slug}`).then(res => res.json())
  return {
    title: post.title,
    description: post.description,
  }
}

Streaming Metadata

Next.js streams metadata separately for dynamic pages, allowing UI to render first. This is disabled for bots like Twitterbot and Bingbot to ensure metadata appears in <head>.

Memoizing Data Requests

Use React’s cache to avoid duplicate fetches for metadata and page content:

// app/lib/data.ts
export const getPost = cache(async (slug) => {
  return await db.query.posts.findFirst({ where: eq(posts.slug, slug) })
})

Special Metadata Files

favicon.ico – browser tab icon
opengraph-image.jpg – OG image for social sharing
robots.txt – search engine indexing rules
sitemap.xml – site map for SEO

Static Open Graph Images

Add opengraph-image.jpg to the app folder or route-specific folders. Specific images override global ones.

Generating Dynamic OG Images

Use ImageResponse to generate OG images with JSX and CSS:

// app/blog/[slug]/opengraph-image.tsx
import { ImageResponse } from 'next/og'
import { getPost } from '@/app/lib/data'

export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'

export default async function Image({ params }) {
  const post = await getPost(params.slug)
  return new ImageResponse(
    <div style={{
      fontSize: 128,
      background: 'white',
      width: '100%',
      height: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    }}>
      {post.title}
    </div>
  )
}

ImageResponse supports flexbox, custom fonts, text wrapping, and nested images. Advanced layouts like grid are not supported.

Conclusion

Metadata and OG images in Next.js enhance SEO and social sharing. With generateMetadata and ImageResponse, you can create dynamic, precise metadata and visuals tailored to each route.