Universal Mode generated meta tags not detected by Facebook or Twitter

commented 8 months ago

Hi team

This is my first time with NUXT and I am getting frustrated with a small issue. I have a project (universal mode, static target generated, and deployed to Netlify)

The problem is when using the Facebook debugger tool or Twitter card validator, it is not generating the preview. If you inspect the page, you can see the generated meta tags. But the tool gives you an error – No card found or Missing properties.

I also tried adding some default values in nuxt.config.js and when I ran the crawler on the home page it shows the default values. But in the particular pages, where it is supposed to be overridden – it isn't working. The tags get replaced on the rendered page (I am using hid) but they are not picked up by the validator tools of Facebook or Twitter.

I think the problem is Twitter or Facebook are doing a GET call to my URL, but the result of this call, in my understanding, is a Nuxt.js pre-render page for being executed in the browser. In the browser, the JS sources are executed at the moment of the page loading, so it can inject all the metatags and many other things. I also checked the JS response, the meta tags are not obtained in the first response and are appended later to the page

I tried searching at a lot of places, but could not find a workaround. Hence raising it here. Please help me out.

Thanks :)

#c112 - Created 8 months ago