如何在Vue Meta 3中创建自定义meta标签（如Open Graph类og标签）

问题原因 #

你遇到的是未正式发布的Vue Meta 3测试版本自带的解析缺陷：

1. 第一种写法触发了版本的参数解析bug，把meta数组内的name属性值错误解析为了meta
2. 第二种写法直接把自定义属性名放在配置顶级，而useMeta的顶级配置键对应生成的HTML标签名，所以会生成不符合规范的自定义标签

解决方案 #

方案1：切换到@vueuse/head（更推荐）

vue-meta目前已经停止维护，主流生态都已经切换为@vueuse/head作为元数据管理方案，运行稳定性更高，写法完全符合常规直觉：

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

以上代码可以直接生成你预期的HTML结果。

方案2：兼容Vue Meta 3的写法

如果暂时不能切换依赖，可以尝试在meta项中添加唯一标识vmid规避解析bug：

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

如果该写法仍然无法输出正确结果，说明你使用的Vue Meta 3版本存在不可修复的问题，强烈建议切换依赖。

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