Setting up WordPress headless SEO with TreacleWP
Fri — 23 Oct, 2020

WordPress is known for it’s world-class SEO, there isn’t much you need to do and you will have solid foundations. When de-coupling a website you will know that you will need to do this all manually as the traditional WordPress plugin will not hook it into your theme anymore.

As we do not decide what front-end framework you use, we cannot tell you how to set it up within your front-end, however, we can give you 2 methods on supplying the data. This is where we can enforce opinion.

As such, are recommended route is with Yoast SEO, we pre-install this out the box and highly recommend, you can overwrite this with your own plugins, but this is our route.

Method 1:

Unfortunately, we do not think it’s quite perfect for headless builds, and by default the endpoint provides a escaped string a little like this:

{
   "yoast_head": "<!-- This site is optimized with the Yoast SEO plugin v15.1.1 - https://yoast.com/wordpress/plugins/seo/ -->\n<title>Home - TreacleWP</title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n<meta name=\"twitter:card\" content=\"summary_large_image\" /></script>\n<!-- / Yoast SEO plugin. -->",
}

This is a shortened version, but it outputs everything you need into a string. This maybe perfect for you.

Method 2:

As we do not want to pre-install lots of different plugins, we just install the basics, as such the above method might be enough for you. If you’d like a more refined approach, one that we use, we recommend installing Yoast to REST Api, it will provide a endpoint like this:

{
    "yoast_meta": {
        "yoast_wpseo_title": "WordPress API-first hosting | TreacleWP",
        "yoast_wpseo_metadesc": "",
        "yoast_wpseo_canonical": "https://www.treaclewp.com"
    }    
}    

This is much better and allows complete control. However, it’s very basic, it will not give you every meta tag going, so although you’re endpoints will be smaller, if you want advanced SEO skip to the next method.

Method 3:

As per method 2, this is another plugin, although it’s pretty advanced and adds into the endpoint every different type of meta tag, so it’s worth asking yourself what you need. Although technically it’s good to have all, sometimes it’s not worthwhile depending on your use-case.

The plugin is REST API – Head Tags and it outputs a little different:

{
    "head_tags": [
        {
            "tag": "title",
            "content": "WordPress API-first hosting | TreacleWP"
        },
        {
            "tag": "link",
            "attributes": {
                "rel": "canonical",
                "href": "<https://www.treaclewp.com/blog/setting-up-wordpress-headless-seo-with-treaclewp/>"
            }
        }
    ]
}

As you can see it requires a little more work from your app to output this, but it’s granular SEO, so use what you need.

Bonus: Method 4, There are other plugins, such as WP REST Yoast Meta that provide custom endpoints, but we prefer to do a single larger request than 2 small requests. The beauty of TreacleWP is it’s totally up to you how you retrieve your data, but we’d like to share our opinion.

GraphQL Method:

Last but not least, you’ll have noticed we’ve heavily focus on the WordPress REST API here. Well those that use our GraphQL route courtesy of WPGraphQL then we recommend partnering up with WPGraphQl Yoast SEO plugin. All work flawlessly with TreacleWP.

Last Update: 7/11/2020

Ready to get started?
WordPress has never been so easy to go headless with.
Get Started