Why is my Open Graph image not showing when sharing Next.js URLs?

The most common reason is missing the `metadataBase` configuration in root `layout.tsx`. Without `metadataBase`, relative paths like `/og.png` cannot resolve to absolute HTTPS URLs required by social crawlers like Facebook, Twitterbot, and LinkedIn.

Can I use @vercel/og for dynamic social share cards in Next.js?

Yes! Create an `opengraph-image.tsx` or `twitter-image.tsx` file in your route directory using Next.js ImageResponse API to generate 1200x630 dynamic SVG/JSX-based share cards on the edge.

React & App RouterModern React Framework10 Dedicated Tools

Next.js SEO & Social Meta Tag Optimization Hub

Native metadata export & dynamic Open Graph image generation with App Router

Next.js App Router utilizes the native Metadata API (`generateMetadata` or static `metadata` export) and dynamic OpenGraph image generation (`opengraph-image.tsx`) to produce server-rendered SEO and social preview meta tags.

100% Free & Client-Side Private Copy-Ready Next.js Code 2026 Social & SERP Specs

AdSense Placeholder: Top Leaderboard Ad (728x90 / 320x50)

Displayed below main page header or above the tool container. • Zero CLS Container

Programmatic Tool Permutations

Next.js SEO & Social Tools

Select any tool below to simulate previews, inspect metadata limits, and generate copyable Next.js code:

Showing 10 active utilities

Popularsocial

Twitter Card Previewer for Next.js

Simulate Twitter / X timeline card previews, validate image aspect ratios (1.91:1 & 1:1), and generate exact twitter:card meta tags.

Launch Next.js Validator

Popularsocial

LinkedIn Link Previewer for Next.js

Inspect LinkedIn feed cards, audit 1200x627 px images, prevent title truncations, and generate certified B2B social meta tags.

Launch Next.js Validator

Updatedsocial

Facebook Open Graph Debugger for Next.js

Simulate Facebook desktop and mobile feed previews, validate og:image 1.91:1 ratios, and inspect Open Graph tag integrity in real time.

Launch Next.js Validator

Newsocial

Discord Embed Generator for Next.js

Simulate Discord dark chat messages, customize hex sidebar strip colors, test Open Graph cards, and generate rich webhook payloads.

Launch Next.js Validator

Popularserp

Meta Title Pixel Checker for Next.js

Calculate exact title pixel widths against Google's 600px desktop and 580px mobile limits using 2026 Arial font metrics.

Launch Next.js Validator

Updatedserp

Meta Description Length Counter for Next.js

Calculate meta description characters and pixel width (960px desktop / 680px mobile), audit snippet readability, and avoid truncation.

Launch Next.js Validator

Popularserp

Google SERP Simulator for Next.js

Simulate Google desktop and mobile search results, test rich snippet star ratings, publish dates, sitelinks, and audit CTR scores.

Launch Next.js Validator

Newcopywriting

Flesch-Kincaid Calculator for Next.js

Calculate Flesch Reading Ease, Flesch-Kincaid Grade Levels, syllable counts, sentence complexity, and reading time in real time.

Launch Next.js Validator

Popularcopywriting

Keyword Density Checker for Next.js

Calculate 1-word, 2-word, and 3-word keyword frequency percentages, filter stop words, audit lexical diversity, and export CSV reports.

Launch Next.js Validator

Updatedtechnical

Open Graph Meta Tag Generator for Next.js

Generate production-ready Open Graph, Twitter Card, and standard SEO meta tags for HTML5, Next.js App Router, and React Helmet.

Launch Next.js Validator

Popularsocial

Social Meta & OpenGraph Card Simulator for Next.js

Preview and validate how your link previews look when shared on Twitter (X), Facebook, LinkedIn, and Discord before publishing.

Launch Next.js Validator

AdSense Placeholder: Native In-Feed Ad (Responsive)

Separates the interactive tool output from the deep technical guide. • Zero CLS Container

Next.js Official SEO & Metadata Boilerplate

Verified, copy-paste code snippet configured for Next.js

Add this pre-configured boilerplate to your Next.js setup to ensure full Open Graph, Twitter Card, and search crawler compatibility:

app/layout.tsxtypescript

Standard production-grade SEO and social preview snippet for Next.js.

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: {
    default: 'My High-Ranking SaaS Platform',
    template: '%s | MyBrand',
  },
  description: 'Boost your digital visibility with real-time SEO validation.',
  openGraph: {
    title: 'My High-Ranking SaaS Platform',
    description: 'Boost your digital visibility with real-time SEO validation.',
    url: 'https://example.com',
    siteName: 'MyBrand',
    images: [
      {
        url: 'https://example.com/og-image.png',
        width: 1200,
        height: 630,
        alt: 'Open Graph preview banner',
      },
    ],
    locale: 'en_US',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'My High-Ranking SaaS Platform',
    description: 'Boost your digital visibility with real-time SEO validation.',
    creator: '@mybrand',
    images: ['https://example.com/og-image.png'],
  },
};

How Next.js Processes Metadata

Next.js 13+ App Router processes metadata server-side before streaming HTML to the client. You can define static `metadata` objects in `layout.tsx` or `page.tsx`, or dynamically resolve async parameters via `generateMetadata({ params, searchParams })`. Next.js automatically injects standard `<head>` tags (Open Graph, Twitter Cards, canonical links, and viewport specifications) with zero client JavaScript overhead.

Next.js Setup Instructions

Define Base URL in Root Layout

Add `metadataBase: new URL('https://yourdomain.com')` inside your root `app/layout.tsx` so all social images resolve to absolute URLs.

Add Typed Metadata in Page Route

Export a static `metadata: Metadata` object or an async `generateMetadata` function inside your `app/[slug]/page.tsx` file.

Attach Social Card Image

Place a 1200x630 PNG/JPG in your route folder as `opengraph-image.png` or configure `openGraph.images` array.

Validate Output with OmniSEOTools

Test your live or localhost preview URL in this validator to ensure zero tag truncations and proper aspect ratios.

Next.js SEO Best Practices

Use `metadataBase: new URL('https://example.com')` in your root `app/layout.tsx` to automatically resolve relative image and canonical URLs.
Leverage Next.js `opengraph-image.tsx` with `@vercel/og` to dynamically render custom 1200x630 branded graphics on the edge.
Implement dynamic `generateMetadata({ params })` on nested dynamic routes to prevent duplicate title tags across product and article pages.
Specify `twitter.card: 'summary_large_image'` to command maximum timeline visibility on X / Twitter feeds.

Next.js SEO & Metadata FAQ

Platform-specific troubleshooting, dimensions, and optimization answers

In Next.js App Router, export an async function named `generateMetadata({ params })` from your `page.tsx` file. Fetch your post or product data and return a typed `Metadata` object containing `title`, `description`, `openGraph`, and `twitter` properties.

Explore Other Platform Hubs

Discover metadata tools and boilerplate code for modern web frameworks and CMSs

All Hubs

Next.jsReact & App Router ShopifyE-Commerce Liquid WordPressCMS & Plugins WebflowNo-Code CMS SquarespaceSite Builder WixWix SEO & Velo Ghost CMSPublishing Platform HTML & Tailwind CSSStatic HTML5

AdSense Placeholder: Top Leaderboard Ad (728x90 / 320x50)

Displayed below main page header or above the tool container. • Zero CLS Container