OpenGraph 图片未被正确识别

Facebook 正在抓取论坛的 logo 作为 OG 图片,而不是帖子正文顶部的主图。我已通过 Facebook OG 开发者调试工具尝试了 debug/scrape,但没有任何变化。

如果这是重复问题,请见谅。但我已经阅读了论坛上大量相关帖子,仍未找到解决方案。

感谢您的帮助!

2 个赞

您的徽标图像可能过大。在上面的预览图中,它看起来非常巨大。

2 个赞

看起来您的网站上安装了一个主题组件,该组件干扰了 Facebook 的爬虫。该组件在 <head> 标签内添加了以下内容:

<!-- Facebook Pixel Code -->
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1544745645741448&amp;ev=PageView&amp;noscript=1">
<!-- End Facebook Pixel Code -->

图像标签本不应出现在 <head> 中,因此大多数浏览器会直接忽略它们。但 Facebook 的爬虫似乎识别到了该 <img> 标签,并提前结束了 <head> 部分。从他们的 调试工具 可以看到:

<!-- Facebook Pixel Code -->
</head>
<body>
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1544745645741448&amp;ev=PageView&amp;noscript=1">
<!-- End Facebook Pixel Code -->

这个神奇的 </head><body> 标签通过 curl 或任何浏览器都无法看到。Facebook 的表现非常奇怪。

不过无论如何,解决方案是将 Facebook 跟踪像素从主题组件的 <head> 部分移动到主题组件的 Header 部分。

4 个赞

@codinghorror

我不确定自己是否漏掉了什么关联,但我的问题是我希望显示论坛标志。相反,我希望显示帖子中的第一张图片。

所以,如果帖子中的实际图片(一张我的照片)能够显示出来,那么标志的大小又有什么关系呢?我想问的是,既然我根本不希望标志显示出来,为什么还要关心它的大小?希望这能说得通。

1 个赞

@david

我没有安装任何自定义主题。这是一个原生的 Discourse 安装。事实上,我甚至不知道如何为 Discourse 安装主题或插件。

1 个赞

图片的大小确实有些相关,因为当 Facebook 找不到 og:image 标签时,它会选取你网站上最大的图片。在这种情况下,标志比照片大,所以它选择了标志。

不过,Discourse 确实包含了 og:image 标签——只是你网站的主题导致它们失效了。

你肯定安装了——Facebook 跟踪像素是由某个主题添加的。当我使用安全模式时,它就消失了。前往 /admin/customize/themes,点击 编辑 HTML,然后进入 </head> 标签页。我怀疑你会在那里看到 Facebook 的代码。

4 个赞

请看这张图片——我没有安装任何自定义主题,而且那里也没有“编辑 HTML”选项。

1 个赞

点击左侧的“默认”,然后您应该能看到编辑按钮

4 个赞

搞定啦!太棒了!非常感谢!

4 个赞