Issue with Open Graph tags and Nuxt js prod

0 votes

I integrated OpenGraph tags into my Nuxt.js app, following the instructions from their SEO documentation at https://nuxtjs.org/examples/seo-twitter-og

I'm setting tags from a child component using the SocialHead component. The contents of this component are:

<template>
  <span v-if="false" />
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '',
    },
    description: {
      type: String,
      default: '',
    },
    url: {
      type: String,
      default: '',
    },
    image: {
      type: String,
      default: '/images/hero/brain-og.png',
    },
  },
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: 'og:title',
          name: 'og:title',
          content: this.title.replace(' - M.academy', ''),
        },
        {
          hid: 'description',
          name: 'description',
          content: this.description,
        },
        {
          hid: 'og:description',
          property: 'og:description',
          content: this.description,
        },
        {
          hid: 'og:url',
          property: 'og:url',
          content: process.env.baseUrl + this.url,
        },
        {
          hid: 'og:type',
          property: 'og:type',
          content: 'website',
        },
        {
          hid: 'og:image',
          property: 'og:image',
          content: process.env.baseUrl + this.image,
        },
        {
          hid: 'og:image:secure_url',
          property: 'og:image:secure_url',
          content: process.env.baseUrl + this.image,
        },
        {
          hid: 'og:image:alt',
          property: 'og:image:alt',
          content: this.description,
        },
        {
          hid: 'twitter:title',
          name: 'twitter:title',
          content: this.title.replace(' - M.academy', ''),
        },
        {
          hid: 'twitter:card',
          name: 'twitter:card',
          content: 'summary_large_image',
        },
        {
          hid: 'twitter:image',
          name: 'twitter:image',
          content: process.env.baseUrl + this.image,
        },
        {
          hid: 'twitter:description',
          name: 'twitter:description',
          content: this.description,
        },
        {
          hid: 'twitter:site',
          name: 'twitter:site',
          content: '@mdotacademy',
        },
        {
          hid: 'twitter:creator',
          name: 'twitter:creator',
          content: '@markshust',
        },
      ],
    }
  },
}
</script>

I'm using Google Chrome's "Open Graph Preview" extension and locally, they all appear to work and preview correctly:

enter image description here enter image description here

However, when I deploy these updates to production and check again, all of the Open Graph preview tools I use do not seem to find the tags:

enter image description here enter image description here

I have also tested LinkedIn's & Twitter's open graph preview tools at:

I'm a bit stuck, because the tags appear when viewing the page source, and also using a tool like https://www.opengraph.xyz/ -- but not using the actual LinkedIn & Twitter verification tools.

Mar 10 in Digital Marketing by Kichu
• 15,450 points
149 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In Digital Marketing

0 votes
0 answers

SEO and Django with title and description tags

I have a base.html for the base ...READ MORE

Mar 8 in Digital Marketing by Kichu
• 15,450 points
21 views
0 votes
1 answer
0 votes
1 answer

"Single-page" JS websites and SEO

If you're using Rails, try poirot. It's ...READ MORE

answered Mar 4 in Digital Marketing by narikkadan
• 7,860 points
28 views
0 votes
0 answers

Angular 2 and SEO meta tags

i need to add met tags to ...READ MORE

Mar 6 in Digital Marketing by Kichu
• 15,450 points
22 views
0 votes
0 answers

Open graph description meta tag is not working in LinkedIn

LinkedIn is supporting open graph meta tags ...READ MORE

Mar 6 in Digital Marketing by Kichu
• 15,450 points
220 views
0 votes
0 answers

Canonical updated with JS - is this used by SEO?

0 Due to some hindrance by BigCommerce, I ...READ MORE

Mar 6 in Digital Marketing by Kichu
• 15,450 points
78 views
0 votes
0 answers

How to get Stack Overflow SEO friendly URL structure in Nuxt.js?

Stack Overflow has the following URL structure ...READ MORE

Mar 10 in Digital Marketing by Kichu
• 15,450 points
115 views
0 votes
1 answer

Start script missing error when running npm start

It seems that there is an undefined ...READ MORE

answered Feb 10 in Java by Soham
• 8,730 points
1,158 views
0 votes
1 answer

How to set meta tags using Angular universal SSR and ngx-seo plug-in?

first Install the plug-in with npm i ngx-seo ...READ MORE

answered Feb 11 in Others by narikkadan
• 7,860 points
310 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP