Nuxt3搭配NuxtContent无法生成Og meta标签，实现是否有误？

你的配置本身没有错误，但NuxtContent不会自动将frontmatter里的image字段转换成OG系列标签——默认情况下，use-content-head仅会处理title、description以及你在head.meta中显式定义的标签。

要生成og:image等OG标签，有两种可行方案：

方案一：手动在frontmatter中添加OG元标签 #

直接在head.meta数组里补充OG相关配置，示例如下：

---
title: "test"
description: "test"
image:
  src: '/test.webp'
  alt: 'test'
head:
  meta:
    - name: 'keywords'
      content: 'test'
    - property: 'og:title'
      content: 'test'
    - property: 'og:description'
      content: 'test'
    - property: 'og:image'
      content: '/test.webp'
    - property: 'og:image:alt'
      content: 'test'
---

方案二：通过useContentHead自动映射字段 #

在你的文档路由组件（比如[...slug].vue）中，获取文档数据后，使用useContentHead组合式函数自动从frontmatter提取数据生成OG标签，适合批量处理所有文档页面：

<script setup>
const route = useRoute()
const { data: doc } = await useAsyncData('doc', () => useContent().findOne({ path: route.path }))

useContentHead({
  title: doc.value?.title,
  meta: [
    { name: 'description', content: doc.value?.description },
    { name: 'keywords', content: 'test' },
    { property: 'og:title', content: doc.value?.title },
    { property: 'og:description', content: doc.value?.description },
    { property: 'og:image', content: doc.value?.image?.src },
    { property: 'og:image:alt', content: doc.value?.image?.alt }
  ]
})
</script>

注意：如果你的图片路径是相对路径，确保它能被正确解析为完整URL（比如在Nuxt配置中设置app.baseURL，或者使用useRuntimeConfig拼接域名）。

内容的提问来源于stack exchange，提问作者Mathijs