How to fix missing schema article on Next.js (Headless)

Add Article schema markup (JSON-LD) to every blog post and editorial page so Google can identify and rich-result-enhance your content in search.

Steps for Next.js (Headless)

  1. Create a reusable `ArticleJsonLd` component at `components/seo/ArticleJsonLd.tsx` that accepts article metadata props and renders a `<script type='application/ld+json'>` tag using Next.js's `<Script>` (or a plain `<script>` inside a Server Component).
  2. In your blog post page — `app/blog/[slug]/page.tsx` (App Router) or `pages/blog/[slug].tsx` (Pages Router) — fetch the article data (title, description, author, dates, images) from your headless CMS/API inside `generateMetadata` / `getStaticProps` / `getServerSideProps`.
  3. Import and render `<ArticleJsonLd>` inside the page component, passing the fetched article fields as props. For the App Router this sits directly in the Server Component; for the Pages Router place it inside the JSX return alongside `<Head>`.
  4. Ensure every required Article schema field is populated: `headline`, `image`, `datePublished`, `dateModified`, `author` (with `@type: 'Person'` or `'Organization'`), `publisher`, and `url`. Fall back gracefully when optional CMS fields are absent.
  5. Extend the same `ArticleJsonLd` component to editorial/landing pages by passing `@type: 'Article'` or the more specific `'BlogPosting'` / `'NewsArticle'` depending on the content type returned by your CMS.
  6. Validate the rendered output with Google's Rich Results Test (https://search.google.com/test/rich-results) and the Schema Markup Validator (https://validator.schema.org/) before deploying.
Official Next.js (Headless) documentation ↗

What is missing schema article?

Article schema is a small block of structured data — written in a format called JSON-LD — that you embed in a page's HTML to tell Google (and other search engines) that the page is an article, who wrote it, when it was published, and what it's about. Think of it as a machine-readable label that sits invisibly in your page code. Without it, Google has to guess at all of those details. With it, Google has certainty — and that certainty unlocks extra search features. This is especially important for the Answer Engine Optimization (AEO) pillar: search engines increasingly pull answers directly from structured, labeled content, and Article schema is the foundation that makes your editorial pages eligible for that treatment.

Pages with Article schema are eligible for Google's rich results — including enhanced article cards in Discover, "Top stories" carousels, and knowledge-panel-style answer snippets — which can dramatically increase click-through rates compared to plain blue links. As AI-driven search features (like Google's AI Overviews and Bing's Copilot) look for authoritative, well-labeled sources to cite in direct answers, missing Article schema means your content is less likely to be selected as a source, costing you visibility even when your writing is excellent. For ecommerce stores with blogs, guides, or how-to content, this directly affects the organic traffic those pages drive to product pages. It's a zero-cost technical change with a measurable traffic upside.

See the complete Missing schema article guide for every platform and the full background.

Not sure if your Next.js (Headless) store has this?

Run a free SEOLZ scan — we’ll find missing schema article and every other issue across your whole site.

Scan my site free

Fix missing schema article on another platform