Integrate Yoast SEO Metadata in Next.js

Next.js developers often struggle to maintain proper SEO for dynamic pages powered by WordPress. One effective solution is using Yoast SEO metadata, which WordPress exposes via yoast_head_json. This metadata includes titles, descriptions, canonical URLs, OpenGraph data, Twitter cards, and more. By integrating Yoast SEO metadata in Next.js, you can create search engine-friendly pages and enhance social sharing previews automatically.

Why use Yoast SEO Metadata

Yoast SEO stores structured metadata for every post in WordPress. Fetching this metadata into Next.js provides several advantages:

• Automatic SEO handling without duplicating metadata manually.
• Rich previews for social media platforms such as Facebook, LinkedIn, and Twitter.
• Correct robots directives to improve page indexing.
• Easier content management since SEO data stays in WordPress.

Using Yoast SEO metadata ensures consistent SEO performance across all posts and pages.

Fetching WordPress posts

You can fetch posts dynamically using a helper function like this:

export async function getPostBySlug(slug: string): Promise<Post> {
  return wordpressFetch<Post[]>("/wp-json/wp/v2/posts", { slug }).then(
    (posts) => posts[0]
  );
}

This retrieves a post by its slug, ensuring clean URLs and better SEO.

Transforming Yoast SEO Metadata

After fetching, transform the Yoast SEO metadata into the Next.js Metadata type:

import { yoastMetadata } from "@/lib/yoast";

export async function generateMetadata({ params }) {
  const post = await getPostBySlug(params.slug);
  return yoastMetadata(post.yoast_head_json, {
    title: post.title.rendered,
    description: post.excerpt?.rendered,
  });
}

This ensures proper handling of OpenGraph images, Twitter cards, robots directives, and article timestamps.

Summary of Yoast Metadata helper code

Your helper functions include:

• Types for Yoast SEO metadata:

// Common types fot Yoast SEO metadata
export interface YoastSeo {
  title?: string;
  description?: string;
  canonical?: string;
  robots?: { index?: string; follow?: string; ...};
  og_locale?: string;
  og_type?: string;
  og_title?: string;
  og_description?: string;
  og_url?: string;
  og_site_name?: string;
  og_image?: YoastSeoImage[];
  article_published_time?: string;
  article_modified_time?: string;
  author?: string;
  twitter_card?: string;
  twitter_misc?: Record<string, string>;
  schema?: Record<string, any>;
}

// Yoast Og image type
export interface YoastSeoImage {
  url: string;
  width?: number;
  height?: number;
  type?: string;
}

• Function to transform Yoast → Next.js Metadata (yoastMetadata)
• Integration in dynamic Next.js pages via generateMetadata

These helpers allow your pages to fully support SEO, OpenGraph, and Twitter Cards without manual configuration.

Implementing dynamic pages

export default async function PostPage({ params }) {
  const post = await getPostBySlug(params.slug);
  return <article dangerouslySetInnerHTML={{ __html: post.content.rendered }} />;
}

Each page automatically inherits the metadata defined in WordPress. Using Incremental Static Regeneration (ISR) ensures updated SEO fields propagate quickly.

Benefits of using Yoast SEO Metadata

1. Centralized SEO control in WordPress.
2. Correct metadata for search engines.
3. Rich social sharing previews.
4. Reduced maintenance and duplication.
5. Scalable for blogs, e-commerce, and dynamic sites.

Explore the complete code

The full implementation, including Yoast metadata types, transformation functions, and example Next.js pages, is available on GitHub:

👉 View Full Code on GitHub

By visiting the repository, you can copy ready-to-use code, explore enhancements, and see all the fetch and metadata helpers in action.

Optimizing further

• Include featured images for OpenGraph/Twitter cards.
• Add custom JSON-LD schema for rich snippets.
• Include category/tag metadata for internal linking and better indexing.
• Generate dynamic OpenGraph images per post.

These steps improve SEO performance, user engagement, and social media visibility.