社交开放图属性在我的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',]
        }
    },}