Dynamic OG/meta tags do not work anymore

[oneWaveAdrian]

Versions

• nuxt: V2.14, V2.15.3
• node: 15.3, 17.5.0

Reproduction

~~https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Ft0f1k.sse.codesandbox.io~~

https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Ft0f1k.sse.codesandbox.io%2Fmountains%2Faconcagua

Steps to reproduce

Simplest example is to use Facebook developer tools to reproduce. I tried it on the sample code of the tutorial page It shows that the example code does not behave as the tutorial suggests. The same behaviour is noticeable in other uses (e.g. with i18n-module).

Step by step with screenshots if further down below https://github.com/nuxt/nuxt.js/issues/10318#issuecomment-1062060394

What is Expected?

To show a dynamic title or other meta information depending on what is set in the head() of each page.

What is actually happening?

The fixed value defined in nuxt.config.js is used, not the dynamic title value set in head() function. Apparently this is because FB or any OG implementation I tested (Whatsapp, Signal, etc.) does not execute JS.

[danielroe]

Would you provide a reproduction, please? 🙏

[oneWaveAdrian]

@danielroe I already linked everything, the tutorial page which's sample URL I pasted into the facebook test tool. This does not work. Therefore the reproduction is within the tutorial page present.

It clearly shows that only the static values can be read by the facebook scraper and not the dynamic ones.

[danielroe]

The thing I can't see is your source code.

[oneWaveAdrian]

My code is actually irrelevant to the issue, as the source code of the tutorial page already shows exactly that it is not working. Therefore representing a reproducible example without the possibility of human error on my end, which is much superior imho.

[danielroe]

No matter how skilled we are, we can't eliminate the possibility of human error 😉 That's one reason we ask for a reproduction, because I need to see whether you've made a mistake in your implementation, or whether there is a bug in Nuxt.

I'm closing this issue for now as I cannot replicate it, but will happily have a look as soon as you provide a reproduction.

---

As far as the tutorial code is concerned, the error from FB is:

Provided og:image URL, https://nuxtjs.org/nuxt-card.png could not be processed as an image because it has an invalid content type.

That is because this file no longer exists on nuxtjs.org.

But as you can see, the meta tags are being properly generated:

[oneWaveAdrian]

@danielroe I am sorry but it seems you tested the wrong page. According to the example the mountains/${params} subpage should have the og:title of the mountain in question.

Now when I open the example code and put the URL of the first mountain through the scraper, FB does not read the mountain name for the og:title attribute, but the og:title of the general page defined in nuxt.config.js. And this is exactly the problem I am voicing. Therefore I do not understand how you can not reproduce this?

Active debugging link: https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Ft0f1k.sse.codesandbox.io%2Fmountains%2Faconcagua

Yields this result:

While page itself uses SocialHead.vue and passes title param from URL as displayed correctly Which should put title param into og:title

Instead FB shows title defined in nuxt.config.js

All screenshots were taken using only the tutorial sample code from nuxt docs, as linked multiple times above. Therefore creating a reproducible example as far as my understanding goes.

@danielroe please tell me how to create an even more compelling reproducible example than using the existing code of the official nuxt website and adding absolutely no possibility of what you defined as "a mistake in your implementation"?

[danielroe]

I've reopened the issue to remind me to have a look at this at some point in the future.

The kind of information you've now provided was exactly what I was asking for earlier. Thanks for providing it.

Note that the URL I tested was the one you provided in your original issue.

Please consider treating other people, particularly those who are helping you, with more consideration.

[oneWaveAdrian]

@danielroe I did not mean to offend you, however the way you replied made me feel as if my issue was not read properly. Believe me when I say I spend a lot of hours examining the problem for possible causes and doing my due diligence before opening an issue with you guys. What you created and maintain is an amazing tool, and much appreciated, I am sorry if I did not make that clear in the way it was phrased above.

[danielroe]

I've taken a look, and you're quite right; this is the case. It seems to be caused by using head() within a component that is auto-imported by @nuxt/components. So, for now, a workaround is to explicitly import the child component:

+ import SocialHead from "~/components/SocialHead.vue";
  export default {
+   components: {
+     SocialHead,
+   },
    // ...
  }

[oneWaveAdrian]

@danielroe that workaround would be fine for me, I'd be ok with closing this issue unless you'd want it remain open to find a more permanent solution?

[Torone]

Hi @danielroe, I have the same issue after upgrading Nuxt from 2.8 to latest version 2.15.7. I have an app with SSR mode and now all my pages have the default title and description set in the nuxt.config.js file. The data provided in all other pages, inside the head, are totally ignored and I don't know anymore what to do.

The steps to reproduce are very simple:

1. Create a new app.
2. Create a dummy default title in the nuxt.config.js.
3. Create a couple of pages for testing and set the head title to something different than the global one.
4. Navigate the app.

Things you will notice:

1. For a very short time, in the browser tab, you will notice the default/global title. Then, the local one will appear.
2. Going to inspect the page source you will notice only the default/global one.
3. The same using the FB tool.

I did nothing fancy. I think this version has a serious bug around the head and it would be nice to know a solution... I'm not loading components automatically, I never did it. And my head is inside Pages only.

Also, I tried using another plugin called nuxt-seo and it has the same issue. So, for sure it is something with Nuxt.

Thanks!

[albertowd]

Guys, I don't know if it helps, but I'm using 2.15.8 here and had the same problem: static generated pages do not update any default head meta with the customs described in each page. My default project came with ssr: false and target:'static' combo and searching for it on the web found this solution THAT WORKED for me:

https://stackoverflow.com/questions/68322583/nuxt-can-you-pre-render-meta-data

Leaving target:'static but changing to ssr:true has generated the correct .html meta tags on the index.html of each page correctly. Im still thinking that is a bug, the default static no-ssr should merge at least static head objects to the .html` files.

[puremilkorwhite]

Can somebody tell me if downgrading to nuxt 2.8 is a good idea? I have tried removing all pages, components, plugins and even npm modules from package.json. I have target static and ssr true in my nuxt config, but nothing helps. If anybody wants to look in my code, let me know. I would be happy to share a link. Greets, Puremilkorwhite

[danielroe]

This is probably the best workaround for now: https://github.com/nuxt/nuxt.js/issues/10318#issuecomment-1065979642

[puremilkorwhite]

This is probably the best workaround for now: #10318 (comment)

I don't use any components and only have an index page and a dynamic page.

[puremilkorwhite]

As a matter of fact, just to be sure I turned off auto component imports by adding 'components:false' in Nuxt.config

[hrvojevu]

I have the same issue. ssr: true, target: static is set in the nuxt.config.js. OG/meta tags work for non-dynamic routes, but does not work for dynamic routes. asyncData is used to prefetch data from the API to populate meta inside head method. nuxt version is 2.15.5. Production site is running on Laravel Forge, am I doing something wrong or missing something in the configuration?

[puremilkorwhite]

I ended up only using the nuxt.config.js general head function, run npm run generate in the terminal an then run a python script that goes tru all the dynamically generated directories and make changes in the index.html

[codernirdesh]

Hello @oneWaveAdrian Have you figure out the solution to this problem? I'm also facing the same. Can you help me?

[hrvojevu]

I am not sure if my problem was exact same as mentioned in this issue, but I did manage to find a solution which was simply running nuxt app in ssr mode. It makes sense that meta tags won't work with dynamic routes when app is served as static HTML because nuxt generate can only pre-generate already defined routes. I was using meta method which would set meta tags with the data returned from asyncData. So the solution was updating nuxt.config.js, changing ssr to true and target to server, using pm2 to run nuxt's node server and using laravel as a API backend.

[oneWaveAdrian]

@codernirdesh, I did not, but @danielroe did further up: https://github.com/nuxt/nuxt.js/issues/10318#issuecomment-1106255614

[codernirdesh]

That worked for me as well.. @hrvojevu 😅

[sdevkota]

I am having the same issue with ssr:false and target:static. My hosting environment does not support running the app on the server as it needs to be a static site within Tomcat. Page source and Inspect Elements have two diff meta tags.

[tommcclean]

Just wanted to pop in and warn that the workaround setting ssr: true doesn't work if you are relying on client side plugins. As it will generate the pages isomorphically; thus any client side only effects will not be present - in my case this was causing pages depending on this to silently just not be created because they expected an object to be injected by a plugin.

I say silently, its in the log, but under all the success messages :)

[codeofsumit]

I have the same issue but not for a component but for a dynamic sub-page, e.g. _slug.vue.

[kezek]

Want to share my experience. Had exactly the same issue as described here. Spend 2 full days investigating and trying out different stuff to no avail.

In my case the issue was I had a v-if directive on a div that wrapped <nuxt>, waiting for some local storage data. That essentially deactivated SSR. Once I've removed that v-if everything worked as expected.

[Chris-Miracle]

I have the same issue but not for a component but for a dynamic sub-page, e.g. _slug.vue.

Were you able to find a solution?

[mohitsehgal]

@kezek - I faced similar issue. Spent 2 days for nothing. Your comment saved me. Many Thanks

[teomankirac]

@kezek Yes! that was my problem too. Don't remember why I put that v-if there but when I initially removed it it kept getting vuetify breakpoint errors. So I changed my vuetify plugin mode in nuxt.config and it solved all issues. Wish would have tried this earlier. Spent a lot of time on this issue.

[JosueNicholson]

@kezek @mohitsehgal @teomankirac is there a easy way to know if something is turning the ssr off in a page?