1

我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>
4

1 回答 1

2

让 og meta 工作有两个部分——我想我可以在第 1 部分提供帮助：

  1. 正确的vue-meta语法
  2. 服务器端渲染 (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'
  }
}))))

...大概在原版 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在NuxtGitHub 组织下 =>您可以考虑迁移到 Nuxt v3（构建在 Vue 之上）：

于 2021-06-01T14:03:38.697 回答