I recently incorporated OpenGraph tags into my Nuxt.js application by following the guidelines outlined in their SEO documentation available at https://nuxtjs.org/examples/seo-twitter-og
The tags are being set from a child component using the SocialHead component. Here is the content of this component:
<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,
},
// Other meta tags for OpenGraph and Twitter
],
}
},
}
</script>
After deploying these changes to production, I noticed that the Open Graph preview tools I usually rely on do not seem to detect the tags anymore:
https://i.sstatic.net/LZQhs.png https://i.sstatic.net/fxP03.png
Even though the tags show up when viewing the page source and utilizing tools like , they do not appear when testing with LinkedIn's and Twitter's verification tools.
I have conducted tests using LinkedIn's & Twitter's open graph preview tools available at:
One specific page I tested can be found at