Question

I started the nuxt app with vue init nuxt / express myprojectstart.

Here is my directory.

Vue.filter('uppercase', function (value) {
   return value.toUpperCase()
})

new Vue({
  el: '#app',
  data: {
    message: 'foo'
   }
})

The configuration of _project.vue

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

However, if you press the Facebook Share button, the desired title and image will not appear.

I think this is a server side rendering issue. But I could not solve this problem.

I would appreciate your help.

Answer 1

此代码将覆盖head中的主要meta标签。因此，如果您需要共享一篇文章或一页，并且需要覆盖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 },
  ],

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

2 个答案: