WordPress to Sanity + Next.js: How to Migrate Without Losing Your SEO Traffic

When moving from a WordPress site to a headless stack like Sanity + Next.js, the primary goal is to maintain existing search engine optimization (SEO) rankings. This migration process requires careful planning and execution to avoid losing years of SEO work. Here is a step-by-step checklist to ensure a smooth transition without compromising SEO traffic.

First, conduct a thorough audit of the existing WordPress site before initiating any migration work. This involves crawling every URL using a tool such as Screaming Frog or a similar crawler. Export the results, including the URL, title, meta description, H1 tag, canonical link, and status code for each page. Additionally, retrieve the top-performing pages from Google Search Console, noting their click and impression statistics over the past 12 months.

These metrics represent the pages that must not be altered or broken during the migration. Compile a list of content types present on the site, including posts, pages, custom post types, categories, tags, authors, and media. Pay special attention to any features that are plugin-driven, such as SEO plugin fields, redirects rules, forms, schema markup, and shortcodes.

The crawl file generated during this stage serves as the source of truth for later comparisons post-migration.

Next, design the content model in Sanity, a headless content management system. It is crucial not to replicate WordPress's structure directly. Instead, conceptualize how the content should be structured in Sanity and then map it accordingly. For instance, when defining a post type in Sanity, ensure that essential fields such as `title`, `slug`, `publishedAt`, `excerpt`, and `body` are included.

The `seoTitle` and `seoDescription` fields are particularly important as they preserve the metadata that has been meticulously optimized for SEO purposes. Additionally, maintain the `slug` field to ensure that the URLs remain consistent post-migration.

When extracting content from WordPress, you have the option to use the WordPress REST API via `/wp-json/wp/v2/posts` or export the content using a WordPress XML (WXR) export. The challenging aspect lies in converting the WordPress HTML content into a structured format compatible with Sanity, which uses Portable Text. To facilitate this conversion, the `htmlToBlocks` function from the `@portabletext/block-tools` library can be employed. This library helps transform the HTML content into a block-based format that Sanity can understand.

To begin the migration process, set up a Sanity client in your scripts. This involves initializing a client with the appropriate project ID, dataset, API version, and write token, which are typically obtained from the Sanity dashboard. Once the client is configured, the next step is to build a block content type based on the previously defined schema.

This involves compiling the schema into a structure that Sanity can utilize, ensuring that the `body` field, which stores the content, is represented as an array of blocks. By leveraging the `defaultSchema` and its associated fields, the migration script can read data from the WordPress website and transform it into the desired Portable Text format suitable for Sanity.

Throughout the migration process, it is vital to adhere strictly to the outlined steps and avoid any speculation or assumptions not supported by the provided source material. By meticulously following this checklist, you can migrate a content-heavy WordPress site to Sanity and Next.js while safeguarding SEO rankings and ensuring a seamless transition for users.