Contents cache demo

Head Meta Tags not showing on certain pages

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  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?

_{This question is available on Nuxt.js community (#c2657)}

Home

Issue: 3070

Head Meta Tags not showing on certain pages