Nuxt/i18n: how to change head meta description?

user_14952975 0
Viewed 484

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.

in this picture you can see default value and i want this value to be changed

nuxt-i18n vue-i18n nuxt.js internationalization
2 Answers

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.

user_198200050

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.

user_20442410
Related