Need to set meta tags dynamically

I want to set meta tags for the product page, static page, etc…
For example:
Want to set below meta tags for each product page.

  1. og:url
  2. og:type
  3. og:title
  4. og:description
  5. og:image

Does anyone have an idea of how to do with Vue-storefront?

I tried to set with the state but it says this.$store.state.route.meta is read-only properties.

Hi there! we’re using the https://github.com/nuxt/vue-meta package for metaInfo. You can set the metaInfo() at the component level - here is an example. Here is another one probably more suitable for your case.

1 Like

Okay,
Let me check & try

Thanks @pkarw

Yes, It’s works for me @pkarw .
But I don’t know why not get product object at time of set meta tags

Here is my code for that in Product.vue page

metaInfo: {
    meta: [
      {
        'property': 'og:title',
        'content': this.product.name,
        'vmid': 'og:title'
      }
    ]
  },

Error:

1 Like

hello @pkarw, i am also getting same issue. can you please help us?
thanks in advance.

Can you please create a bug / feature request for this on github?

@chirag.viradiya I found that I had to call data via serverPrefetch() or asyncData() in order to get product data available at render.

https://ssr.vuejs.org/guide/data.html#logic-collocation-with-components

Not sure if this is something you are doing already, but when I had a similar issue I found this method sorted it for me.

Hope it helps