Head Meta Tags not showing on certain pages

crabdul
0
crabdul
commented a year ago

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?

0
NicoPennec
1.3k
NicoPennec
commented a year ago

You have an issue from the server side that returns always a 404 response, but with the good html content inside ๐Ÿ˜ฉ

open your dev tool, go to network panel and reload https://karaimusic.com/tracks/courtney-barnett-nameless-faceless

404 error

or run curl:

curl -X HEAD -I 'https://karaimusic.com/tracks/courtney-barnett-nameless-faceless'

HTTP/2 404
cache-control: public, max-age=0, must-revalidate
content-type: text/html; charset=utf-8
date: Tue, 20 Mar 2018 20:47:12 GMT
etag: 1519251606-ssl
age: 48
content-length: 2979
server: Netlify
0
crabdul
0
crabdul
commented a year ago

Thank you for that insight ๐Ÿ‘
I do not get that error on my local server.

Would building the site with npm run build rather than npm run generate help maybe?
That is the only difference between the website on my local server and the netlify server

0
crabdul
0
crabdul
commented a year ago

I've deployed it with now and it's working all fine now!

0
Informations
Question โ€ข Unresolved
#c2657 - Created a year ago