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.
2
Answers
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).Yes, that’s correct you should use nuxtjs if you want meta tags. I was facing the same problem as the site was already built but client demanded he need meta tags also. So instead of migrating the whole site to nuxtjs, I decided to use index.php instead of index.html . Now I can add meta tags based on page type without migrating the whole project to nuxtjs.
suppose your index.html after building the project page looks like
My requirement was to get the meta from API for a particular page only, so the index.php would look something like
Now meta tags will be available on google, Facebook, Whatsapp, etc but as you are using PHP there might be some security issues that you need to consider as I only did this by sending 30 minutes in PHP.