Nuxt•2y ago

how to correctly use `useServerSeoMeta()` ? Meta data not updated when navigating between pages

I have a blog-app where each page is a blog post. So, on the index page for each blog post page, I am using useServerSeoMeta like so:

const { data: post } = await useFetch(`/api/posts/${route.params.id}`, {
  key: `/post/${route.params.id}`
})

useServerSeoMeta({
  title: () => `${post.value.data?.title} - APP NAME`,
  ogTitle: () => `${post.value.data?.title} - APP NAME`,
  description: () => post.value.data?.content,
  ogDescription: () => post.value.data?.content,
  image: () =>
    config.public.imagekitBaseURL +
    post.value.data?.imagePath +
    '&tr=w-1200,fo-auto,dpr-auto',
  ogImage: () =>
    config.public.imagekitBaseURL +
    post.value.data?.imagePath +
    '&tr=w-1200,fo-auto,dpr-auto',
  twitterCard: 'summary_large_image'
})

const { data: post } = await useFetch(`/api/posts/${route.params.id}`, {
  key: `/post/${route.params.id}`
})

useServerSeoMeta({
  title: () => `${post.value.data?.title} - APP NAME`,
  ogTitle: () => `${post.value.data?.title} - APP NAME`,
  description: () => post.value.data?.content,
  ogDescription: () => post.value.data?.content,
  image: () =>
    config.public.imagekitBaseURL +
    post.value.data?.imagePath +
    '&tr=w-1200,fo-auto,dpr-auto',
  ogImage: () =>
    config.public.imagekitBaseURL +
    post.value.data?.imagePath +
    '&tr=w-1200,fo-auto,dpr-auto',
  twitterCard: 'summary_large_image'
})

Accessing the blog post page directly into URL works well, and the relevant title, description, etc is displayed. However, when navigating to and from different pages of the app, the above data is "stuck" for each page and doesn't change unless I do a manual refresh for each page. I guess that is because I am not using useHead? So, should I be using BOTH useServerSeoMeta and useHead on my pages together? If so, would I not be negating the performance benefit of using userServerSeoMeta ?

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

how to correctly use `useServerSeoMeta()` ? Meta data not updated when navigating between pages