Nuxt OG:tags not being correctly read by Facebook

Question

I am having this issue for a while now. We've a nuxt website running in SSR mode and inside it, it has a news page that follows this structure:

/pages
    /noticia
        /_slug
             /_id
                 index.vue

The issue appears when we try to share it on facebook or any other social media that uses OG:tags, but not twitter, because twitter works perfectly.

Example: https://www2.oabrs.org.br/noticia/comunicado-csa/60613 If you inspect the link above, you'll see the correct meta-tags, but on Facebook debugger, it shows tags from another news. I've tried to change the slugs so it would be ( /noticia/_id/_slug ) but it also didn't work.

Index.vue

head() {
  if(this.noticia){
    // console.log(this.noticia)
    return {
      title: decode(this.noticia.titulo),
      link: [
        {
            hid: 'canonical',
            rel: 'canonical',
            href: `${this.$config.VUE_APP_BASE_HREF + this.$router.currentRoute.fullPath}`
        }
      ],
      meta: [
        {
          hid: "keywords",
          property: "keywords",
          content: this.noticia.tags,
        },
        {
          hid: "og:url",
          property: "og:url",
          content: this.$config.VUE_APP_BASE_HREF + this.$router.currentRoute.fullPath,
        },
        {
          hid: "og:title",
          property: "og:title",
          content: decode(this.noticia.titulo),
        },
        {
          hid: "og:description",
          property: "og:description",
          content: decode(this.noticia.titulo),
        },
        {
          hid: "og:image",
          property: "og:image",
          content: this.filename || this.$config.VUE_APP_IMAGES_DEFAULT,
        },
        {
          hid: "twitter:url",
          name: "twitter:url",
          content: this.$config.VUE_APP_BASE_HREF + this.$router.currentRoute.fullPath,
        },
        {
          hid: "twitter:title",
          name: "twitter:title",
          content: decode(this.noticia.titulo),
        },
        {
          hid: "twitter:image",
          name: "twitter:image",
          content: this.filename || this.$config.VUE_APP_IMAGES_DEFAULT,
        },
      ]
    };
  } else {
    return {
      title: "Notícia não encontrada",
      link: [
        {
            hid: 'canonical',
            rel: 'canonical',
            href: `${this.$config.VUE_APP_BASE_HREF + this.$router.currentRoute.fullPath}`
        }
      ],
    };
  }
},
async asyncData({ app, params, store, route }){
  // console.log(route)
  try{
    await store.dispatch('noticias/fetchNoticia', route.params.id);
    // console.log(store.getters['noticias/getNoticia']);
    return {
      noticia: store.getters['noticias/getNoticia']
    }
  } catch (e){
    // console.log(e)
  }
},

I thought it had something to do with meta charset, but it is set to UTF-8, so I guess not.

Answer 1

I found the issue The problem was that I configured my axios httpClient so it expects a status 200 for a positive response, but facebook / linkedin / whatsapp ... ( not twitter ) only makes a partial request which returns a 206 response. See: Facebook debugger : Response 206

So, my url and tags were all correct, all I had to do was to enable 206 as a possible response.

    const responseInterceptor = response => {
    let data = null;
    switch(response.status) {
        case 200: case 206: 
            if(response.data){
                data = response.data;
            } else {
                // notify error
            }
            break;
        
        // any other cases
        default:
            // default case
    }

    return data;
}