Next.js

Next.js – Metadata and OG images

Official guide to Metadata API and generating dynamic Open Graph images.

Overview

Next.js Metadata API provides powerful tools for improving SEO and web shareability through static and dynamic metadata generation. The API supports static metadata objects, dynamic generateMetadata functions, and special file conventions for favicons and Open Graph images. All metadata is automatically converted to appropriate HTML meta tags.

Key Points

Static metadata objects for consistent page metadata

Dynamic generateMetadata function for runtime metadata

Special file conventions for favicons and OG images

Automatic generation of HTML meta tags

Support for Open Graph and Twitter Card metadata

Default meta charset and viewport tags included automatically

Prerequisites

Next.js 13+ with App Router

Understanding of SEO and metadata concepts

Basic knowledge of React Server Components

Step-by-Step Guide

1Export a Metadata object for static metadata

2Use generateMetadata function for dynamic metadata

3Configure Open Graph and Twitter Card properties

4Add favicon and OG image files in app directory

5Test metadata output in browser developer tools

6Validate with social media debugging tools