Issue With Open Graph Tags And Nuxt.js (prod?)
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: '@mdote: '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:
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:
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.
The page I tested out is https://m.academy/courses/build-12-factor-nodejs-app-docker/
Answer
At the end, getting rid of prerender.io
was enough to fix the SEO issue, since the configuration was properly done.
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM