fix: Description set byuseServerSeoMeta gets overwritten by site description

[MickL]

🐛 The bug

When using useServerSeoMeta, the description doesnt get set:

useServerSeoMeta({
  title: 'title mainpage',
  description: 'description mainpage',
});

Instead it is always set (overwritten?) by what is set in nuxt.config.ts site config:

  site: {
    url: 'https://nuxtseo.com',
    name: 'Some cool reproduction repo :)',
    description: 'Description from nuxt.config.ts',
  },

Result:

🛠️ To reproduce

https://stackblitz.com/edit/nuxt-starter-tcq8ttrk?file=nuxt.config.ts,pages%2Findex.vue

ℹ️ Additional context

Works fine with useSeoMeta() BUT as far as I understood it is recommended to use useServerSeoMeta which treeshakes 2 kb out of the client build:

In most instances, the meta doesn't need to be reactive as robots will only scan the initial load. So we recommend using useServerSeoMeta as a performance-focused utility that will not do anything (or return a head object) on the client.

[harlan-zw]

Thanks for the detailed issue.

So the issue is that the SEO Utils plugin will insert your site config as low-priority head tags in both the server and client side. When you use useServer* it will only set it server side, any client side calls will overwrite it.

Unhead itself could in theory fix this by keeping track of SSR tag priorities, I may explore it as part of the v2 unjs/unhead#395. Keep in mind v2 may also deprecate useServer* composables as the DX around them is confusing and the optimization is not really worth it.

For the time being please use useSeoMeta(), as you're using Nuxt SEO it already uses the unhead treeshaking library which will convert useSeoMeta() to useHead() which you'd already be paying the bundle cost for.

Similar issue: harlan-zw/nuxt-seo-utils#32