Vue.js 社交开放图属性在my Nuxt应用程序中不起作用

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

导出默认值{
// ...
头（）{
返回{
元：[
{name:'og:title'，content:this.tool.title}，
{name:'og:description'，content:this.tool.description}，
//Twitter元设置
{name:'twitter:card'，content:'summary'}，
{name:'twitter:site'，内容：'@me'}，
{属性：'twitter:domain'，内容：'me.me'}，
{属性：'twitter:url'，内容：`https://me.me/${this.tool.slug}`}，
{name:'twitter:title'，content:this.tool.title}，
{name:'twitter:description'，content:this.tool.description}，
]
}
},
}

加上我的

numxt.config.js

中的一些初学者元标记

module.exports={
// ...
负责人：{
// ...
元：[
// ...
{
hid：“描述”，
名称：'说明'，
内容：“那是我！”
},
{hid:'og:url'，属性：'og:url'，内容：'https://me.me' },
{hid:'og:title'，属性：'og:title'，内容：'me.me'}，
{hid:'og:image'，属性：'og:image'，内容：'/favicon-96x96.png'}，
{hid:'og:type'，属性：'og:type'，内容：'website'}，
{
hid:'og:description'，
属性：“og:description”，
内容：“这是唯一的我”
},
{hid:'twitter:card'，name:'twitter:card'，content:'summary'}，
{hid:'twitter:site'，名称：'twitter:site'，内容：'@me'}，

但是，当我将页面链接添加到tweet时，它只显示我的

numxt.config.js

中的信息。此外，使用Twitter卡验证程序或不显示页面特定的元属性

我在单个文件组件（在

/components

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

/pages

目录）中设置。以防这是故障源

当我检查我的页面源代码时，我可以看到meta标记如预期的那样出现

您知道这里可能有什么问题吗？请提前感谢。

Nuxt.js用于更新应用程序的文档头和元属性。它使用hid键来标识元标记，而您在组件中缺少这些标记。以下内容应该适用于您：

导出默认值{
// ...
头（）{
返回{
元：[
{name:'og:title'，hid='og:title'，content:this.tool.title}，
{name:'og:description'，hid='og:description'，content:this.tool.description}，
//Twitter元设置
{name:'twitter:card'，hid='twitter:card'，content:'summary'}，
{name:'twitter:site'，hid='twitter:side'，content:'@me'}，
{属性：'twitter:domain'，hid='twitter:domain'，内容：'me.me'}，
{属性：'twitter:url'，hid='twitter:url'，内容：`https://me.me/${this.tool.slug}`}，
{name:'twitter:title'，hid='twitter:title'，content:this.tool.title}，
{name:'twitter:description'，hid='twitter:description'，content:this.tool.description}，
]
}
},
}

谢谢你的回答，但不幸的是，它根本没有改变任何东西。嘿@GottliebNotschnabel，你能把你的代码上传到游乐场吗？我想看一下，帮你解决这个问题！嘿@smartius谢谢你看一下。代码是，你可以在