Nuxt.js head function not working in Article - vue.js

Question

I am trying to add some Open Graph tags to each Article of my blog that is hosted in Wordpress.
This code is working when I run "npm run dev", but when I run "npm run generate && firebase deploy" is not doing the same.
This is the code that I am using:
head() {
return {
title: 'This',
meta: [
{
hid: `og:description`,
name: 'og:description',
content: 'title'
},
{
hid: `og:title`,
name: 'og:title',
content: 'title'
}
]
}
In my nuxt.config.js I have configured the following in the head
head() {
return {
title: 'That',
meta: [
{
hid: `og:description`,
name: 'og:description',
content: '3'
},
{
hid: `og:title`,
name: 'og:title',
content: '4'
}
]
}
In the article, the title that is showing is "This" but, the meta is showing the content in nuxt.config.js ("3","4") instead of ("title", "title")
What I would like to obtain is the meta tag of the article one in the with the SSR.

Answer 1

My problem was using spa (single page application) mode instead of universal.
My working settings in nuxt.config.js:
export default {
mode: 'universal', // changed from mode: 'spa'
...
}

Answer 2

I would try using the nuxt-seo package. It adds full support for setting the most common social media tags, including auto generating canonical tags for each of your articles/pages.
You can checkout the docs site, which has a full nuxt blog example.
After installing the nuxt-seo package in your project, add it to your nuxt-config.js file:
{
modules: [
'nuxt-seo'
],
seo: {
// Module Options
}
}
Then on each article/page, you can set the page specific title, description, and pretty much any other meta tag:
<template>
<h1>Hello World</h1>
</template>
<script>
export default {
head({ $seo }) {
return $seo({
title: 'Home Page',
description: 'Hello World Page',
keywords: 'hello, world, home',
})
}
}
</script>
PS: I am the maintainer of the nuxt-seo package.