CODEWITHSUNDEEP
vue.jsnuxt.jsfacebook-opengraphmeta-tags
dialogik
dialogik

Reputation: 9552

Social open graph attributes not working in my Nuxt application

I try to add page specific open graph and twitter meta tags to my Nuxt.js application. Therefore, I have some page specific attributes

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 },
            ]
        }
    },
}

Plus some starter meta tags in my 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' },

However, when I add the page link to a tweet, it only shows the information from my nuxt.config.js. Also, using the Twitter card validator or another open graph checker doesn't show the page specific meta attributes.

I am setting page specific meta information in a single file component (in /components) and not directly in a page file (/pages directory). Just in case this is a source of failure.

When I inspect my page source code, I can see that the meta tags are present as expected.

Sourcecode screenshot

Do you have any idea what might be wrong here?

Upvotes: 0

Views: 1838

Answers (1)

smartius
smartius

Reputation: 653

Nuxt.js uses vue-meta to update the document head and meta attributes of your application. It uses the hid key to identify the meta tags, which you are missing in your component. The following should work for you:

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 },
            ]
        }
    },
}

Upvotes: 1

Related Questions