Code & Dev Compatible: claude

JSON-LD for a Product or Article Page

Complexity Level: Expert
Prompt Code Block

Add JSON-LD structured data that matches the visible page. If the page does not show a price or a rating, the JSON-LD does not invent one. PAGE Type: [PRODUCT | ARTICLE | FAQ] Visible facts: [LIST WHAT A HUMAN CAN SEE] URL and image: [FIELDS] Ratings: [REAL SOURCE | NONE] DELIVER 1) The schema.org type and the required properties we can fill from visible data. A script tag with JSON.stringify of a typed object, escaped so a name cannot break out of the script. 2) The rule: every value in the JSON-LD is on the page. A mapping comment from property to the element. 3) What we omit when unknown (aggregateRating with no reviews, a fake review, a price of zero). 4) A test that renders the page and parses the script, asserting the name and the absence of rating when we have none. 5) The validator we run before shipping (the public rich-results test) and the one error it usually throws for this type. Do not mark up content that is hidden. Do not copy a rating from a competitor.

🌟 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

DifficultyExpert
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:

#json-ld #seo #schema #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