覆盖清单元数据

Question

我有一个包含名称等内容的清单，它也会立即为我的页面显示元标记。现在我想在我的个人页面上使用元标签，问题是清单元标签不会被覆盖，这导致它们对 Facebook 等网站具有更高的优先级。

示例清单：

  manifest: {
    theme_color: '#1a1a1a',
    name: 'Stackoverflow',
    short_name: 'SO',
    description: 'Questions and Answers',
    lang: 'de'
  },

页面中的示例更改：

  head () {
    return {
      meta: [
        { name: 'og:url', content: 'www.notstackoverflow.com' },
        { name: 'og:type', content: 'article' },
        { name: 'og:title', content: this.post.titel },
        { name: 'og:description', content: this.post.subtitel },
      ]
    }
  },

问题在于它仍然使用清单而不是页面中的标题和描述。如果我继续查看源代码，它只会在清单之后添加页面中的那些。

（Nuxt + PWA 模块）

Answer 1

您必须为每个元添加 hid 属性：

 head () {
    return {
      meta: [
        { hid: 'og:url', name: 'og:url', content: 'www.notstackoverflow.com' },
        { hid: 'og:type', name: 'og:type', content: 'article' },
        { hid: 'og:title', name: 'og:title', content: this.post.titel },
        { hid: 'og:description', name: 'og:description', content: this.post.subtitel },
      ]
    }
  },

见https://nuxtjs.org/faq/duplicated-meta-tags

为避免在子组件中使用时出现重复，请使用“hid”键提供唯一标识符。