Code & Dev Compatible: claude

Typed Metadata Helper for Pages

Complexity Level: Beginner
Prompt Code Block

Build one helper that sets title, description, canonical, and Open Graph for a page. No page hand-rolls a partial tag set. FRAMEWORK [NEXT.JS APP ROUTER | ASTRO] Site name: [NAME] Default OG image: [PATH] Title pattern: [PAGE — SITE] Locales: [ONE | SEVERAL] DELIVER 1) The function or generateMetadata shape: required title and description, optional image, canonical path, noindex flag. Description length warned over 160, title warned over 60, in dev only. 2) Canonical is absolute, uses the configured site URL, and does not include tracking params. Show the strip list. 3) OG and Twitter tags that fall back to the default image, with alt text required when the image is not the default. 4) noindex for app screens, search results, and previews. A test that a private route emits noindex and a public post does not. 5) JSON-LD stays out of this helper if it is page-specific; say where it goes instead. Do not set a canonical to a different page than the one we are on unless I named a duplicate. Do not default descriptions to the title.

🌟 Example Output / Preview

### Generated Component Preview: ```typescript // Fully validated modern structure import { z } from 'zod'; export const RequestSchema = z.object({ id: z.string().uuid(), createdAt: z.date().default(() => new Date()), data: z.record(z.string(), z.any()) }); export type ValidatedRequest = z.infer<typeof RequestSchema>; ```

Prompt Metadata

DifficultyBeginner
Compatibilityclaude

Primary Use Cases:

  • •Legacy code modernization & technical refactoring
  • •Full-stack layout generation & component structuring
  • •CI/CD workflow automation & unit/E2E testing suites

Associated Tags:

#seo #nextjs #metadata #typescript

💡 Pro Tips & Advice

1. Use bracketed items: Be sure to fill out all [PLACEHOLDER] elements with specific details before sending the prompt to the AI model.

2. Adjust temperature: For creative tasks, set AI temperature higher (e.g., 0.8), or lower (e.g., 0.2) for strict coding/technical tasks.

🔗 Related AI Prompts

Code & Dev
★ Featured

Full SaaS Landing Page Build Spec (SEO + Conversion)

You are a Staff Product Designer + Frontend Engineer + SEO strategist. Build a complete, production-ready marketing landing page f...

Compatible:claudeDiff:Advanced
#landing-page #saas #seo #nextjs #tailwind
Code & Dev
★ Featured 🔥 Trending

SaaS Analytics Dashboard Full Build Spec

You are a Principal Product Designer + Frontend Lead. Design and specify a complete [LIGHT | DARK] analytics dashboard for [PRODUC...

Compatible:claudeDiff:Intermediate
#dashboard #saas #ui #tailwind #seo
Code & Dev

SaaS Admin Panel Dashboard Build Spec

Design a full internal Admin Dashboard for [PRODUCT_NAME] used by [ADMIN_ROLE: support | ops | super-admin]. --- 🎯 CONTEXT Adm...

Compatible:claudeDiff:Intermediate
#admin #dashboard #saas #crud #tailwind