I've been working with vue-meta npm package for updating my meta tags. But I see an issue that the value which I put inside metaInfo()
is not rendered correctly in google search description.
metaInfo () {
return {
title: 'FAQ',
meta: [
{name: 'description', content: 'How can we help you?'},
{property: 'og:title', content: 'How can we help you?'},
{property: 'og:site_name', content: 'FAQ site'},
{property: 'og:description', content: 'How can we help you?'}
]
}
}
If we open devtools in browser, we can see the meta tags were appended in DOM. So we have two descriptions now.
- The meta description which we put in
index.html
file. - The meta description which is appended in DOM with the help of the vue-meta package.
I been reading a lot about vue-meta and it hard for me to find a solution without using SSR or Nuxt, so that we could use vue-meta
without using SSR.
Unfortunately, this kind of question needs to be asked at the beginning of a project (SSR or not) and usually leads to decide what to use.
Good thing is that Nuxt is not that different from Vue. Since it's just a wrapper on top of Vue, you can throw 90% of your current app in it and it should work pretty fine (had somebody do just that few months ago and it went super smoothly + was pretty fast). Nuxt don't have a lot of drawbacks and essentially add nice things on top of Vue.
You could also give a try to this: https://prerender.io/vue-js/ (it does support SPAs)
But IMO, you'll get more control and flexibility with Nuxt with SSR (either in
static
orserver
target).