Add BlogPosting JSON-LD in a server component

Why this matters

Serialize article markup on the server so crawlers see it in HTML.

Before you start

• A blog route that loads post data on the server
• Canonical post URL and absolute image URL available in the post record

How to apply it

1. Load the post in the server component

   In app/blog/[slug]/page.tsx await params, load the post and keep the record in scope for both the JSX and the JSON-LD object, so markup and visible content share one source.

   Check: curl -s your production domain/blog/<slug> contains the headline text without executing JavaScript.

2. Build the BlogPosting object

   Set @context, @type BlogPosting, headline, description, datePublished, dateModified, author with name and url, image as absolute URLs, mainEntityOfPage and publisher.

   Check: The Rich Results Test reports BlogPosting with no errors for headline, datePublished, author and image.

3. Render the JSON-LD script tag

   Return a script element with type application/ld+json and dangerouslySetInnerHTML set to JSON.stringify(postSchema). Never interpolate raw CMS strings into the script body.

   Check: curl -s your production domain/blog/<slug> | grep -c 'application/ld+json' returns 1 and the block parses with JSON.parse.

4. Match markup to visible content

   Headline, author and dates in the JSON-LD must equal the rendered H1, byline and time element. Update or drop fields when the post changes so stale dates do not persist.

   Check: For three posts the JSON headline and datePublished match the visible H1 and time datetime values.

5. Keep one representation

   Remove microdata or duplicate JSON-LD for the same post, including blocks injected by SEO packages or template scripts, so one BlogPosting entity reaches the parser.

   Check: The page source has one BlogPosting block and no itemprop articleBody duplication.

<goal>
page snippet verify layout audit anchor serp route render page cluster snippet layout page.
</goal>

<context>
measure report page metadata audit heading metadata priority cluster page heading alt layout serp.
</context>

<discover_first>
alt schema priority audit pipeline markup sitemap content redirect caching heading layout serp verify.
</discover_first>

<constraints>
canonical report alt serp canonical audit render effort snippet metadata verify report section query.
</constraints>

<plan>
audit index report page metadata section payload target crawler cluster serp snippet report sitemap.
</plan>

<verify>
index serp cluster route route intent template verify breadcrumb heading heading audit schema metadata.
</verify>

<report>
payload locale audit payload content image cluster page heading heading intent content measure heading.
</report>

Source: seo-mcp playbook · curated entry · report an error