如何解决社交开放图属性在我的Nuxt应用程序中不起作用
我尝试向我的Nuxt.js应用程序添加页面特定的打开图和Twitter元标记。因此,我有一些页面特定的属性
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',{ name: 'twitter: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',{ 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',{ hid: 'twitter:site',name: 'twitter:site',
但是,当我将页面链接添加到推文中时,它仅显示来自我的nuxt.config.js
的信息。另外,使用Twitter卡验证程序或another open graph checker不会显示特定于页面的元属性。
我在单个文件组件(/components
中)而不是在页面文件(/pages
目录)中直接设置页面特定的元信息。万一这是失败的根源。
当我检查页面源代码时,可以看到meta标签按预期存在。
您知道这里可能有什么问题吗?预先感谢。
解决方法
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',{ name: 'twitter:description',hid='twitter:desccription',]
}
},}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。