覆盖清单元数据

Question

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

示例清单：

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

页面中的示例更改：

  head () {
    return {
      meta: [
        { name: 'og:url', content: 'www.notwhosebug.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.notwhosebug.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

To avoid any duplication when used in child component, please give a unique identifier with the "hid" key.

覆盖清单元数据

Overwrite ManifestsMeta Data

manifest

progressive-web-apps

vuejs2

nuxt.js