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

Posted 2023-02-22

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

【英文标题】：How do I configure dynamic og tags in nuxt.js (vue.js)?

【发布时间】：2018-05-31 12:59:18

【问题描述】：

我使用 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 分享按钮，则不会出现所需的标题和图像。

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

感谢您的帮助。

【问题讨论】：

可能这有帮助：github.com/jvandemo/angular-update-meta/issues/13 或这个：***.com/questions/17127980/…，不是 nuxtjs 特定但类似的问题。

【参考方案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]`
      
    ],

【讨论】：

这个答案可以通过解释它的作用以及它如何解决问题来改进。

@CtrlS 这段代码覆盖了head中的主要meta标签。所以如果需要分享一篇文章或单个页面并且需要覆盖og标签，这就是它应该工作的方式。

这应该包含在您的答案中！ :)

这不起作用，所有标签在 facebook 调试器工具上都不起作用

【参考方案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 ,
  ],

【讨论】：

您的答案中有未封闭的 cmets

大多数网站不会选择属性name=""下的数据。根据 opengraph 文档，您必须使用 property="" 属性。不幸的是，您在回答中建议的内容无效。为了解决这个问题，他只需要添加hid 属性。