Open Torone opened 2 years ago
@Torone to make sure I understand what you are experiencing, I have a few questions:
seo
or the head
opbject in your nuxt-config.js
file?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
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?
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
];
@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?
@nickfrosty I just updated my comment above with the code snippets. Sorry should've done it earlier. Not via asyncData
but head
;
@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:
head({ $seo })
, build your SEO data, and then return $seo(JSON_data)
, orthis.$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.
@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'?
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:
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?