Headless WordPress SEO: Next.js 15 App Router Blueprint

<!-- Rendered on https://www.example.com/blog-post/ -->
<link rel="canonical" href="https://cms.example.com/blog-post/" />

                              [ SEARCH ENGINE CRAWLER ]
                                          |
                              +-----------+-----------+
                              |                       |
             (Requests www.domain.com)       (Requests cms.domain.com)
                              |                       |
                              v                       v
                   +--------------------+  +--------------------+
                   |  Next.js Frontend  |  | WordPress Backend  |
                   |  (Public Website)  |  | (API Content Hub)  |
                   +--------------------+  +--------------------+
                              |                       |
                       Renders HTML            Serves WPGraphQL
                       Metadata from API       Metadata natively
                              |                       |
                              v                       v
                   +--------------------------------------------+
                   |  <link rel="canonical"                     |
                   |  href="https://cms.domain.com/blog-post">  |
                   +--------------------------------------------+
                                          |
                              +-----------+-----------+
                              |                       |
                              v                       v
                [ Crawler De-indexes Frontend ]  [ Crawler Indexes CMS Backend ]
                   Public site disappears          Exposes raw backend URLs
                   from search results.            to user search results.

// utils/seo.ts

/**
 * Recursively searches through arrays, strings, and objects to replace
 * WordPress CMS domain instances with the public frontend domain.
 */
export function replaceWordPressUrls<T>(data: T, cmsUrl: string, frontendUrl: string): T {
  if (!data) return data;

  if (typeof data === 'string') {
    // Escape regex characters in the cmsUrl to prevent syntax issues
    const escapedCmsUrl = cmsUrl.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
    const regex = new RegExp(escapedCmsUrl, 'gi');
    return data.replace(regex, frontendUrl) as unknown as T;
  }

  if (Array.isArray(data)) {
    return data.map((item) => replaceWordPressUrls(item, cmsUrl, frontendUrl)) as unknown as T;
  }

  if (typeof data === 'object') {
    const updatedObj: Record<string, any> = {};
    for (const key in data) {
      if (Object.prototype.hasOwnProperty.call(data, key)) {
        updatedObj[key] = replaceWordPressUrls(data[key], cmsUrl, frontendUrl);
      }
    }
    return updatedObj as unknown as T;
  }

  return data;
}

// app/[slug]/page.tsx
import { Metadata } from 'next';
import { replaceWordPressUrls } from '@/utils/seo';

interface PageProps {
  params: Promise<{
    slug: string;
  }>;
}

interface SeoGraphData {
  title?: string;
  metaDesc?: string;
  canonical?: string;
  opengraphTitle?: string;
  opengraphDescription?: string;
  opengraphImage?: {
    sourceUrl: string;
  };
}

async function getPostSeoData(slug: string): Promise<SeoGraphData | null> {
  const query = `
    query GetPostSEO($slug: ID!) {
      post(id: $slug, idType: URI) {
        seo {
          title
          metaDesc
          canonical
          opengraphTitle
          opengraphDescription
          opengraphImage {
            sourceUrl
          }
        }
      }
    }
  `;

  try {
    const res = await fetch(process.env.WORDPRESS_API_URL!, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ query, variables: { slug } }),
      next: { revalidate: 3600 } // Cache API response for 1 hour
    });

    const { data } = await res.json();
    return data?.post?.seo || null;
  } catch (error) {
    console.error('Failed to fetch SEO metadata:', error);
    return null;
  }
}

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  // Await params in compliance with Next.js 15 specifications
  const { slug } = await params;
  const seoData = await getPostSeoData(slug);
  
  if (!seoData) {
    return {
      title: 'Post Not Found',
    };
  }

  const cmsUrl = process.env.NEXT_PUBLIC_WORDPRESS_URL!;       // e.g., https://cms.domain.com
  const frontendUrl = process.env.NEXT_PUBLIC_FRONTEND_URL!;   // e.g., https://www.domain.com

  // Clean canonical and description tags
  const cleanCanonical = replaceWordPressUrls(seoData.canonical || '', cmsUrl, frontendUrl);
  const cleanTitle = replaceWordPressUrls(seoData.title || '', cmsUrl, frontendUrl);
  const cleanDesc = replaceWordPressUrls(seoData.metaDesc || '', cmsUrl, frontendUrl);

  return {
    title: cleanTitle,
    description: cleanDesc,
    alternates: {
      canonical: cleanCanonical,
    },
    openGraph: {
      title: seoData.opengraphTitle ? replaceWordPressUrls(seoData.opengraphTitle, cmsUrl, frontendUrl) : cleanTitle,
      description: seoData.opengraphDescription ? replaceWordPressUrls(seoData.opengraphDescription, cmsUrl, frontendUrl) : cleanDesc,
      url: cleanCanonical,
      type: 'article',
      images: seoData.opengraphImage?.sourceUrl
        ? [{ url: replaceWordPressUrls(seoData.opengraphImage.sourceUrl, cmsUrl, frontendUrl) }]
        : [],
    },
  };
}

export default async function Page({ params }: PageProps) {
  const { slug } = await params;
  return (
    <main style={{ padding: '2rem', maxWidth: '800px', margin: '0 auto' }}>
      <article>
        <h1>Dynamically Rendered Post: {slug}</h1>
        <p>This page dynamically transforms backend WordPress URLs into production-ready frontend canonical links.</p>
      </article>
    </main>
  );
}

                     [ Incoming Request (User / Crawler) ]
                                       │
                                       ▼
                      [ Next.js Edge Middleware Router ]
                                       │
                     Is route excluded? (static/API assets)
                                   /         \
                              YES /           \ NO
                                 /             ▼
                                v        [ Local In-Memory Cache ]
                      [ Next.js Route ]       (301 Redirect Map)
                                                   │
                                            Does route exist?
                                           /                 \
                                    YES   /                   \ NO (Miss/Stale)
                                         /                     ▼
                                        v             [ WP REST Redirects API ]
                                 [ 301 Redirect ]     (With Timeout/Circuit Breaker)
                                 (Return to User)              │
                                                       WP API responds?
                                                      /                \
                                               YES   /                  \ NO (Fail/Timeout)
                                                    /                    ▼
                                                   v             [ Next.js Route ]
                                            [ Update Cache ]       (Pass through)
                                            [ 301 Redirect ]

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

// Exclude static assets, Next.js system routes, and media files to minimize invocation costs
const EXCLUDED_PATTERNS = [
  /^\/_next/,
  /^\/api\//,
  /^\/static\//,
  /^\/favicon\.ico/,
  /^\/sitemap\.xml/,
  /^\/robots\.txt/,
  /\.(png|jpe?g|gif|svg|webp|ico|css|js)$/i,
  /^\/$/,
];

interface RedirectRule {
  url: string;
  action_data: {
    url: string;
  };
  action_code: number;
}

interface CacheStore {
  data: Record<string, { target: string; code: number }> | null;
  lastFetched: number;
}

// In-memory cache persisted across warm Edge functions (Vercel/Cloudflare instances)
const cache: CacheStore = {
  data: null,
  lastFetched: 0,
};

const CACHE_TTL = 300000; // Cache duration in milliseconds (5 Minutes)
const TIMEOUT_MS = 1500;  // 1.5s circuit breaker timeout to protect TTFB

export async function middleware(request: NextRequest) {
  const { pathname, search } = request.nextUrl;

  // 1. Path Exclusion Check
  if (EXCLUDED_PATTERNS.some((pattern) => pattern.test(pathname))) {
    return NextResponse.next();
  }

  const now = Date.now();
  const WORDPRESS_API = `${process.env.NEXT_PUBLIC_WORDPRESS_URL}/wp-json/custom/v1/redirects`;

  // 2. Fetch and Cache 301 Redirect Map JSON from Headless WordPress
  if (!cache.data || now - cache.lastFetched > CACHE_TTL) {
    try {
      const controller = new AbortController();
      const timeoutId = setTimeout(() => controller.abort(), TIMEOUT_MS);

      const response = await fetch(WORDPRESS_API, {
        signal: controller.signal,
        headers: { 'Accept': 'application/json' },
        next: { revalidate: 300 }, // Enable Next.js fetch-level caching
      });

      clearTimeout(timeoutId);

      if (response.ok) {
        const rawRedirects: RedirectRule[] = await response.json();
        const redirectMap: Record<string, { target: string; code: number }> = {};

        // Convert array to O(1) hash map for sub-millisecond edge matching
        rawRedirects.forEach((rule) => {
          if (rule.url && rule.action_data?.url) {
            const cleanedSource = cleanPath(rule.url);
            redirectMap[cleanedSource] = {
              target: rule.action_data.url,
              code: rule.action_code || 301,
            };
          }
        });

        cache.data = redirectMap;
        cache.lastFetched = now;
      }
    } catch (error) {
      // Circuit Breaker: Fail-open to avoid blocking requests if the WordPress CMS is down or slow
      console.error('WordPress redirects endpoint timed out or failed:', error);
    }
  }

  // 3. Match Route and execute redirect
  if (cache.data) {
    const cleanedPath = cleanPath(pathname);
    const matchedRule = cache.data[cleanedPath];

    if (matchedRule) {
      const redirectUrl = new URL(matchedRule.target, request.url);
      
      // Carry forward original search query params (e.g. UTM tracking)
      if (search && !redirectUrl.search) {
        redirectUrl.search = search;
      }

      return NextResponse.redirect(redirectUrl, matchedRule.code);
    }
  }

  return NextResponse.next();
}

function cleanPath(path: string): string {
  return path.replace(/^\/|\/$/g, '').toLowerCase();
}

<?php
/**
 * Register custom REST API route to expose Redirection table rules to Next.js
 */
add_action('rest_api_init', function () {
    register_rest_route('custom/v1', '/redirects', [
        'methods'             => WP_REST_Server::READABLE,
        'callback'            => 'get_headless_redirect_rules_map',
        'permission_callback' => '__return_true', // Publicly cached endpoint
    ]);
});

/**
 * Query active redirects from the database and output them in a formatted response
 *
 * @return WP_REST_Response
 */
function get_headless_redirect_rules_map() {
    global $wpdb;

    // Table used by the 'Redirection' plugin
    $table_name = $wpdb->prefix . 'redirection_items';

    // Fallback if the plugin is deactivated or table doesn't exist
    if ($wpdb->get_var("SHOW TABLES LIKE '{$table_name}'") !== $table_name) {
        return new WP_REST_Response([], 200);
    }

    // Retrieve active exact-match URL redirection rules
    $results = $wpdb->get_results("
        SELECT url, action_data, action_code 
        FROM {$table_name} 
        WHERE status = 'active' AND match_type = 'url'
    ", ARRAY_A);

    $formatted_rules = [];

    foreach ($results as $row) {
        $formatted_rules[] = [
            'url'         => $row['url'],
            'action_data' => [
                'url' => $row['action_data']
            ],
            'action_code' => intval($row['action_code']),
        ];
    }

    $response = new WP_REST_Response($formatted_rules, 200);

    // Attach cache headers so proxy CDN services (e.g. Cloudflare) cache this payload
    $response->header('Cache-Control', 'public, max-age=300, stale-while-revalidate=60');

    return $response;
}

+-----------------------------------------------------------------+
|                       WordPress Database                        |
|             (Stores Posts, Pages, & Custom Post Types)          |
+-------------------------------#---------------------------------+
                                |
                   [ GraphQL / REST API Request ]
                                |
                                v
+-----------------------------------------------------------------+
|                      WPGraphQL Gateway                          |
|         (Cursor-based Pagination: batches of 100 nodes)         |
+-------------------------------#---------------------------------+
                                |
          +---------------------+---------------------+
          | Fetch Batch 1       | Fetch Batch 2       | Fetch Batch N
          v                     v                     v
+------------------+  +------------------+  +------------------+
| cursor: "XYZ1"   |  | cursor: "XYZ2"   |  | cursor: "XYZN"   |
+--------+---------+  +--------+---------+  +--------+---------+
         |                     |                     |
         +---------------------+---------------------+
                                |
                                v
+-----------------------------------------------------------------+
|            Next.js App Router (app/sitemap.ts)                  |
|    - Maps backend API domains to frontend production domains    |
|    - Handles Incremental Static Regeneration sitemap cache      |
+-------------------------------#---------------------------------+
                                |
                                v
+-----------------------------------------------------------------+
|                 Dynamic XML Sitemap Index                       |
|   sitemap.xml -> [sitemap/0.xml, sitemap/1.xml, ... sitemap/N]  |
+-----------------------------------------------------------------+

import { MetadataRoute } from 'next';

const WP_API_URL = process.env.WORDPRESS_API_URL || 'https://api.example.com/graphql';
const FRONTEND_URL = process.env.NEXT_PUBLIC_SITE_URL || 'https://example.com';

interface WPGraphQLNode {
  uri: string;
  modified: string;
}

interface GraphQLSitemapResponse {
  data: {
    contentNodes: {
      pageInfo: {
        hasNextPage: boolean;
        endCursor: string;
      };
      nodes: WPGraphQLNode[];
    };
  };
}

// Define ISR Revalidation Period (1 day = 86400 seconds)
// This powers the incremental static regeneration sitemap cache
export const revalidate = 86400;

/**
 * Recursively fetches all published WordPress slugs using cursor-based pagination
 */
async function fetchAllWPUrls(
  endCursor: string | null = null,
  accumulatedNodes: WPGraphQLNode[] = []
): Promise<WPGraphQLNode[]> {
  const query = `
    query GetSitemapNodes($first: Int!, $after: String) {
      contentNodes(
        first: $first
        after: $after
        where: { status: PUBLISH }
      ) {
        pageInfo {
          hasNextPage
          endCursor
        }
        nodes {
          uri
          modified
        }
      }
    }
  `;

  try {
    const response = await fetch(WP_API_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        query,
        variables: {
          first: 100, // Safe batch size to prevent server timeouts
          after: endCursor,
        },
      }),
      next: { revalidate: 86400 }, // Internal Next.js fetch cache integration
    });

    if (!response.ok) {
      throw new Error(`WordPress API returned status ${response.status}`);
    }

    const result: GraphQLSitemapResponse = await response.json();
    const { nodes, pageInfo } = result.data.contentNodes;
    const updatedAccumulation = [...accumulatedNodes, ...nodes];

    if (pageInfo.hasNextPage && pageInfo.endCursor) {
      return fetchAllWPUrls(pageInfo.endCursor, updatedAccumulation);
    }

    return updatedAccumulation;
  } catch (error) {
    console.error('Failed to fetch WordPress nodes for sitemap generation:', error);
    return accumulatedNodes; // Fallback to whatever has been successfully fetched
  }
}

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const wordpressNodes = await fetchAllWPUrls();

  // Map backend paths to target frontend production domains
  const dynamicRoutes = wordpressNodes.map((node) => ({
    url: `${FRONTEND_URL}${node.uri === '/' ? '' : node.uri}`,
    lastModified: new Date(node.modified),
    changeFrequency: 'weekly' as const,
    priority: 0.7,
  }));

  // Include static core routing URLs
  const staticRoutes = [
    {
      url: FRONTEND_URL,
      lastModified: new Date(),
      changeFrequency: 'daily' as const,
      priority: 1.0,
    },
  ];

  return [...staticRoutes, ...dynamicRoutes];
}

+-------------------+             +------------------+             +----------------------+
|  WordPress Admin  |             |  Editor Browser  |             | Next.js Server (API) |
+-------------------+             +------------------+             +----------------------+
          |                                |                                   |
          | 1. Click "Preview"             |                                   |
          |    Generate JWT                |                                   |
          |------------------------------->|                                   |
          |                                | 2. Redirect to Next.js API        |
          |                                |    GET /api/draft?secret&id&token |
          |                                |---------------------------------->|
          |                                |                                   |
          |                                |                                   | 3. Validate secret
          |                                |                                   | 4. Fetch draft via
          |                                |                                   |    WPGraphQL with JWT
          |                                |                                   |<-----------------+
          |                                |                                   |                  |
          |                                |                                   | 5. Return draft  |
          |                                |                                   |----------------->|
          |                                |                                   |
          |                                |                                   | 6. Enable Draft Mode
          |                                |                                   |    (Set bypass cookie)
          |                                |                                   | 7. Redirect to slug
          |                                |<----------------------------------|
          |                                |
          |                                | 8. GET /blog/post-slug (with cookie)
          |                                |---------------------------------->|
          |                                |                                   | 9. Bypass CDN cache,
          |                                |                                   |    fetch draft data,
          |                                |                                   |    render dynamically
          |                                |                                   |    with 'noindex'
          |                                |<----------------------------------|
          |                                | 10. Display preview page          |
          v                                v                                   v

import { draftMode } from 'next/headers';
import { redirect } from 'next/navigation';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const secret = searchParams.get('secret');
  const id = searchParams.get('id');
  const token = searchParams.get('token'); // JWT token from WordPress

  // 1. Verify the shared secret to prevent spoofing
  if (secret !== process.env.WORDPRESS_PREVIEW_SECRET || !id) {
    return new Response('Invalid preview secret', { status: 401 });
  }

  // 2. Validate the JWT token and draft existence against WPGraphQL
  try {
    const response = await fetch(process.env.WORDPRESS_API_URL!, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': token ? `Bearer ${token}` : '',
      },
      body: JSON.stringify({
        query: `
          query GetPreviewPost($id: ID!) {
            post(id: $id, idType: DATABASE_ID) {
              slug
              status
            }
          }
        `,
        variables: { id },
      }),
    });

    const { data } = await response.json();

    if (!data?.post) {
      return new Response('Draft post not found or unauthorized', { status: 404 });
    }

    // 3. Enable Next.js Draft Mode (sets the secure __prerender_bypass cookies)
    draftMode().enable();

    // 4. Redirect to the dynamic path, escaping preview queries
    const targetPath = `/blog/${data.post.slug || id}`;
    redirect(targetPath);
  } catch (error) {
    return new Response('Error initiating preview draft mode', { status: 500 });
  }
}

import { draftMode } from 'next/headers';
import { redirect } from 'next/navigation';

export async function GET(request: Request) {
  // Clear preview cookies to return to normal static generation mode
  draftMode().disable();
  
  const { searchParams } = new URL(request.url);
  const redirectPath = searchParams.get('redirect') || '/';
  
  redirect(redirectPath);
}

/**
 * Redirect WordPress custom preview links to the headless Next.js frontend.
 */
add_filter('preview_post_link', 'headless_custom_preview_link', 10, 2);

function headless_custom_preview_link($preview_link, $post) {
    // Only apply modifications to posts and standard custom pages
    if (!in_array($post->post_type, ['post', 'page'])) {
        return $preview_link;
    }

    $frontend_url = 'https://your-frontend-domain.com'; // Next.js site URL
    $preview_secret = getenv('WORDPRESS_PREVIEW_SECRET') ?: 'your_shared_preview_secret'; 
    
    // Generate the WPGraphQL JWT Token for the current editor session.
    $jwt_token = '';
    if (class_exists('WPGraphQL\JWT_Auth\Helper')) {
        $user_id = get_current_user_id();
        $jwt_token = WPGraphQL\JWT_Auth\Helper::get_token($user_id);
    }

    // Reconstruct the URL redirecting to the API draft handler
    return sprintf(
        '%s/api/draft?secret=%s&id=%d&token=%s',
        $frontend_url,
        urlencode($preview_secret),
        $post->ID,
        urlencode($jwt_token)
    );
}

import { revalidatePath } from 'next/cache';
import { NextRequest, NextResponse } from 'next/server';

export async function POST(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url);
    const secret = searchParams.get('secret');
    
    // 1. Authenticate the revalidation webhook request
    if (secret !== process.env.REVALIDATION_SECRET) {
      return NextResponse.json({ message: 'Invalid token' }, { status: 401 });
    }

    const body = await request.json();
    const slug = body.slug || body.post?.post_name;
    const postType = body.post_type || body.post?.post_type;

    if (!slug) {
      return NextResponse.json({ message: 'Slug is required for revalidation' }, { status: 400 });
    }

    // 2. Resolve target routes based on taxonomy/post types
    const targetPath = postType === 'page' ? `/${slug}` : `/blog/${slug}`;

    // 3. Purge Next.js static page cache for target path and indexes
    revalidatePath(targetPath);
    revalidatePath('/');
    revalidatePath('/blog');

    return NextResponse.json({ 
      revalidated: true, 
      path: targetPath, 
      timestamp: Date.now() 
    });
  } catch (error: any) {
    return NextResponse.json({ 
      message: 'Revalidation failed', 
      error: error.message 
    }, { status: 500 });
  }
}

<!-- Raw WordPress Database Payload -->
<img src="https://cms.whoisalfaz.me/wp-content/uploads/2026/06/hero-banner.png" alt="Decoupled Architecture" class="aligncenter size-large" />

// components/PostBody.tsx
import React from 'react';
import Image from 'next/image';
import parse, { HTMLReactParserOptions, Element } from 'html-react-parser';

interface PostBodyProps {
  content: string;
  cmsUrl: string;
  frontendUrl: string;
}

export default function PostBody({ content, cmsUrl, frontendUrl }: PostBodyProps) {
  const options: HTMLReactParserOptions = {
    replace: (domNode) => {
      // Intercept img tags in the document object model
      if (domNode instanceof Element && domNode.name === 'img') {
        const { src, alt, width, height, className } = domNode.attribs;
        
        if (!src) return;

        // Clean domain url (rewrite backend CMS host to frontend host)
        const cleanSrc = src.replace(cmsUrl, frontendUrl);

        // Parse attributes, fallback to common banner dimensions if missing
        const imgWidth = width ? parseInt(width, 10) : 800;
        const imgHeight = height ? parseInt(height, 10) : 450;

        // Optimize LCP: Set priority loading for the first image in content if it is above-the-fold
        const isFirstImage = domNode.parent?.children.filter((c: any) => c.name === 'img')[0] === domNode;

        return (
          <Image
            src={cleanSrc}
            alt={alt || 'Headless WordPress article image'}
            width={imgWidth}
            height={imgHeight}
            className={`${className || ''} w-full h-auto rounded-xl border border-gray-200 dark:border-gray-800 my-6`}
            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 75vw, 60vw"
            loading={isFirstImage ? 'eager' : 'lazy'}
            priority={isFirstImage}
            quality={85}
          />
        );
      }
    },
  };

  return (
    <div className="prose prose-lg max-w-none dark:prose-invert prose-headings:text-gray-900 dark:prose-headings:text-white">
      {parse(content, options)}
    </div>
  );
}

{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "BlogPosting",
      "@id": "https://whoisalfaz.me/blog/headless-wordpress-seo-nextjs-guide/#post",
      "isPartOf": {
        "@id": "https://whoisalfaz.me/blog/headless-wordpress-seo-nextjs-guide/"
      },
      "headline": "The Headless WordPress SEO Blueprint: Next.js 15 Integration Guide",
      "description": "Learn how to optimize headless WordPress SEO in Next.js 15. Prevent CLS on images, sync redirects, resolve canonical loops, generate dynamic sitemaps, and deploy draft previews.",
      "url": "https://whoisalfaz.me/blog/headless-wordpress-seo-nextjs-guide/",
      "mainEntityOfPage": "https://whoisalfaz.me/blog/headless-wordpress-seo-nextjs-guide/",
      "datePublished": "2026-06-28T00:00:00+06:00",
      "dateModified": "2026-06-28T00:00:00+06:00",
      "author": {
        "@type": "Person",
        "name": "Alfaz Mahmud Rizve",
        "url": "https://whoisalfaz.me/about/alfaz-mahmud-rizve/",
        "sameAs": [
          "https://github.com/whoisalfaz",
          "https://linkedin.com/in/whoisalfaz"
        ]
      },
      "publisher": {
        "@type": "Organization",
        "name": "whoisalfaz.me",
        "logo": {
          "@type": "ImageObject",
          "url": "https://whoisalfaz.me/images/logo.png"
        }
      },
      "image": "https://whoisalfaz.me/images/blog/headless-wordpress-seo-nextjs-guide-featured.png"
    },
    {
      "@type": "BreadcrumbList",
      "@id": "https://whoisalfaz.me/blog/headless-wordpress-seo-nextjs-guide/#breadcrumb",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "name": "Home",
          "item": "https://whoisalfaz.me/"
        },
        {
          "@type": "ListItem",
          "position": 2,
          "name": "Blog",
          "item": "https://whoisalfaz.me/blog/"
        },
        {
          "@type": "ListItem",
          "position": 3,
          "name": "Headless WordPress SEO Guide",
          "item": "https://whoisalfaz.me/blog/headless-wordpress-seo-nextjs-guide/"
        }
      ]
    }
  ]
}

// components/SeoSchema.tsx
import React from 'react';

interface SchemaProps {
  post: {
    title: string;
    slug: string;
    description: string;
    datePublished: string;
    dateModified: string;
    imageUrl: string;
  };
}

export default function SeoSchema({ post }: SchemaProps) {
  const postUrl = `https://whoisalfaz.me/blog/${post.slug}/`;
  const authorUrl = 'https://whoisalfaz.me/about/alfaz-mahmud-rizve/';

  const jsonLd = {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "BlogPosting",
        "@id": `${postUrl}#post`,
        "isPartOf": { "@id": postUrl },
        "headline": post.title,
        "description": post.description,
        "url": postUrl,
        "mainEntityOfPage": postUrl,
        "datePublished": post.datePublished,
        "dateModified": post.dateModified,
        "author": {
          "@type": "Person",
          "name": "Alfaz Mahmud Rizve",
          "url": authorUrl,
          "sameAs": [
            "https://github.com/whoisalfaz",
            "https://linkedin.com/in/whoisalfaz"
          ]
        },
        "publisher": {
          "@type": "Organization",
          "name": "whoisalfaz.me",
          "logo": {
            "@type": "ImageObject",
            "url": "https://whoisalfaz.me/images/logo.png"
          }
        },
        "image": post.imageUrl
      },
      {
        "@type": "BreadcrumbList",
        "@id": `${postUrl}#breadcrumb`,
        "itemListElement": [
          {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://whoisalfaz.me/"
          },
          {
            "@type": "ListItem",
            "position": 2,
            "name": "Blog",
            "item": "https://whoisalfaz.me/blog/"
          },
          {
            "@type": "ListItem",
            "position": 3,
            "name": post.title,
            "item": postUrl
          }
        ]
      }
    ]
  };

  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
    />
  );
}