vol*_*one 2 vue.js vue-meta vuejs3
我用来Vue Meta 3向网站提供元数据。该 API 在这里
我不明白如何提供自定义元标记（例如 Open Graph 标记，例如og:type）。这是我在组件中尝试做的事情：
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>
让 og 元工作有 2 个部分——我想我可以帮助第 1 部分：
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">
参考：
完成第 1 部分后，我意识到我没有设置 SSR...所以我只是为我的用户渲染元，而不是为 Facebook 的爬虫（不是很有用）。恐怕我还没有在我的项目中解决这个问题；也许其他人可以参与那部分！
在那之前，也许这会让你开始：
注意：vue-meta位于NuxtGitHub 组织下 =>您可能会考虑迁移到 Nuxt v3（基于 Vue 构建）：