Nuxt OG:Facebook 未正确读取标签
Posted
技术标签:
【中文标题】Nuxt OG:Facebook 未正确读取标签【英文标题】:Nuxt OG:tags not being correctly read by Facebook 【发布时间】:2022-01-23 07:27:36 【问题描述】:这个问题我有一段时间了。 我们有一个在 s-s-r 模式下运行的 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,所以我猜不是。
【问题讨论】:
【参考方案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;
【讨论】:
以上是关于Nuxt OG:Facebook 未正确读取标签的主要内容,如果未能解决你的问题,请参考以下文章
类似框上的 Facebook 描述未显示在 Facebook 墙上
og:图像未定义,无法下载或不够大错误*尽管*指定了图像大小
php Wordpress插件输出og:image:width和og:image:height标签,因为Facebook第一次共享URL时需要它们。