Nuxt OG：Facebook 未正确读取标签答案

【问题标题】：Nuxt OG:tags not being correctly read by FacebookNuxt OG：Facebook 未正确读取标签
【发布时间】：2022-01-23 07:27:36
【问题描述】：

这个问题我有一段时间了。我们有一个在 SSR 模式下运行的 nuxt 网站，其中有一个遵循以下结构的新闻页面：

/pages
    /noticia
        /_slug
             /_id
                 index.vue

当我们尝试在 Facebook 或任何其他使用 OG:tags 而不是 twitter 的社交媒体上分享它时，就会出现问题，因为 twitter 运行良好。

示例：https://www2.oabrs.org.br/noticia/comunicado-csa/60613 如果您检查上面的链接，您会看到正确的元标签，但在 Facebook 调试器上，它会显示来自另一个新闻的标签。我试图改变蛞蝓，所以它会（ /noticia/_id/_slug ）但它也没有工作。

索引.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)
  }
},

我以为它与元字符集有关，但它设置为 UTF-8，所以我猜不是。

【问题讨论】：

标签： vue.js nuxt.js metadata facebook-opengraph meta-tags

【解决方案1】：

我发现了问题问题是我配置了我的 axios httpClient，因此它期望状态为 200 以获得积极响应，但 facebook /linkedin / whatsapp ...（不是 twitter ）仅发出返回 206 响应的部分请求。见：Facebook debugger : Response 206

所以，我的 url 和标签都是正确的，我所要做的就是启用 206 作为可能的响应。

    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;
}

【讨论】：