Headless WordPress and SEO
WordPress is a popular choice for website development, primarily due to its SEO capabilities and ease of content management. With plugins like Yoast SEO, users can optimize content on a per-page basis effortlessly. But what if you’re using a headless WordPress setup with Next.js? In this article, we’ll explore how to integrate Yoast SEO with WPGraphQL and ensure proper SEO optimization on your frontend.
Using WordPress, Yoast, and WPGraphQL
For my project, I’m leveraging WordPress as the CMS, Yoast SEO for optimization, WPGraphQL for data fetching, and Next.js as the frontend framework. Thanks to the WPGraphQL for Yoast SEO plugin (huge shoutout to Ash Hitchcock), we can access Yoast SEO data through WPGraphQL and utilize it in our frontend.
Fetching SEO Data via GraphQL
If you’re familiar with WPGraphQL, fetching SEO data is straightforward. For any page, post, or custom post type, the SEO field includes all metadata provided by Yoast:
query PageQuery {
page(id: "/", idType: URI) {
title
uri
seo {
title
metaDesc
canonical
metaKeywords
metaRobotsNofollow
opengraphModifiedTime
# Additional fields...
}
}
}
Now, you can use this data in your Next.js project to populate the <head>
section for better SEO optimization.
The Easiest Way to Get Full SEO Metadata
Instead of manually extracting individual fields, you can use fullHead
, which returns the entire SEO metadata string, including structured data (application/ld+json
):
query PageQuery {
page(id: "/", idType: URI) {
title
uri
seo {
title
fullHead
}
}
}
Addressing the WordPress URL Issue
One issue with using fullHead
is that it references WordPress URLs instead of your frontend URLs. To resolve this, we need to replace WordPress URLs while preserving media URLs (e.g., Open Graph images).
Solution: Replacing WordPress URLs
We’ll create a function to transform the SEO string appropriately:
let wpUrl = "https://yourwpsite.com";
let siteUrl = "https://frontendsite.com";
export default function seoStringParser(data) {
data = data.replaceAll(wpUrl, siteUrl);
data = data.replaceAll(`${siteUrl}/wp-content`, `${wpUrl}/wp-content`);
return data;
}
Explanation:
- The first
replaceAll
swaps the WordPress URL with the frontend URL. - The second
replaceAll
restores media URLs (/wp-content
) to ensure assets like Open Graph images remain unchanged.
Integrating Yoast Data in a Next.js Site
Now that we have the corrected SEO string, we can add it to our Next.js project using the <Head>
component:
import Head from "next/head";
import parse from "html-react-parser";
import seoStringParser from "~/utils/seoStringParser";
export default function PageSEO({ seoData }) {
let { title, fullHead } = seoData;
return (
<Head>
<title>{title}</title>
{parse(seoStringParser(fullHead))}
</Head>
);
}
Key Benefits:
- Fully automated SEO: No need to manually add meta tags.
- Preserves structured data: Ensures rich results in Google Search.
- Fixes URL discrepancies: Corrects WordPress URLs to match your frontend.
Final Thoughts
By leveraging WPGraphQL for Yoast SEO, you can maintain the powerful SEO capabilities of WordPress in a headless setup. Implementing fullHead
with a URL transformation function ensures a seamless SEO experience on your frontend.
Have any questions? Feel free to reach out!