如何解决如何在 Vue Meta 3 中创建自定义元标记？ 第 1 部分：Vue 3 的 vue-meta第 2 部分：SSR
我正在使用 Vue Meta 3 向网站提供元数据。这个 API 是 here
我不明白如何提供自定义元标记（例如 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"}
],我得到非法的 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 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 之上）：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
