How to do Open Graph Images in a Vue JS SPA?

Question

I'm trying to include an open graph image in my VueJS Single Page Application.

https://developers.facebook.com/tools/debug/

Yields me this link preview:

I think I can just jam the open graph meta tags in the top of the page if I want all routes to return the same image, but I would like different pages to show different images.

I've tried https://github.com/declandewet/vue-meta and https://github.com/ktquez/vue-head, but those don't seem to help, presumably because they inject the meta tags via JS after the page has loaded.

Is there any other way than prerendering with Nuxt or Vue SSR?

Answer 1

prerender-spa-plugin in conjunction with vue-head/vue-meta should do the trick for you! As long as you know all of your routes in advance, it will render index.html files that you can serve for the bots.

If you have dynamic content you will have to use captureAfterDocumentEvent or captureAfterTime in order to capture asynchronous content has been rendered.

If you need something more robust Vuejs SSR might be a better option.