Head properties not updated on Pages

[Torone]

Using last Nuxt version 2.15.7. The Pages configuration do not iverride the global configuration set in the nuxt.config.js file.

When loading the page, for a very short time, I can see the global title on the browser tab, then it is updated with the right Page title.

Browsing the page source, the title, description and all other meta information are the ones set in globally. When sharing the pages to a social media it displays the global information and never the ones set in the Pages.

I see you wrote in the documentation:

Setting your SEO options via the asyncData should NOT be done in Server-Side Rendering (SSR) mode. For SSR, you should use the Nuxt head method above.

Unfortunately, by setting the $seo using asyncData is the only way to get it right. So, why we shouldn't if it is the only way to have it working as expected?

[nickfrosty]

@Torone to make sure I understand what you are experiencing, I have a few questions:

1. when loading the page initially, your global default title is set as the actual page title (no matter what). then after a few moments, your page specific title is updated as the current page title?
2. is that "global title" you are seeing set in your seo or the head opbject in your nuxt-config.js file?

Reason to "not set SEO via asyncData"

The reason for the documentation stating to NOT set the SEO in asyncData for SSR is that the titles will not be updates as you navigate between the different pages on the Nuxt site. In this case the title is only updates upon initial load of the site. And will not change when navigating to another page. But if you refresh the browser on that new page, the title is updated

Request you share your code?

Based on your message, it sounds like you are experiencing the opposite though. Can you share your head and seo settings from nuxt-.config.js (your entire file would work too) as well as the way you are setting the seo data on a specific page?

[sdevkota]

I am having same issues as well. The title of the page initially shows from the nuxt config and then gets overridden by the page head configuration, but the page source still keeps the title and description from the nuxt config, thus always showing the same title and description across all pages when I share links to social media sites. nuxt config

const seo={title: "nuxt title", description:"nuxt description"};
  head: {
    title: seo.title,
    meta: [
      {
        hid: "description",
        name: "description",
        content: seo.description,
      }
      ]
}

home page:

import { createSEOMeta } from "@/data/utils/seo";
  data() {
    return {
      seo: {
        title: "Diff title",
        description:
          "diff description"
      }
    };
  },
  head() {
    return {
      title: this.seo.title,
      meta: [
        ...createSEOMeta({
          description: this.seo.description,
          title: this.seo.title,
        })
      ]
    };
  },

createSEOMeta function

export const createSEOMeta = (data) => [
  { hid: "og:title", property: "og:title", content: data.title },
  { hid: "description", name: "description", content: data.description },
  {
    hid: "og:description",
    property: "og:description",
    content: data.description,
  }
... other tags
];

[nickfrosty]

@sdevkota how are you setting specific titles on the page? Is it via asyncData or the head function?

Can you share your seo snippet from your nuxt.config.js file? And the code you are using on a specific page you are experiencing the problem?

[sdevkota]

@nickfrosty I just updated my comment above with the code snippets. Sorry should've done it earlier. Not via asyncData but head ;

[nickfrosty]

@sdevkota in your home page code, you are returning a generic JSON object.

In order to use the nuxt-seo plugin, you need to return the $seo property. Like this example from the docs usage page

From inside the head method, you can either:

• destructure the context head({ $seo }), build your SEO data, and then return $seo(JSON_data), or
• use the context within the head method via this.$seo. which would require your to use return this.$seo(JSON_data)

Also, the way you are using a separate function (the one you have named createSEOmeta) is not required since this nuxt-seo package performs the hid assignment automatically.

[sdevkota]

@nickfrosty I switched it to nuxt-seo and it is a great plugin. Same thing, I guess that might be because ssr:false, target:'static'?