Generate Dynamic Tags for SEO and multimedia preview

Hello, we want to genuinely elaborate on options for how to make dynamic meta tags working on our SPA app and following ogp.me standard for open graph tags for other social media.

We are eager to do some transformation in our code, but for a team of two, we don’t want to sacrifice using Jamstack and we would stick with it. So moving towards Nuxt is quite an issue, as SSR would solve this as early sunrise for the day, but we would need pain with scaling servers.

Where most of the dynamic magic happens is in our GalleryItem.vue.
That’s our major dynamic component where we are looking to generate dynamic tags for each gallery item.

Our technical stack is that we are running deploys on Netlify & Fleek.

Out of my head, I’ve been articles, that prerender.io might be the best way for us to have that.
But I would like to choose the solution which is sort of independent, where we can generate previews on our own. Maybe if there is a service which could help with us that?

Options which we are considering is

How did you solve this for your Vuejs application? I know there are Nuxt and their vue-meta, but that’s is only great if you have just static content or have a server that fulfills meta fields ahead of the response to the crawler.

Any hints are welcome!
Thank you!

hi there, I have moved this to an area of the forums more suitable for this kind of discussion as it’s not a direct support request :slight_smile:

Hey @yangwao so I typically use React-Helmet and originally thought that this actually worked for Vue, however, I guess not? Maybe there are some Vue forks of the repo out there.

Upon further reading I did come across information that vue-router allows for dynamic per route meta-tags. How To Update Page Title and Metadata with Vue.js and vue-router | DigitalOcean I realise you might not have a separate route for each galleryItem, I guess that depends on the setup though. Let me know if that helps!

With regards to SSG I use GitHub - stereobooster/react-snap: 👻 Zero-configuration framework-agnostic static prerendering for SPAs the name here is only superficial, it works for vue too as stated in the documentation. I found it straight forward to use and I then hydrate after the initial render.