Next.js Dynamic Metadata, OpenGraph & JSON-LD SEO Auditor
Audit dynamic metadata generation, OpenGraph images (`opengraph-image.tsx`), canonical URLs, and schema markup in Next.js.
Compatibility & Specs
Compatible AI Models
ClaudeChatGPTGemini
Last UpdatedOct 3, 2026
Customizable Variables3 parameters
Main Prompt Template
156 words • 1274 characters
You are an Elite Technical SEO Architect and Next.js Metadata Specialist. I need to audit and implement dynamic SEO metadata, OpenGraph social cards, and structured schema for a Next.js App Router application.
Dynamic Route Pattern & Data Model:
[route_pattern]
Key SEO Requirements (Canonical URLs, Twitter Cards, OpenGraph, JSON-LD Schema):
[seo_requirements]
Branding & Visual Layout for Generated Social Cards:
[og_card_branding]
Deliver an end-to-end Next.js SEO Architecture:
1. Dynamic `generateMetadata()` Implementation: Code for `generateMetadata({ params, searchParams })` including title template, meta description, alternate canonical links, robots indexation directives, and OpenGraph/Twitter card payloads.
2. Dynamic OpenGraph Image (`opengraph-image.tsx`): Complete code using `next/og` `ImageResponse` with JSX and Tailwind styling to generate dynamic 1200x630 social share images with custom fonts.
3. Structured Data JSON-LD Component: Type-safe JSON-LD schema (e.g. `SoftwareApplication`, `Article`, `Course`, or `Product`) injected cleanly using `<script type="application/ld+json">`.
4. Verification & Testing Checklist: 4 exact tools/commands (Google Rich Results test, Twitter Card Validator, curl metadata checks) to verify indexing compliance.
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_pattern]
The route and entity data
[seo_requirements]
Target canonical, indexing rules, structured schema
[og_card_branding]
Visual aesthetics of the generated share card
3 parameters active
Live Customized OutputLive Preview
197 wordsYou are an Elite Technical SEO Architect and Next.js Metadata Specialist. I need to audit and implement dynamic SEO metadata, OpenGraph social cards, and structured schema for a Next.js App Router application.
Dynamic Route Pattern & Data Model:
app/prompts/[slug]/page.tsx rendering a Prompt object with title, shortDescription, category, and tags.
Key SEO Requirements (Canonical URLs, Twitter Cards, OpenGraph, JSON-LD Schema):
Strict canonical URL (`https://beautifulaiprompt.com/prompts/[slug]`), OpenGraph image, and `TechArticle` / `SoftwareApplication` JSON-LD schema.
Branding & Visual Layout for Generated Social Cards:
Sleek dark theme (#09090b), emerald green highlight (#10b981), category badge in top left, bold title, and brand logo in bottom right.
Deliver an end-to-end Next.js SEO Architecture:
1. Dynamic `generateMetadata()` Implementation: Code for `generateMetadata({ params, searchParams })` including title template, meta description, alternate canonical links, robots indexation directives, and OpenGraph/Twitter card payloads.
2. Dynamic OpenGraph Image (`opengraph-image.tsx`): Complete code using `next/og` `ImageResponse` with JSX and Tailwind styling to generate dynamic 1200x630 social share images with custom fonts.
3. Structured Data JSON-LD Component: Type-safe JSON-LD schema (e.g. `SoftwareApplication`, `Article`, `Course`, or `Product`) injected cleanly using `<script type="application/ld+json">`.
4. Verification & Testing Checklist: 4 exact tools/commands (Google Rich Results test, Twitter Card Validator, curl metadata checks) to verify indexing compliance.
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_pattern] | Dynamic Route Pattern | text | Required | The route and entity dataDefault: app/prompts/[slug]/page.tsx rendering a Prompt object with title, shortDescription, category, and tags. |
| [seo_requirements] | SEO Requirements | text | Required | Target canonical, indexing rules, structured schemaDefault: Strict canonical URL (`https://beautifulaiprompt.com/prompts/[slug]`), OpenGraph image, and `TechArticle` / `SoftwareApplication` JSON-LD schema. |
| [og_card_branding] | OG Card Branding | text | Required | Visual aesthetics of the generated share cardDefault: Sleek dark theme (#09090b), emerald green highlight (#10b981), category badge in top left, bold title, and brand logo in bottom right. |
Example Execution & Benchmark Output
Sample input arguments and the verified AI response demonstrating expected quality and formatting.
Sample VariablesInputs
[route_pattern]
app/prompts/[slug]/page.tsx rendering a Prompt object with title, shortDescription, category, and tags.
[seo_requirements]
Strict canonical URL (`https://beautifulaiprompt.com/prompts/[slug]`), OpenGraph image, and `TechArticle` / `SoftwareApplication` JSON-LD schema.
[og_card_branding]
Sleek dark theme (#09090b), emerald green highlight (#10b981), category badge in top left, bold title, and brand logo in bottom right.
Expected AI ResponseVerified Result
### Next.js Dynamic SEO & OpenGraph Implementation
```tsx
// src/app/prompts/[slug]/page.tsx
import type { Metadata } from 'next';
import { notFound } from 'next/navigation';
import { getPromptBySlug } from '@/lib/data/prompts';
interface Props {
params: Promise<{ slug: string }>;
}
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const { slug } = await params;
const prompt = getPromptBySlug(slug);
if (!prompt) return notFound();
const url = `https://beautifulaiprompt.com/prompts/${prompt.slug}`;
return {
title: `${prompt.title} | Beautiful AI Prompt`,
description: prompt.shortDescription,
alternates: {
canonical: url,
},
openGraph: {
title: prompt.title,
description: prompt.shortDescription,
url,
siteName: 'Beautiful AI Prompt',
type: 'article',
locale: 'en_US',
},
twitter: {
card: 'summary_large_image',
title: prompt.title,
description: prompt.shortDescription,
},
};
}
```
#### JSON-LD Structured Data Injection
```tsx
export default async function PromptPage({ params }: Props) {
const { slug } = await params;
const prompt = getPromptBySlug(slug);
const jsonLd = {
'@context': 'https://schema.org',
'@type': 'TechArticle',
headline: prompt.title,
description: prompt.shortDescription,
url: `https://beautifulaiprompt.com/prompts/${prompt.slug}`,
datePublished: prompt.createdAt,
dateModified: prompt.updatedAt,
articleSection: prompt.category,
keywords: prompt.tags.join(', '),
};
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<main>{/* Page content */}</main>
</>
);
}
```
Best Use Cases
Scenarios and roles where this prompt produces maximum leverage.
Next.js developers optimizing programmatic dynamic routes for Google Search rankings
Content creators and SaaS founders configuring automated dynamic social share previews
Technical marketers adding structured JSON-LD schemas to earn Google rich search snippets
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.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
Next.js Edge Middleware & Session Gatekeeper
Design lightweight edge middleware for route protection, JWT validation, multi-tenant rewrites, and security headers.
claudechatgpt
#nextjs-middleware#edge-runtime#authentication
Next.jsadvanced
Next.js 15 App Router Enterprise Architecture & Route Group Blueprint
Design a scalable App Router file structure with route groups, shared layouts, parallel routes, and intercepted modals.
claudechatgptgemini
#nextjs#app-router#nextjs-15