Keeping your Yoast SEO metadata after moving to Next.js

-- Every Yoast override, one row per postSELECT  p.ID,  p.post_name AS slug,  p.post_type,  MAX(CASE WHEN m.meta_key = '_yoast_wpseo_title'      THEN m.meta_value END) AS seo_title,  MAX(CASE WHEN m.meta_key = '_yoast_wpseo_metadesc'   THEN m.meta_value END) AS seo_desc,  MAX(CASE WHEN m.meta_key = '_yoast_wpseo_canonical'  THEN m.meta_value END) AS canonical,  MAX(CASE WHEN m.meta_key = '_yoast_wpseo_meta-robots-noindex' THEN m.meta_value END) AS noindexFROM wp_posts pLEFT JOIN wp_postmeta m ON m.post_id = p.IDWHERE p.post_status = 'publish'  AND p.post_type IN ('post', 'page')GROUP BY p.ID, p.post_name, p.post_typeORDER BY p.post_type, p.post_name;

# Pull the resolved SEO block for every published postcurl "https://cms.example.com/wp-json/wp/v2/posts?per_page=100&_fields=slug,yoast_head_json" # Look at one post first, so you know the shape you are mappingcurl "https://cms.example.com/wp-json/wp/v2/posts?slug=my-post&_fields=yoast_head_json" | jq

{  "yoast_head_json": {    "title": "How we cut load time in half | Example Co",    "description": "A short account of the work, the numbers, and what we would do differently.",    "robots": { "index": "index", "follow": "follow" },    "canonical": "https://example.com/blog/cut-load-time",    "og_title": "How we cut load time in half",    "og_description": "A short account of the work and the numbers.",    "og_image": [{ "url": "https://example.com/uploads/cover.jpg", "width": 1200, "height": 630 }],    "twitter_card": "summary_large_image",    "schema": { "@context": "https://schema.org", "@graph": [] }  }}

export const metadata: Metadata = {  metadataBase: new URL('https://example.com'),  title: {    // Matches the old Yoast pattern: %%title%% %%sep%% %%sitename%%    default: 'Example Co',    template: '%s | Example Co',  },};

import type { Metadata } from 'next';import { getPostBySlug } from '@/lib/wp'; type Params = { params: Promise<{ slug: string }> }; export async function generateMetadata({ params }: Params): Promise<Metadata> {  const { slug } = await params;  const post = await getPostBySlug(slug);  if (!post) return { title: 'Not found' };   const seo = post.yoast_head_json ?? {};  const url = 'https://example.com/blog/' + slug;   // Yoast writes the full title including the site name. The layout template  // would append it a second time, so strip the suffix before using it.  const rawTitle = seo.title ?? post.title.rendered;  const title = rawTitle.replace(/ \| Example Co$/, '');   return {    title,    description: seo.description ?? stripTags(post.excerpt.rendered),    alternates: { canonical: seo.canonical ?? url },    robots: {      index: seo.robots?.index !== 'noindex',      follow: seo.robots?.follow !== 'nofollow',    },  };}

const OLD_HOST = 'https://old.example.com';const NEW_HOST = 'https://example.com'; /** * Yoast canonicals are absolute and point at the WordPress install. Move the * host across but keep the path, so a genuine cross page canonical still * resolves to the right target on the new site. */export function rewriteCanonical(canonical: string | undefined, fallback: string) {  if (!canonical) return fallback;  if (canonical.startsWith(OLD_HOST)) {    return NEW_HOST + new URL(canonical).pathname;  }  // Points somewhere else entirely, so it was deliberate. Leave it alone.  return canonical;}

type OgImage = { url: string; width?: number; height?: number }; export function shareImage(seo: YoastHead, post: WpPost): OgImage {  // 1. Explicit Open Graph image set in the Yoast panel  const explicit = seo.og_image?.[0];  if (explicit?.url) return explicit;   // 2. Featured image on the post  const featured = post._embedded?.['wp:featuredmedia']?.[0];  if (featured?.source_url) {    return {      url: featured.source_url,      width: featured.media_details?.width,      height: featured.media_details?.height,    };  }   // 3. Site default, so nothing ever shares without a card  return { url: 'https://example.com/og-default.webp', width: 1200, height: 630 };}

  const image = shareImage(seo, post);   return {    title,    description,    openGraph: {      type: 'article',      title: seo.og_title ?? title,      description: seo.og_description ?? description,      url,      publishedTime: post.date,      modifiedTime: post.modified,      images: [image],    },    twitter: {      card: seo.twitter_card ?? 'summary_large_image',      images: [image.url],    },  };

function schema(post: WpPost, url: string, description: string) {  return [    {      '@context': 'https://schema.org',      '@type': 'BlogPosting',      headline: post.title.rendered,      description,      url,      mainEntityOfPage: { '@type': 'WebPage', '@id': url },      datePublished: post.date,      dateModified: post.modified,      author: { '@type': 'Person', name: 'Author Name', url: 'https://example.com/about' },      publisher: { '@type': 'Organization', name: 'Example Co' },    },    {      '@context': 'https://schema.org',      '@type': 'BreadcrumbList',      itemListElement: [        { '@type': 'ListItem', position: 1, name: 'Home', item: 'https://example.com' },        { '@type': 'ListItem', position: 2, name: 'Blog', item: 'https://example.com/blog' },        { '@type': 'ListItem', position: 3, name: post.title.rendered, item: url },      ],    },  ];}

import { writeFileSync } from 'node:fs'; const OLD = 'https://old.example.com';const NEW = 'https://staging.example.com';const paths = JSON.parse(await (await fetch(OLD + '/wp-json/wp/v2/posts?per_page=100&_fields=link'))  .text())  .map((p) => new URL(p.link).pathname); const pick = (html) => ({  title: html.match(/<title[^>]*>([^<]*)<\/title>/i)?.[1]?.trim(),  description: html.match(/<meta name="description" content="([^"]*)"/i)?.[1],  canonical: html.match(/<link rel="canonical" href="([^"]*)"/i)?.[1],  ogImage: html.match(/<meta property="og:image" content="([^"]*)"/i)?.[1],  robots: html.match(/<meta name="robots" content="([^"]*)"/i)?.[1],}); const report = []; for (const path of paths) {  const [a, b] = await Promise.all([    fetch(OLD + path).then((r) => r.text()),    fetch(NEW + path).then((r) => r.text()),  ]);   const before = pick(a);  const after = pick(b);   for (const key of Object.keys(before)) {    // Flag anything that existed before and is now missing or different    if (before[key] && before[key] !== after[key]) {      report.push({ path, key, before: before[key], after: after[key] ?? null });    }  }} writeFileSync('meta-diff.json', JSON.stringify(report, null, 2));console.log(report.length + ' differences across ' + paths.length + ' pages');