facebook - 如何在 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 而不是使用 'property'，您需要使用 'name' 元 Prop 。此外，您可以添加一个 '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 },
  ],