Head Meta Tags not showing on certain pages
[issue link]I’m trying to debug how my websites head meta tags are scraped when shared on facebook.
My nuxt head property in nuxt.config.js
is
head: {
title: 'Karai Music',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Music Sharing Site' },
{ property: 'og:site_name', content: 'Karai Music'},
{ hid: 'og:url', property: 'og:url', content: 'https://karaimusic.com'},
{ hid: 'og:description', property: 'og:description', content: 'Music Sharing Site'},
{ hid: 'og:title', property: 'og:title', content: 'Karai Music | Music Sharing Site'},
{ property: 'og:type', content: 'article' },
]
When I use the facebook scraping tool for https://karaimusic.com/tracks/courtney-barnett-nameless-faceless, I get a 404 response and the scraper fails to get the appropriate meta tags defaulting to the tags set in nuxt.config.js
.
Below is what the scraper sees for the URL https://karaimusic.com/tracks/courtney-barnett-nameless-faceless
<!DOCTYPE html>
<html data-n-head="">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta data-n-head="true" charset="utf-8">
<meta data-n-head="true" name="viewport" content="width=device-width, initial-scale=1">
<meta data-n-head="true" data-hid="description" name="description" content="Music Sharing Site">
<meta data-n-head="true" property="og:site_name" content="Karai Music">
<meta data-n-head="true" data-hid="og:url" property="og:url" content="https://karaimusic.com">
<meta data-n-head="true" data-hid="og:description" property="og:description" content="Music Sharing Site">
<meta data-n-head="true" data-hid="og:title" property="og:title" content="Karai Music | Music Sharing Site">
<meta data-n-head="true" property="og:type" content="article">
<title data-n-head="true">Karai Music</title>
<link data-n-head="true" rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="preload" href="/_nuxt/manifest.24bad83b27fc84514cde.js" as="script">
<link rel="preload" href="/_nuxt/vendor.1266f8bdcbd8d57e2f67.js" as="script">
<link rel="preload" href="/_nuxt/app.809bd7aa04f076f1863b.js" as="script">
<link rel="prefetch" href="/_nuxt/layouts/default.947c97477291cbadc43c.js">
<link rel="prefetch" href="/_nuxt/pages/index.a123e0e9a3b88348faca.js">
<link rel="prefetch" href="/_nuxt/pages/tracks/_track/index.2794c46356b85003bbbf.js">
<link rel="prefetch" href="/_nuxt/pages/albums/_album/index.d5f634b27d2695c9e1af.js">
<link rel="prefetch" href="/_nuxt/pages/tracks/index.b0d13e614f67d4962239.js">
<link rel="prefetch" href="/_nuxt/pages/albums/index.d9ed08d93666a93ab9cf.js">
<link rel="prefetch" href="/_nuxt/pages/about/index.d026fab82a4d42b2ac9f.js">
<link rel="prefetch" href="/_nuxt/pages/radio/index.cada4a6f7c9a2e262d4e.js">
<link rel="prefetch" href="/_nuxt/pages/terms/index.658d7190f2cddd568b71.js">
</head>
<body data-n-head="">
<div id="__nuxt">
<style>body, html, #__nuxt { background-color: white; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; margin: 0; padding: 0;}.spinner { width: 40px; height: 40px; margin: 100px auto; background-color: #dbe1ec; border-radius: 100%; -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; animation: sk-scaleout 1.0s infinite ease-in-out;}@-webkit-keyframes sk-scaleout { 0% { -webkit-transform: scale(0) } 100% { -webkit-transform: scale(1.0); opacity: 0; }}@keyframes sk-scaleout { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1.0); transform: scale(1.0); opacity: 0; }}</style>
<div class="spinner"> <div class="double-bounce1"></div> <div class="double-bounce2"></div>
</div>
<!-- http://tobiasahlin.com/spinkit -->
</div>
<script type="text/javascript" src="/_nuxt/manifest.24bad83b27fc84514cde.js"></script><script type="text/javascript" src="/_nuxt/vendor.1266f8bdcbd8d57e2f67.js"></script><script type="text/javascript" src="/_nuxt/app.809bd7aa04f076f1863b.js"></script>
</body>
</html>
pages/tracks/_track.vue is the corresponding vue file for https://karaimusic.com/tracks/courtney-barnett-nameless-faceless
<script>
import wp from '~/lib/wp'
import InfinityContainer from '~/components/post/InfinityContainer.vue'
export default {
components: {
InfinityContainer
},
async asyncData ({ params }) {
const post = [await wp.getPost(params.track)]
return {
post
}
},
head () {
return {
title: `${this.post[0].acf.title} - ${this.post[0].acf.artist} | Karai Music`,
meta: [
{ hid: 'description', name: 'description', content: this.post[0].acf.abstract },
{ hid: 'og:description', property: 'og:description', content: this.post[0].acf.abstract },
{ property: 'og:type', content: 'article' },
{ hid: 'og:title', property: 'og:title', content: `${this.post[0].acf.title} - ${this.post[0].acf.artist} | Karai Music`},
{ property: 'og:image', content: this.post[0].acf.cover_art },
{ hid: 'og:url', property: 'og:url', content: `https://karaimusic.com/tracks/${this.post[0].slug}`},
]
}
},
}
</script>
When I try https://karaimusic.com/tracks, the facebook scraper correctly gets the tags.
This is what the scraper sees.
At first I thought it could be because I’m retrieving data from an API but I added an og:image
property that gets an image from the API and it gets the image properly.
tags scrapped for https://karaimusic.com/tracks
og:url | https://karaimusic.com/tracks/
og:type | article
og:title | Karai Music \| New tracks
og:image | https://karaimusic.co.uk/wp-content/uploads/2018/03/102636-lemon-glow.jpg
og:description | Latest tracks released
og:site_name | Karai Music
og:updated_time | 1521570324
pages/tracks/index.vue
<script>
import ListPosts from '~/components/list/ListPosts.vue'
import wp from '~/lib/wp'
export default {
components: {
ListPosts
},
head () {
return {
meta: [
{ hid: 'og:url', property: 'og:url', content: 'https://karaimusic.com/tracks/'},
{ hid: 'og:description', property: 'og:description', content: 'Latest tracks released'},
{ hid: 'og:title', property: 'og:title', content: 'Karai Music | New tracks'},
{ property: 'og:type', content: 'object' },
{ property: 'og:image', content: this.posts[3].acf.cover_art },
]
}
},
async asyncData ({ params }) {
const posts = await wp.getTrackPosts(1,12)
return {
posts
}
},
}
</script>
Any ideas on why it isn’t scraping properly?
Does the <!-- http://tobiasahlin.com/spinkit -->
element in the body
tag in the HTML file for https://karaimusic.com/tracks/courtney-barnett-nameless-faceless
suggest the page hasn’t fully loaded when it’s scraped?