有两个部分让OG meta工作--我想我可以帮助完成第一部分：
1.更正vue-meta语法
1.服务器端渲染（SSR）

第1部分：Vue 3的vue-荟萃分析

我用vue-class-component写了这个，它看起来很有效：

meta = setup(() => useMeta(computed(() => ({
  title: this.event?.name ?? 'Event not found',
  og: {
    image: this.event?.bannerUrl ?? 'http://yourwebsite.com/images/default-banner.png'
  }
}))))

......在vanilla Vue 3中大概可以翻译成这样：

setup() {  
  useMeta(
    computed(() => ({
      title: this.event?.name ?? 'Event not found',
      og: {
        image: this.event?.bannerUrl ?? 'http://yourwebsite.com/images/default-banner.png'
      }
    }))
  )
}

结果：

<meta property="og:image" content="http://cloudstorage.com/images/event-123.png">

参考文献：

• GitHub -> vue-meta@next -> example for vue-router
• 自述文件中也暗示了

第2部分：固态继电器

一旦我完成了第一部分，我意识到我还没有设置SSR ...所以我只为我的用户呈现元数据，而不是Facebook的爬虫（不是很有用）。"也许其他人也能胜任这个角色"
在那之前，也许这会让你开始：

• SSR options
• Vue 3's native SSR
• vue-meta自述文件中有关SSR的说明

注意：vue-meta属于Nuxt GitHub组织=〉您可以考虑迁移到Nuxt v3（构建在Vue之上）：

• Nuxt v3 tracker issue
• 建议本月（2021年6月）测试的幻灯片。

有点晚了，但对任何面临Vue 3（和vue-meta）问题的人来说可能不是无用的。有了下面详细的解决方案，你就不依赖任何第三方库了。
我的项目目前在本地环境中处于开发阶段（所以没有完全测试），但是如果您正在使用Vue 3中的Options API（带有vue-router），SFC方式（例如，如果您正在使用 “pages” 的单文件组件视图，并且您希望它们都有自己的自定义元信息），一个可能的解决方案是使用beforeCreate生命周期钩子来添加 meta标记。
在hook方法中，您可以创建DOM节点并将其附加到head，如下所示：

...
beforeCreate(){
  // adding title for current view/page using vue-i18n
  let title = document.createElement(`TITLE`)
  title.innerText = this.$t(`something`)

  document.querySelector(`head`).appendChild(title)

  // adding og:image
  let ogImage = document.createElement(`META`)
  ogImage.setAttribute(`name`,`og:image`)
  ogImage.setAttribute(`content`,`YOUR-IMAGE-URL`)

  document.querySelector(`head`).appendChild(ogImage)
}
...

我还不确定这是否是一个有效的方法，使它的工作，但会尝试更新此职位时，该项目是在生产。
我已经用chrome插件测试过这个解决方案，比如：Localhost Open Graph Debugger

我也有同样的问题，然后我遇到了这个问题，它为我解决了这个问题。这里是原始帖子的链接：vue3 vue-meta showing name="meta"
在vuejs 3中你应该使用vue 3- meta或者alpha版本。

metaInfo() {
    return {
        htmlAttrs: { lang: 'en', amp: true },
        title: "page title",
        description : "Page description",
        twitter: {
            title: "twitter title",
            description: "twitter description",
            card: "twitter card",
            image: "twitter image",
        },
        og: {
            title : 'og title!',
            description : 'og description!',
            type : 'og type',
            url : 'og url',
            image : 'og image',
            site_name : 'og site name',
        }
    }
}

如果您想使用 meta名称，请更改main.js中的配置

import { createMetaManager, defaultConfig, plugin as metaPlugin } from 'vue-meta'
const metaManager = createMetaManager(false, {
    ...defaultConfig,
    meta: { tag: 'meta', nameless: true },
});

并在组件中使用下面的 meta名称

metaInfo() {
    return {
        meta: [
            {'name' : 'author', 'content' : 'author'},
            { name: 'description', content: 'authors' },
        ]
    }
}