如何在 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 },
  ],

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

How do I configure dynamic og tags in nuxt.js (vue.js)?

facebook

facebook-opengraph

vue.js

server-side-rendering

nuxt.js