How to remove duplicate meta tags in nuxt-js?

Question

I am using nuxt version 2.15.7 in my project. Here is the nuxt.config.js file:

export default {
    head: {
        titleTemplate: '%s',
        title: 'info-book',
        meta: [
          {charset: 'utf-8'},
          {name: 'viewport', content: 'width=device-width, initial-scale=1'},
          {
            hid: 'description',
            name: 'description',
            template: '%s',
            content: 'this is the main description',
          },
          {name: 'format-detection', content: 'telephone=no'}
        ],
        link: [
            { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
        ]
    },
    // some other parts
}

I want to show the content of meta description defined here as a general meta description tag of my website. Then in any page like this dynamic page I want to replace it with the new one:

code of page in pages/dastebandi/_idCat/index.vue folder:

<script>

export default {
 
  head() {
    return {
      title: "info-book - " + this.titleHead,
      meta: [
        {
          hid: this.idCategory,
          name: 'description',
          content: this.descriptionContent
        }
      ]
    }
  },

  data () {
    return {
      categorizedBook: [],
      idCategory: this.$route.params.idCat,
      titleCategory: "",
      titleHead: "",
      descriptionContent: ""
    }
  },

  async fetch() {
    this.categorizedBook = await this.$strapi.$books.find("tags=" + this.idCategory);
    let categoryArr = await this.$strapi.$tags.find("id=" + this.idCategory);
    this.titleCategory = categoryArr[0]["name"];
    this.titleHead = categoryArr[0]["en_name"];
    this.descriptionContent = categoryArr[0]["description"];
  },

}
</script>

In the code mentioned above this.descriptionContent is some description that comes from database. Also this.idCategory is the dynamic id of the page and so is unique for each page. The reason that I used template: '%s', in my nuxt.config.js file is that according to nuxt docs, we can use options of vue-meta in our head() settings.

With the descriptions and code above, when I go to my home-page and see page source this is the result:

But when I go to some of the dynamic pages in that folder, here is the page source:

So why nuxt does not remove the main description in dynamic pages? Are my codes wrong?

Answer 1

When you define your custom meta into a page, you can override the nuxt.config.js metas. You have the hid attribute to identify each meta, but are overriding the hid so you are saying that you want to display a new meta in your dynamic page identified by "4".

So your head must be:

  head() {
    return {
      title: "info-book - " + this.titleHead,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.descriptionContent
        }
      ]
    }
  }

This description is used for SEO purposes, it must be a friendly user description about your page content so you do not need your description id.