OpenGraph, Twitter Cards & Dynamic Social Previews in Next.js 16

When developers and tech leads share links to your application on X (Twitter), LinkedIn, Discord, or Slack, the OpenGraph social card is your primary visual billboard. Yet, most projects rely on static, generic og-image.jpg files that say nothing about the specific article, benchmark, or customer case study being shared. A static card gets scrolled past. A dynamic card showing specific benchmark metrics, author avatars, and high-contrast titles can 3x your organic social click-through rate (CTR). In ⚡ PLYXO (CRO • SEO • AIO • AEO • GEO), we generate 100% dynamic OpenGraph cards directly at the edge in Next.js 16.

Edge Generation with next/og and ImageResponse

Next.js includes @vercel/og natively, using the Satori engine to convert HTML/JSX directly into optimized PNG images inside Edge functions in under 25ms.

// app/api/og/route.tsx
import { ImageResponse } from 'next/og';
import { NextRequest } from 'next/server';

export const runtime = 'edge';

export async function GET(req: NextRequest) {
  const { searchParams } = new URL(req.url);
  const title = searchParams.get('title') || '⚡ PLYXO Intelligence Platform';
  const score = searchParams.get('score') || '98';
  const category = searchParams.get('category') || 'TECHNICAL AUDIT';

  return new ImageResponse(
    (
      <div style={{ height: '100%', width: '100%', display: 'flex', flexDirection: 'column', backgroundColor: '#090d16', padding: '60px', justifyContent: 'space-between', fontFamily: 'sans-serif' }}>
        {/* Top Tag & Metric Badge */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ backgroundColor: '#1e293b', color: '#38bdf8', padding: '10px 24px', borderRadius: '20px', fontSize: '20px', fontWeight: 700, letterSpacing: '1px' }}>
            {category}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', color: '#10b981', fontSize: '28px', fontWeight: 800 }}>
            ★ {score}/100 OPTIMIZED
          </div>
        </div>

        {/* Main Title */}
        <div style={{ fontSize: '54px', fontWeight: 900, color: '#ffffff', lineHeight: 1.2, letterSpacing: '-1px' }}>
          {title}
        </div>

        {/* Bottom Branding Footer */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ color: '#94a3b8', fontSize: '22px', fontWeight: 600 }}>
            ⚡ PLYXO (CRO • SEO • AIO • AEO • GEO)
          </div>
          <div style={{ color: '#64748b', fontSize: '18px' }}>
            github.com/pixelfogg/Plyxo-CRO-SEO-AIO-AEO-GEO
          </div>
        </div>
      </div>
    ),
    { width: 1200, height: 630 }
  );
}

Wiring Dynamic OpenGraph into Next.js Metadata

In your dynamic pages, connect the metadata API to feed URL parameters to the Edge OG route:

// app/blog/[slug]/page.tsx
import { Metadata } from 'next';

export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
  const post = await getPost(params.slug);
  const ogUrl = new URL('https://example.com/api/og');
  ogUrl.searchParams.set('title', post.title);
  ogUrl.searchParams.set('category', 'ARCHITECTURE');
  ogUrl.searchParams.set('score', '99');

  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      images: [
        {
          url: ogUrl.toString(),
          width: 1200,
          height: 630,
          alt: post.title,
        },
      ],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.description,
      images: [ogUrl.toString()],
    },
  };
}

The Result: Maximum Social CTR

Every time a user shares an audit report or technical guide, Twitter and LinkedIn automatically fetch a pixel-perfect 1200x630 card with custom metrics and dark-mode styling, dramatically increasing referral traffic.

👉 Inspect Plyxo's OpenGraph engine on GitHub