Nuxt 3 单个页面元数据未检测到

Question

我使用 Nuxt 3 创建了我的在线作品集。我遵循 Nuxt 3 指南，并在线观看了一些有关向各个 Nuxt 3 页面添加元数据的教程。

我为每个页面提供了不同的元描述内容。即主页 - '这是我的主页元'，关于页面 - '这是我的关于页面元'

我的问题是，当我使用检查元描述数据的在线工具分析每个页面时，它会显示我在

nuxt.config.js

文件中提供的元“描述”。我怎样才能使任何分析我的在线投资组合中的任何页面的工具都能获得与该页面相关的元描述数据？

这是我的 nuxt.config.js 文件：

export default defineNuxtConfig ({
  app: {
    head: {
      meta: [
        { name: 'description', content: 'This is the fallback meta description' }
      ]
    }
  }
})

这是我主页中的元：

<script setup>
  useHead({
    meta: [
      { name: 'description', content: 'This is my Home page meta description' }
    ]
  });
</script>

这是我的“关于”页面中的元：

<script setup>
  useHead({
    meta: [
      { name: 'description', content: 'This is my About page meta description' }
    ]
  });
</script>

Answer 1

https://nuxt.com/docs/getting-started/seo-meta 使用 DefineSeoMeta 可组合项 - 这可以在 app.vue 上全局使用，然后在页面组件的页面级别上覆盖全局组件。 还有一个 DefineServerSeoMeta，但我实际上不确定为什么需要它，因为从测试来看，它看起来另一个仍然在服务器上呈现。

useServerSeoMeta({
  title: 'My Amazing Site',
  ogTitle: 'My Amazing Site',
  description: 'This is my amazing site, let me tell you all about it.',
  ogDescription: 'This is my amazing site, let me tell you all about it.',
  ogImage: 'https://example.com/image.png',
  twitterCard: 'summary_large_image',
})