Free Tool
Open Graph & Social Card Previewer
Simulate and debug how your page title, description, and preview image render across social platforms. Generate a ready-to-paste Next.js metadata block with one click.
Social Card Preview
Generated Code
export const metadata: Metadata = {
metadataBase: new URL("https://claudeagents.co"),
title: "claudeagents — Specialist AI Agents for Claude Code",
description: "Fullstack, SEO, and marketing agents built for Claude Code CLI. Automated directives and local execution.",
openGraph: {
title: "claudeagents — Specialist AI Agents for Claude Code",
description: "Fullstack, SEO, and marketing agents built for Claude Code CLI. Automated directives and local execution.",
url: "https://claudeagents.co",
siteName: "claudeagents",
images: [
{
url: "https://claudeagents.co/claude-agent-og.png",
width: 1200,
height: 630,
alt: "claudeagents — Specialist AI Agents for Claude Code",
},
],
type: "website",
},
twitter: {
card: "summary_large_image",
title: "claudeagents — Specialist AI Agents for Claude Code",
description: "Fullstack, SEO, and marketing agents built for Claude Code CLI. Automated directives and local execution.",
images: ["https://claudeagents.co/claude-agent-og.png"],
},
};Frequently Asked Questions
Common questions about Open Graph tags, social card previews, and metadata implementation.