如何在 Vue Meta 3 中创建自定义元标签？

Question

我正在使用 Vue Meta 3 向网站提供元数据。 API 是 here

我不明白如何提供自定义元标记（例如 og:type 等 Open Graph 标记）。这是我在组件中尝试做的事情：

setup() {
    useMeta({
      title: "Homepage",
      meta: [
          {name: "hunky:dory", content: "website"}
      ],
      description: "This is the homepage."
    })
  },

得到的HTML输出结果是这样的：

<head>
 <title>Homepage</title>
 <meta name="description" content="This is the homepage.">
 <meta name="meta" content="website"> <!-- should be <meta name="hunky:dory content="website"> -->
</head>

如果我将代码更改为：

setup() {
    useMeta({
      title: "Homepage",
      "hunky:dory": [
          {content: "website"}
      ],
      description: "This is the homepage."
    })
  },

我得到非法的HTML输出：

<head>
     <title>Homepage</title>
     <meta name="description" content="This is the homepage.">
     <hunky:dory>website</hunky:dory> <!-- total nonsense -->
    </head>

如何让输出为：

<head>
         <title>Homepage</title>
         <meta name="description" content="This is the homepage.">
         <meta name="hunky:dory" content="website">
        </head>

Answer 1

让 og meta 工作有两个部分 -- 我想我可以帮助完成第 1 部分：

更正 vue-meta 语法
服务器端呈现 (SSR)

第 1 部分：Vue 3 的 vue-meta

我用 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">

参考文献：

第 2 部分：SSR

完成第 1 部分后，我意识到我没有设置 SSR...所以我只为我的用户呈现元数据，而不是为 Facebook 的爬虫（不是很有用）。恐怕我还没有在我的项目中解决这个问题； 也许其他人可以参与该部分！

到那时，也许这会让你开始：

注意：vue-meta 在 Nuxt GitHub 组织下 => 你可以考虑迁移到 Nuxt v3（它建立在Vue 的顶部):

如何在 Vue Meta 3 中创建自定义元标签？

How to create custom meta tags in Vue Meta 3?

vue.js

vuejs3

vue-meta

第 1 部分：Vue 3 的 vue-meta

第 2 部分：SSR