In some case, we do need a clean tag without any other redundancy attributes.

[any35]

The problem

the vue-meta add an attribute to observe it's change.

Vue.use(Meta, {
  attribute: 'data-vue-meta', // the attribute name vue-meta adds to the tags it observes
})

It work in most case, but not all. for example, when I verify a website in baidu.com, I have to add a tag in html's head

<meta name="baidu-site-verification" content="xxxxxxxx"/>

I add the code like this,

meta: [
  {name: 'baidu-site-verification', content: 'xxxxxxxx'}
]

Unfortunately, the code above will fail to verify, because it generate the html like this

<meta data-vue-meta="true" name="baidu-site-verification" content="xxxxxxxx"/>

the attribute data-vue-meta is NOT expect in this verification.

The solution

The keyword once mean not to observe the tag's change, and not need to generate a redundancy attribute.

meta: [
  {name: 'baidu-site-verification', content: 'xxxxxxxx', once:true }
]

and it will generate the html tag as expect

<meta name="baidu-site-verification" content="xxxxxxxx"/>

Any other good idea?

[atinux]

This sounds good @any35

[atinux]

Can you create a PR to update the documentation please @any35

[BenGamma]

Hi guys, I had the same problem to handle : facebook's meta are not recognized when attribute 'data-vue-meta' is present.
I've try the solution provided buy @any35 but instead of removing the 'data-vue-meta' attribute, it added once="true" to the html meta tag.
Any ideas on this ? Thanks

[mathieumagalhaes]

I'm seeing the same result as BenGamma.
Using vue-meta v1.0.4.

My config:

...
metaInfo() {
  return {
    meta: [
      { property: 'og:title', content: 'Blog example.com, once: true },
      { property: 'og:url”', content: 'https://example.com/blog', once: true },
      { property: 'og:type', content: 'blog', once: true },
      { property: 'og:image', content: 'https://example.com/logo-256.png', once: true },
      { property: 'og:description”', content: 'Blog example.com', once: true },
    ],
    title: 'Blog',
    titleTemplate: 'Example Site | %s',
    htmlAttrs: {
      lang: 'en',
     },
    };
  },
...

Furthermore:
Examining closer to what Facebook exactly scrapes, I see that the page source of my page does not include these meta tags

Solution
I was using the bundleRenderer example from the latest Vue HN project.
I deleted the index.html file and used

const template = '<!--vue-ssr-outlet-->';

And in inside the renderToString() function I used res.end(...) as in the Vue-meta example.

I can confirm everything is working as intented