Nuxt open graph meta tags not working in netlify

Question

I have a portfolio site which was working fine up until march, Recently when I tried to post a new blog and checked the linkpreview of the new blog, I was getting meta tags of the data mentioned in the nuxt.config.js instead of individual pages/articles.

Here is my nuxt config file

export default {
  target:'static',
  head: {
    title: "Kamran Memon | Portfolio",
    htmlAttrs: {
      lang: "en",
    },
    meta: [
      { charset: "utf-8" },
      {
        name: "viewport",
        content:
          "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0",
      },
    ],
    link: [
      { rel: "icon", type: "image/x-icon", href: "/favicon.png" },
      {
        rel: "stylesheet",
        href: "https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700&display=swap",
      },
    ],
  },
}

and in individual pages/articles I have the meta info like this

head() {
    return {
      title: 'About | Kamran Memon | Portfolio',
      meta: [
        {
          hid: "description",
          name: "description",
          content:
            "I am Kamran Memon, A Frontend Developer with primary experience in Vue.js, Vuetify, Nuxt.js and have worked in Fintech and Health Care Industries",
        },
        {
          hid: 'author',
          name: 'author',
          content: 'Kamran Memon'
        },
        {
          hid: "keywords",
          name: "keywords",
          content: "Kamran Memon"
        },
        //Open Graph
        { hid: "og-type", property: "og:type", content: "website" },
        {
          hid: "og-title",
          property: "og:title",
          content: "About | Kamran Memon | Portfolio",
        },
        {
          hid: "og-desc",
          property: "og:description",
          content:
            "I am Kamran Memon, A  Frontend Developer with primary experience in Vue.js, Vuetify, Nuxt.js and have worked in Fintech and Health Care Industries",
        },
        {
          hid: "og-image",
          property: "og:image",
          content: "https://codewithkamran.com/assets/card-image.png",
        },
        { hid: "og-url", property: "og:url", content: "https://codewithkamran.com" },
        { hid: "t-type", name: "twitter:card", content: "summary_large_image" },
      ];
    }
  },

Everything works fine in local dev environment once I deploy it on netlify and check in any open graph checker it shows data from nuxt config file instead of individual pages/blogs.

I have been using https://metatags.io/ and https://www.opengraph.xyz/ for checking meta tags here are the results

I have tried several settings in nuxt.config ssr:true and ssr:false target:server but nothing seems to be working. It feels something is wrong on the netlify side. Has it anything to do with pre-rendering which I guess has been recently added in netlify?

Answer 1

I had Mistakenly wrapped <nuxt> with <client-only> in the layout file in the earlier commits, due to which I was facing the issue.