Table of contents
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.
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.
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 “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.
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 “
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 }})useServerSeoMeta({ 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,})</script><template> <!-- Your template data --></template>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.
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.
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 😀
