Next.js Dynamic OpenGraph & Programmatic SEO Architect
Implement programmatic generateMetadata functions, dynamic ImageResponse OpenGraph cards, and schema.org JSON-LD tags.
Compatibility & Specs
Compatible AI Models
ClaudeChatGPT
Last UpdatedApr 1, 2026
Customizable Variables3 parameters
Main Prompt Template
141 words • 1128 characters
You are an Elite Technical SEO Director and Next.js Metadata Architect. I need to implement a production-grade programmatic metadata and dynamic OpenGraph image generation engine in the Next.js App Router.
Dynamic Route / Entity Type: [route_type]
Core Entity Attributes Available: [entity_attributes]
Target Social Card Branding / Style: [branding_style]
Deliver the complete Next.js SEO architecture:
1. Dynamic `generateMetadata()` Function: Full TypeScript implementation extracting dynamic route parameters, setting canonical URLs, dynamic title templates, OpenGraph tags, and Twitter Cards with fallback image guards.
2. Edge OpenGraph Image Generator (`opengraph-image.tsx`): Production code using `ImageResponse` from `next/og` with custom Google Fonts, responsive flexbox layout, and dynamic background gradients.
3. Structured Data JSON-LD Script: Valid Schema.org JSON-LD snippet (e.g. `Article`, `Course`, `Product`, or `SoftwareApplication`) with breadcrumbs and publisher credentials.
4. Google Search Console & Social Preview Audit: Verification steps using Facebook Sharing Debugger and Twitter Card Validator.
Tip:Variables marked in purple brackets can be tailored below.
Customize Prompt
Fill in the variables below. Your customized prompt updates instantly in the browser — no AI API needed.
Parameters (3)* Indicates required field
[route_type]
The dynamic route segment being optimized
[entity_attributes]
Fields returned by data query
[branding_style]
Visual design preferences for the OG image
3 parameters active
Live Customized OutputLive Preview
173 wordsYou are an Elite Technical SEO Director and Next.js Metadata Architect. I need to implement a production-grade programmatic metadata and dynamic OpenGraph image generation engine in the Next.js App Router.
Dynamic Route / Entity Type: app/prompts/[slug]/page.tsx (AI Prompt Detail Page)
Core Entity Attributes Available: title, shortDescription, category, difficulty ('beginner' | 'intermediate' | 'advanced'), compatibleModels (['claude', 'chatgpt', ...]), updatedAt.
Target Social Card Branding / Style: Sleek dark mode obsidian background with indigo/violet ambient gradient, clean typography, category badge, and model icons
Deliver the complete Next.js SEO architecture:
1. Dynamic `generateMetadata()` Function: Full TypeScript implementation extracting dynamic route parameters, setting canonical URLs, dynamic title templates, OpenGraph tags, and Twitter Cards with fallback image guards.
2. Edge OpenGraph Image Generator (`opengraph-image.tsx`): Production code using `ImageResponse` from `next/og` with custom Google Fonts, responsive flexbox layout, and dynamic background gradients.
3. Structured Data JSON-LD Script: Valid Schema.org JSON-LD snippet (e.g. `Article`, `Course`, `Product`, or `SoftwareApplication`) with breadcrumbs and publisher credentials.
4. Google Search Console & Social Preview Audit: Verification steps using Facebook Sharing Debugger and Twitter Card Validator.
How to Use This Prompt
Follow this 3-step workflow to extract high-signal responses from any compatible AI model.
01
1. Tailor the Parameters
Use the interactive customizer above to substitute the bracketed placeholders with your exact context, requirements, and constraints.
02
2. Send to AI Model
Copy the prompt and paste it into Claude, ChatGPT, Gemini, or Copilot. These models follow structured multi-step constraints reliably.
03
3. Review and Iterate
Review the output against the verified benchmark below. Follow up in the conversation to stress-test edge cases or refine tone.
Prompt Variables & Parameters
Reference breakdown of every dynamic variable embedded in this prompt template.
| Placeholder | Parameter Name | Type | Status | Description & Guidance |
|---|---|---|---|---|
| [route_type] | Dynamic Route / Page Type | text | Required | The dynamic route segment being optimizedDefault: app/prompts/[slug]/page.tsx (AI Prompt Detail Page) |
| [entity_attributes] | Entity Attributes Available | textarea | Required | Fields returned by data queryDefault: title, shortDescription, category, difficulty ('beginner' | 'intermediate' | 'advanced'), compatibleModels (['claude', 'chatgpt', ...]), updatedAt. |
| [branding_style] | Social Card Branding Style | text | Required | Visual design preferences for the OG imageDefault: Sleek dark mode obsidian background with indigo/violet ambient gradient, clean typography, category badge, and model icons |
Example Execution & Benchmark Output
Sample input arguments and the verified AI response demonstrating expected quality and formatting.
Sample VariablesInputs
[route_type]
app/prompts/[slug]/page.tsx (AI Prompt Detail Page)
[entity_attributes]
title, shortDescription, category, difficulty ('beginner' | 'intermediate' | 'advanced'), compatibleModels (['claude', 'chatgpt', ...]), updatedAt.
[branding_style]
Sleek dark mode obsidian background with indigo/violet ambient gradient, clean typography, category badge, and model icons
Expected AI ResponseVerified Result
### 1. Programmatic Metadata: `generateMetadata()`
```typescript
import type { Metadata } from 'next';
import { getPromptBySlug } from '@/lib/content';
interface Props {
params: Promise<{ slug: string }>;
}
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const { slug } = await params;
const prompt = await getPromptBySlug(slug);
if (!prompt) return { title: 'Prompt Not Found | Beautiful AI Prompt' };
const pageUrl = `https://beautifulaiprompt.com/prompts/${prompt.slug}`;
return {
title: `${prompt.title} | Beautiful AI Prompt`,
description: prompt.shortDescription,
alternates: { canonical: pageUrl },
openGraph: {
title: prompt.title,
description: prompt.shortDescription,
url: pageUrl,
siteName: 'Beautiful AI Prompt',
type: 'article',
publishedTime: prompt.createdAt,
modifiedTime: prompt.updatedAt,
},
twitter: {
card: 'summary_large_image',
title: prompt.title,
description: prompt.shortDescription,
},
};
}
```
### 2. Edge OpenGraph Image Generator: `opengraph-image.tsx`
```tsx
import { ImageResponse } from 'next/og';
import { getPromptBySlug } from '@/lib/content';
export const runtime = 'edge';
export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';
export default async function Image({ params }: { params: { slug: string } }) {
const prompt = await getPromptBySlug(params.slug);
const title = prompt?.title || 'Curated AI Prompt';
const category = prompt?.categoryName || 'Productivity';
return new ImageResponse(
(
<div
style={{
height: '100%',
width: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
backgroundColor: '#090a0f',
padding: '80px',
fontFamily: 'sans-serif',
}}
>
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
<span style={{ color: '#6366f1', fontSize: 24, fontWeight: 700 }}>BEAUTIFUL AI PROMPT</span>
<span style={{ color: '#475569', fontSize: 24 }}>•</span>
<span style={{ color: '#94a3b8', fontSize: 22, textTransform: 'uppercase' }}>{category}</span>
</div>
<div style={{ color: '#ffffff', fontSize: 56, fontWeight: 800, lineHeight: 1.15 }}>
{title}
</div>
<div style={{ display: 'flex', color: '#64748b', fontSize: 20 }}>
Tested on Claude 3.7 • ChatGPT-4o • Gemini 2.0
</div>
</div>
),
{ ...size }
);
}
```
Best Use Cases
Scenarios and roles where this prompt produces maximum leverage.
Content platforms and directories generating automated SEO preview cards for 500+ URLs
SaaS founders driving organic social click-through rates from Twitter/X and LinkedIn shares
Developers implementing Schema.org JSON-LD structured data for Google Search rich results
Tips for Best Results
Techniques to elevate response fidelity
- •Specify your exact runtime and dependency versions (e.g. Next.js 15, React 19, TypeScript 5.4) to eliminate outdated syntax hallucinations.
- •Ask the model to enumerate potential runtime failure modes, concurrency issues, or null boundary states before generating code.
- •Request idiomatic, type-safe solutions with clear unit test skeletons rather than monolithic scripts.
Common Mistakes to Avoid
Frequent failure modes and anti-patterns
- •Pasting large unformatted code dumps without indicating the specific function or error you want analyzed.
- •Deploying AI-generated code directly to production without verifying memory safety, edge cases, and security vulnerabilities.
- •Omitting architectural constraints (such as SSR vs. client component boundaries or database indexing).
Part of Curated Collections
This prompt is sequenced as part of these goal-oriented workflows
Related AI Prompts
Complementary workflows in Next.js
Next.jsintermediate
Next.js App Router Performance & Cache Auditor
Audit Next.js routes for static pre-rendering, cache invalidation, and Core Web Vitals optimization.
claudechatgptperplexity
#nextjs#turbopack#caching
Next.jsadvanced
Next.js Server vs. Client Component Boundary Decision Matrix
Audit page trees to push 'use client' directives to the leaves, minimize JS bundles, and maximize server streaming.
claudechatgptgemini
#nextjs#server-components#client-components
Next.jsadvanced
Server Actions & Optimistic UI Mutation Architect
Implement type-safe Server Actions with Zod validation, optimistic UI rollbacks via useOptimistic, and cache revalidation.
claudechatgptgemini
#server-actions#optimistic-ui#useoptimistic