head VS vue3-vite-custom-ssr-example

Oh, I think I was dealing with this problem the other day. Or something similar, but with contentful. I think definePageMeta has problems with async, or something. Can't remember. But I ended up using this: https://www.npmjs.com/package/@vueuse/head which is just a vue wrapped version of unhead here: https://unhead.harlanzw.com/

For seo though, I guess og:tags but not sure that cuts it alone. Speaking of tags, recently I discovered unhead will soon give it a try.

Now with Nuxt, The good thing is it comes with its inbuilt SEO system. It makes use of vueue/head under the hood to provide an easy-to-access API for manipulating the Meta Tags and other SEO related information in head. More [here].(https://nuxt.com/docs/getting-started/seo-meta)

vueUse/head, in case you want to make your element reactive. But the code you proposed would work fine too.

VueUse lib has a function to update the HEAD. I use it in a couple of apps. https://github.com/vueuse/head

I respectfully disagree. You can change anything in the with Javascript. If you're using Vue, vueuse/head is probably the easiest way to do it, but you can use plain Javascript if you prefer. Google even recommends that you do it, so they can use that data for their search results: https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics#titles-and-snippets

I think it's no secret that Server Rendering is usually resorted to if search engines need correct indexing. To work with head, Vue 3 already has the vueuse/head library, while it supports SSR. You can find all the documentation on working with it in their repository, and I'll show you a simple example and help you introduce it to server rendering. And so in the application code, you just need to call useHead at any level of component nesting:

https://github.com/vueuse/head ?

You can find all the code from the article and an example of the project here.