Table of contents

SEO meta tags with Nuxt 3 and WordPress API

How to add meta tags to your Nuxt 3 application when used with the WordPress API

SEO meta tags with Nuxt 3 and WordPress API

In this post we will look at how to add seo meta tags to a Nuxt 3 project when used with the WordPress API.

Install the Yoast SEO WordPress plugin

The first thing we need to do to get our seo meta tags setup is to install the Yoast SEO WordPress plugin. So go ahead and install the plugin then activate it.

Yoast SEO plugin screenshot
Yoast SEO plugin screenshot

Create meta data

Now that you have installed the Yoast SEO plugin, its time to create the content that will be displayed in our meta tags! Go to your home page in the WordPress editor. You will now see a new section in your WordPress editor – Yoast SEO. Go ahead and fill out the inputs with your SEO meta data. If you are feeling pressured to write something good just write some random test content so we can test it out. Fill in the SEO title and Meta description at the least. Update the page to save your changes.

Yoast SEO in the WordPress post editor
Yoast SEO in the WordPress post editor

Test WordPress API endpoint

It’s now time to make sure our new SEO meta data is being pulled into our WordPress API. To do this, head to “/wp-json/wp/v2/pages”. You will now see the data for all your pages. Look for an object named yoast_head_json. Easiest way to find this is by doing a “find in page” cmd + f. You will see there is a yoast_head_json object for each of your WordPress pages.

Yoast head json in WordPress API response
Yoast head json in WordPress API response

The properties contained within this object contain all of our meta data! You will see title, description etc.. Remember, the endpoint you are currently viewing is for ALL of your pages. If you just wish to view the home page you will need to query the slug by doing something like this “/wp-json/wp/v2/pages?slug=home”.

Using useServerSeoMeta in Nuxt 3

Now we have got the WordPress side of things sorted, we need to pull the data in to our Nuxt 3 application! Luckily this is really simple. The Nuxt docs go over how to do this but there are a couple of things to watch out for. Head to the page in your Nuxt 3 application where you want to pull in the meta data. Add the following code:

<script setup>
const { data, pending, error, refresh } = await useFetch('<your-backend-url>/wp-json/wp/v2/pages', {
    query: { slug: 'home }
    title: () => data.value[0].yoast_head_json.title,
    description: () => data.value[0].yoast_head_json.description,
    ogUrl: () => data.value[0].yoast_head_json.og_url,
    ogTitle: () => data.value[0].yoast_head_json.og_title,
    ogDescription: () => data.value[0].yoast_head_json.og_description,
    ogImage: () => data.value[0].yoast_head_json.og_image,
    ogType: () => data.value[0].yoast_head_json.og_type,
    ogLocale: () => data.value[0].yoast_head_json.og_locale,
    twitterCard: () => data.value[0].yoast_head_json.twitter_card,
    twitterTitle: () => data.value[0].yoast_head_json.twitter_title,
    twitterDescription: () => data.value[0].yoast_head_json.twitter_description,
    twitterImage: () => data.value[0].yoast_head_json.twitter_image,
    <!-- Your template data -->

Important note regarding ogUrl

The ‘og_url’ property is pulled in from the ‘Site Address (URL)’ option in the WordPress general settings. With this in mind it is important that you set this to your frontend url. By default it will be pointing to your backend url.

WordPress Site Address (URL) setting.
WordPress Site Address (URL) setting needs to be set to your frontend URL.

useServerSeoMeta computed getter syntax

Because we are using dynamic data from our WordPress API, we need to access it using the computed getter syntax. This is mentioned in the Nuxt docs but can be a bit of a faff to get working. The code I have used above will allow you to access your meta data. Make sure it is structured like this: title: () => data.value[0].yoast_head_json.title. I know some of you reading this will have been pulling your hair out over this. You’re welcome.

Test SEO meta data in Nuxt 3 application

Our Nuxt 3 application is now pulling in the seo meta data for our home page. If we head to our home page in our frontend and view page source we will be able to see all of our meta data in the meta tags.

Yoast SEO meta tags visible in Nuxt 3 website's page source
Yoast SEO meta tags visible in Nuxt 3 website’s page source

Available meta tags

There are a lot of meta tags available to us through the Yoast SEO plugin. I have included the ones that I would personally use but you may wish to use more! A good list of the meta tags you might want to use can be found here.


I have videos too!

If you found this post helpful, please consider subscribing to the @codingoblin YouTube channel 😀

Super fast hosting
for your WP API & Nuxt 3 website

Host your backend WP API and frontend Nuxt 3 app on Cloudways. They make it so easy, even Grandma could deploy a website!

Cloudways screenshot

Want updates when I release something interesting?

Sign up for my newsletter to stay up to date.