Nuxt/i18n: how to change head meta description? - internationalization

Question

How can I change the head meta tag og:description content value that is added by i18n as default?
I know I can rewrite it in every page with head function, but I'm looking for better way.
Maybe the best way is to force i18n to fill the og:description content value with the value of the description tag content value.

Answer 1

I had the same problem and couldn't find a fancy methods out of the box. So I came up with this solution:
export default {
computed: {
locale() {
return this.$i18n.localeProperties.code;
}
},
head() {
const heads = {
'en': {
title: 'English Title',
meta: [
{
hid: 'description',
name: 'description',
content: 'Home page description'
}
],
},
'de': {
title: 'Deutscher Titel',
meta: [
{
hid: 'description',
name: 'description',
content: 'Home page description'
}
],
}
};
return heads[this.locale];
}
}
Create an object headsfor all the languages you want to support and let the head function return the proper one based on the locale variable. I used a computed property, because it is also used in the template.

Answer 2

If you want to have the same value for og:description on every page, you can set it in nuxt.config.js or in /layout/default.vue. Unless you specify a new value in /pages/yourPage.vue this will make the tag value the same on every page.
In the meta of you head in nuxt.config.js add the following:
export default {
head: {
meta: [
{ hid: 'og:description', property: 'og:description' content: 'My own description' },
],
}
}
You can do the same with og:title, etc.

Answer 3

Based on #doebi 's approach I came up with the following solution to the problem.
export default {
head() {
return this.headData
}
computed: {
headData() {
const t = this.$i18n.t
return {
title: t('thispages.title'),
meta: [
{
hid: 'description',
name: 'description',
content: t('thispages.description')
}
],
}
}
},
...
}
And in Nuxt with composition API we can utilize useMeta
export default {
setup(){
const
{ t } = useI18n() // from 'vue-i18n'
useMeta({ // from '#nuxtjs/composition-api
title: t('thispages.title'),
meta: [
{
hid: 'description',
name: 'description',
content: t('thispages.description')
}
]
})
},
...
}