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, 2022 in Digital Marketing by Kichu
• 19,040 points
1,001 views

1 answer to this question.

0 votes
I also faced the same issue. The solution is pretty simple. Just disable the prerender.io, there is nothing more to do
while targeting the static you might have enabled the prerender.io.
answered Mar 11, 2022 by narikkadan
• 51,240 points

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, 2022 in Digital Marketing by Kichu
• 19,040 points
145 views
0 votes
0 answers

Angular 2 and SEO meta tags

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

Mar 6, 2022 in Digital Marketing by Kichu
• 19,040 points
151 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, 2022 in Digital Marketing by Kichu
• 19,040 points
910 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, 2022 in Digital Marketing by Kichu
• 19,040 points
784 views
0 votes
1 answer

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

The following worked for me : To get ...READ MORE

answered Mar 11, 2022 in Digital Marketing by narikkadan
• 51,240 points
781 views
0 votes
1 answer
0 votes
1 answer

Start script missing error when running npm start

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

answered Feb 10, 2022 in Java by Soham
• 9,700 points
3,171 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, 2022 in Others by narikkadan
• 51,240 points
1,260 views
0 votes
1 answer

Facebook Graph API SEO Comments and Profanity Filter

actually there is no way  to be ...READ MORE

answered Mar 1, 2022 in Digital Marketing by narikkadan
• 51,240 points
323 views
0 votes
1 answer

"Single-page" JS websites and SEO

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

answered Mar 4, 2022 in Digital Marketing by narikkadan
• 51,240 points
108 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP