DEV Community

Dynamic Open Graph Meta Tags with VueJS and Node

JS Bits Bill on November 24, 2020

I recently faced an interesting dilemma where I was unable to solution for using dynamic Open Graph metadata for my custom built T-shirt website, F...
Collapse
 
sapientia profile image
sapientia

Hello Bill, this looks like the thing I am looking for, because I already tried almost everything, and certainly SSR it is quite complex to implement after the project is almost done(in my case), the only thing I did not get was the cheerio part, do an extra config is needed, besides the installation de package? also do you have a simple example repo of this? I was trying to replicate ur steps but it did not work for me. Thank you in advance for reading...

Collapse
 
js_bits_bill profile image
JS Bits Bill

Sure thing - I have an example on one of my websites here :
github.com/doctafaustus/js-bits/bl...

Cheerio can sometimes show some unexpected results so I would say log everything to make sure you're selecting the correct items before you implement.

Collapse
 
sapientia profile image
sapientia

Amazing, thank you very much, will take a look! Also thanks for the advice :)

Collapse
 
abernados profile image
abernados • Edited

Hi @js_bits_bill ,

How do you handle OG meta information from an API? I've been struggling for a week now. If you can help, that would be great.

Regards
Angel

Collapse
 
js_bits_bill profile image
JS Bits Bill

Hey Angel. That definitely adds complexity and may not be ideal since you would need to make a server-side request to the API to get the metadata before serving the page, potentially leading to some performance issues. That said, I'm happy to take a look if you have a link to any working code to see what might be possible.

Collapse
 
abernados profile image
abernados • Edited

We're using vue-meta. I also tried following this (github.com/nuxt/vue-meta/tree/1.x#...) but still no luck.

Thread Thread
 
js_bits_bill profile image
JS Bits Bill

Hey @abernados , I was getting terminal errors trying to start the app but I believe the problem is your app is using the regular client-side Vue framework whereas the guide you referenced is for the Nuxt framework. Since Nuxt allows you to build server-rendered Vue apps, it will allow you to retrieve meta data from an API and serve the assembled HTML but would come at the cost of you needing to switch entirely to that framework.

Thread Thread
 
abernados profile image
abernados • Edited

Hi @js_bits_bill , since we're using regular client-side Vue framework, what do you suggest then? I can't switch the whole project into Nuxt so I'm looking for other solutions.

Thread Thread
 
js_bits_bill profile image
JS Bits Bill

Yes, your options are limited. You may need to solution for a semi-hardcoded solution like the approach in this article. In any case, you will need to handle the meta data server-side as Vuejs won't be able to intercept document requests to change meta tags.

Thread Thread
 
abernados profile image
abernados

Okay, thank you for replying.

Collapse
 
deepakpreman profile image
deepakpreman

Hi Bill,
In this example what i understand is that we need to run node server for running UI code. How we can use this code in a situation where we are deploying UI in firebase only using build.
If you can help, that would be great.

Regards
Deepak

Collapse
 
js_bits_bill profile image
JS Bits Bill

Hi Deepak. I honestly don't know what options Firebase would give you to achieve this. Since the meta tags need to be set server-side, you might not be able to change them if they don't have a specific way for you to control this.
Best, Bill

Collapse
 
dailydevtips1 profile image
Chris Bongers

Nice work Bill!
Dynamic OG tags can be a pain in the #%S!

Collapse
 
js_bits_bill profile image
JS Bits Bill

Totally! If I were a more productive man, I'd make an NPM package, but I'm not :)

Collapse
 
jdcoffman profile image
Jonathan Coffman

This is an inspiring approach!

Collapse
 
husnain_abbasi_0a1ca0ee46 profile image
Husnain Abbasi

hello Bill i am using vue 3 with nuxt, so I wanna have OG tags on product detail page, i am making og:title and og:desc using url params so no issue with them , perfectly working on social media sharing but the issue is with og:image, i wanna fetch the image from API and set in og:image but it's not making on first render coz API takes 1-2 secs to fetch and set. However after 2 secs the og:image tags get updated but social media sharing shows the first render so og:image has issue. How can i do ssr as i am using nuxt?

Collapse
 
gbahdeyboh profile image
Bello Gbadebo

Hi Bill.

This is quite interesting. Did you eventually use Vue with it? Vue cdn?

Collapse
 
js_bits_bill profile image
JS Bits Bill

Thanks Bello, I did. Since writing this, I learned about server-sider rendering with frameworks like NuxtJS that would have a solution for this sort of thing but I wanted to keep things simple for my small site so this worked pretty well with my client-side Vue site.