Nuxt 3 i18n 动态元标题和描述

Question

我无法让它正常工作......好吧，它正在工作，但我认为这不是正确的方法。

有人可以向我解释如何使我的元标题和描述动态化吗？当我现在加载页面时，我首先在我的选项卡中看到“localhost”，不久之后标题就会更新。我认为当谷歌抓取时，它会使用“本地主机”而不是正确的标题。

我试图让它动态地使用这段代码：

const seoMeta = {
  title: () => metaTitle.value,
  ogTitle: () => metaTitle.value,
  description: () => i18n.t('page_meta_description', { title: metaTitle.value }),
  ogDescription: () => i18n.t('page_meta_description', { title: metaTitle.value }),
  ogImage: 'http://localhost:3000/logo_4x.png',
  twitterCard: 'summary_large_image',
};

useServerSeoMeta({ ...seoMeta });
useSeoMeta({ ...seoMeta });

const { data, pending, error, refresh } = await useFetch(`https://test.com/api/de/article/${route.params.id}`)
metaTitle.value = JSON.parse(data.value).title```

Answer 1

我记得当我尝试 useSeoMeta 时非常困惑，最终放弃了。

通过使用

useHead

composable 代替自己解决了它。

const router = useRoute()
const itemId = router.params['id'] as string

const itemData = await $fetch(`/api/shop/item/${itemId}`)

useHead({
  title: `${itemData.title}`,
  meta: [
    {
      name: 'description',
      content: itemData.description!.short,
    },
  ],
})