社交开放图属性在我的 Nuxt 应用程序中不起作用

Question

我尝试将页面特定的开放图和 Twitter 元标记添加到我的 Nuxt.js 应用程序中。因此，我有一些页面特定的属性

export default {
    // ...
    head () {
        return {
            meta: [
                { name: 'og:title', content: this.tool.title },
                { name: 'og:description', content: this.tool.description },
                // Twitter meta settings
                { name: 'twitter:card', content: 'summary' },
                { name: 'twitter:site', content: '@me' },
                { property: 'twitter:domain', content: 'me.me' },
                { property: 'twitter:url', content: `https://me.me/${this.tool.slug}` },
                { name: 'twitter:title', content: this.tool.title },
                { name: 'twitter:description', content: this.tool.description },
            ]
        }
    },
}

在我的

nuxt.config.js

中加上一些入门元标签。

module.exports = {
    // ...
    head: {
        // ...
        meta: [
            // ...
            {
                hid: 'description',
                name: 'description',
                content: 'Thats me!'
            },
            { hid: 'og:url', property: 'og:url', content: 'https://me.me' },
            { hid: 'og:title', property: 'og:title', content: 'me.me' },
            { hid: 'og:image', property: 'og:image', content: '/favicon-96x96.png' },
            { hid: 'og:type', property: 'og:type', content: 'website' },
            {
                hid: 'og:description',
                property: 'og:description',
                content: 'This is the one and only me'
            },
            { hid: 'twitter:card', name: 'twitter:card', content: 'summary' },
            { hid: 'twitter:site', name: 'twitter:site', content: '@me' },

但是，当我将页面链接添加到推文时，它只显示来自我的

nuxt.config.js

的信息。此外，使用 Twitter 卡片验证器或另一个开放图形检查器不会显示页面特定的元属性。

我在单个文件组件（在

/components

中）设置页面特定元信息，而不是直接在页面文件（

/pages

目录）中设置。以防万一这是失败的根源。

当我检查页面源代码时，我可以看到元标记按预期存在。

你知道这里可能出了什么问题吗？

Answer 1

Nuxt.js 使用 vue-meta 更新应用程序的文档头和元属性。它使用 hid 键来识别组件中缺少的元标记。以下内容应该适合您：

export default {
    // ...
    head () {
        return {
            meta: [
                { name: 'og:title', hid='og:title', content: this.tool.title },
                { name: 'og:description', hid='og:description', content: this.tool.description },
                // Twitter meta settings
                { name: 'twitter:card', hid='twitter:card', content: 'summary' },
                { name: 'twitter:site', hid='twitter:side', content: '@me' },
                { property: 'twitter:domain', hid='twitter:domain', content: 'me.me' },
                { property: 'twitter:url', hid='twitter:url', content: `https://me.me/${this.tool.slug}` },
                { name: 'twitter:title', hid='twitter:title', content: this.tool.title },
                { name: 'twitter:description', hid='twitter:desccription', content: this.tool.description },
            ]
        }
    },
}