---
title: "Add BlogPosting JSON-LD in a server component"
description: "Article markup helps Google understand headline, author, publish date and image, and feeds both rich results and AI answers. In a Next.js App Router project, render a JSON-LD script inside the blog page server component from the same fields the page displays. Keep the markup valid and identical to the visible content."
url: "https://seo-mcp.io/t/add-blogposting-json-ld-in-a-server-component"
---

# Add BlogPosting JSON-LD in a server component

Article markup helps Google understand headline, author, publish date and image, and feeds both rich results and AI answers. In a Next.js App Router project, render a JSON-LD script inside the blog page server component from the same fields the page displays. Keep the markup valid and identical to the visible content.

## Prerequisites

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

## Steps

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.

## Source

@seo-mcp on 2026-10-19: https://developers.google.com/search/docs/appearance/structured-data/article

Canonical: https://seo-mcp.io/t/add-blogposting-json-ld-in-a-server-component