Nuxt•3y 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

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

useHead

? So, should I be using BOTH

useServerSeoMeta

useServerSeoMeta

and

useHead

useHead

on my pages together? If so, would I not be negating the performance benefit of using

userServerSeoMeta

userServerSeoMeta

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

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'
})

useHead

useHead

? So, should I be using BOTH

useServerSeoMeta

useServerSeoMeta

and

useHead

useHead

on my pages together? If so, would I not be negating the performance benefit of using

userServerSeoMeta

userServerSeoMeta

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads