nuxt: Dynamic OG/meta tags do not work anymore

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!

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,
+   },
    // ...
  }

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.

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.

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?

@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.

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.

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.

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.

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

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.