如何在 nuxt.js (vue.js) 中配置动态 og 标签？

Question

我使用 vue init nuxt /express myprojectstart 启动了 nuxt 应用程序。

这是我的目录。

page
|- _project.vue
|- project
  | - index.vue

_project.vue的配置

export default {
  head () {
    return {
      title: this.project.title,
      meta: [
        {property: 'fb:app_id', content: '12873892173892'},
        {property: 'og:title', content: this.project.title},
        {property: 'og:image', content: this.project.image},
      ],
    }
  }
},
async asyncData ({app, params, error}) {
  const project = await app. $ axios. $ get (`/ project`)
    return {
      project: project.project,
    }
  }
}

但是，如果您按 Facebook 共享按钮，则不会出现所需的标题和图像。

我认为这是服务器端渲染问题。但我无法解决这个问题。

我将不胜感激你的帮助。

Answer 1

为了与 Nuxt.js 一起使用，而不是使用“属性”，您需要使用“名称”元属性。此外，您可以添加'hid'属性来为您的标签设置唯一标识符，以防您有使用相同标签的子组件。

所以，对于你的情况：

  meta: [
    { hid: 'fb:app_id', name: 'fb:app_id', content: '12873892173892' },
    { hid: 'og:title', name: 'og:title', content: this.project.title },
    { hid: 'og:image', name: 'og:image', content: this.project.image },
  ],