Vue dynamic add meta data to inner components

Question

Im building vue spa with vue router and on FAQ page i want to dynamically add meta title, description and permalink for each question (using accordion), so to show up them individually on google serp and on click, page to be auto scrolled on it.

Can you give me some hints how to do it?

Well, if you want to have a page to be indexed by search engine you can't simply use a SPA, you'll need some SSR(Server Side Rendering) so the GoogleBot(any other bot) can navigate through your app's html and index it. I recommend you take look at Nuxtjs(nuxtjs.org) or Quasar framework(quasar.dev) — Giovane
– Giovane, Commented Nov 21, 2020 at 14:14

procoib · Accepted Answer · 2020-11-21 14:23:20Z

0

A single page application isn't great for search engines. But if you don't want the hassle of moving your current vue project to another framework such as Nuxt.js, id recommend using vue-meta to add the meta tags to each page in your route, and the vue-prerender spa plugin, to build the static html files for search engines to scan the meta data of each page:

vue-meta: https://www.npmjs.com/package/vue-meta

vue-prerender: https://github.com/chrisvfritz/prerender-spa-plugin

answered Nov 21, 2020 at 14:23

procoib

4871 gold badge4 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue dynamic add meta data to inner components

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related