如何在 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

此代码会覆盖 head 中的主要元标记。因此，如果您需要共享单篇文章或单页并需要覆盖 og 标签，这就是它的工作方式。

 meta: [
      {
        'property':  'og:title',
        'content':  `${this.news.title}`,
      },
      {
        'property':  'og:description',
        'content': `${this.project.content}`.replace(/<\/?[^>]+(>|$)/g, ""),
      },
      {
        'property':  'og:image',
        'content': `${this.project.image[0]}`
      }
    ],

Answer 2

要使用 Nuxt.js 而不是使用 'property'，您需要使用 'name' 元属性。此外，您可以添加 '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 },
  ],