logo标签列表

Facebook无法加载og:image中的图片

facebookfacebook-opengraph
41

它已经可以工作了，但今天当我尝试分享链接时，Facebook没有显示来自og:image meta标签的图像，这让我感到惊讶。

从Facebook调试器中得知：

Meta Tag:   <meta property="og:description" content="Профессиональная сеть вопросов и ответов,создаваемая и управляемая сообществом пользователей. Ресурс для тех, кто хочет знать ответы на все вопросы." />
Meta Tag:   <meta property="og:title" content="Закрытое экспертное сообщество OdinOtvet" />
Meta Tag:   <meta property="og:type" content="website" />
Meta Tag:   <meta property="og:image" content="http://www.odinotvet.ru/images/logo_250.png" />
Meta Tag:   <meta property="og:url" content="http://www.odinotvet.ru" />
Meta Tag:   <meta property="og:site_name" content="ОдинОтвет" />
Meta Tag:   <meta property="fb:app_id" content="286967601317982" />
Meta Tag:   <meta property="fb:admins" content="100002890978393,100001666575542" />

在这里输入图片描述

这张图片在哪里？

10个回答
27

这个图片在Facebook的调试器中出现了（虽然它看起来不太好，因为你有一些透明度，这在灰色背景下效果最好，但是Facebook不会接受）

同时最好使用正方形的图片。

我发现一个问题是Facebook在他们的服务器上缓存元数据。所以如果我们对像图片这样的东西做出更改，它们并不总是立即生效，直到缓存被清除为止。也许您过去有错误的图片URL/没有URL，而FB已经缓存了那个结果。如果是这样，您可能需要等待一段时间才能清除缓存并再次获取您的数据。我见过它需要一段时间（大约一天左右）。

1
将图片格式从PNG更改为GIF解决了问题，并且旧的PNG未被FB缓存，因此在应用并使用FB调试器进行测试后立即看到了结果。 - Alexei
7
将您的URL输入Facebook调试工具可以强制刷新缓存，如果您不耐烦的话，请记住这一点！ - DaveStephens
5
即使如此，这也不能每次都刷新缓存。 - C graphics
1
在这个答案中，我提供了链接到文档，说明为什么要抓取页面以及如何进行（通过向Facebook对象调试器发送Web请求或使用curl）。每次创建新页面时都应执行此过程。 - glautrou
1
旧答案，新评论。实际上现在最好使用1.91:1的图像。https://developers.facebook.com/docs/sharing/best-practices#images - biko
17
原来的答案是还需设置 og:image:width 和 og:image:height。
参见： Facebook Open Graph No Image First Time （在我的测试中，我发现设置 og:image:width 和 og:image:height 就足够了。设置 og:image:type 是不必要的。）
这个答案对我有用。为了让Facebook重新缓存我的网站并应用更改，我必须使用https://developers.facebook.com/tools/debug/sharing/?q=myURL.TLD。 - Altimus Prime
6
我有同样的问题，但是FB调试工具“说”图片至少要在两个维度上都达到200像素。当我把图片缩小到短边为200像素时，一切都顺利了。还有一件事就是Bruce提到的缓存。我不得不打开另一页来测试我的最终链接。
希望这可以帮到你。 问候
1
有趣的是，Facebook忽略了我在og:image中设置的144x144 png图片，而选择了16x16左右的加载旋转gif动画。很有趣。我会尝试使用200x200的png图片，但我敢打赌它只想要.gif格式的图片，或者可能是png图片上的8位透明度让它感到困惑？ - Matt Parkins
4
当您注意到在与 Facebook 分享页面时有缓存问题（我是指如果您在页面源代码和 Facebook 上看到不同的值，或者如果您注意到某些缺少的值），那么您可以访问以下网址：https://developers.facebook.com/tools/debug/，输入您想要分享到 Facebook 的 URL 并提交表单以清除 Facebook 缓存。 现在，您可以再次尝试分享您的页面，您应该会看到与您的页面源代码中相同的值。
看起来缓存已经清除了。但是似乎Facebook不喜欢小图片。如果og图片太小，就会“随机”选择一张图片。 - progzy
3
将您的URL放入此网站，Facebook将帮助您解决问题： http://developers.facebook.com/tools/debug 有时Facebook会显示旧的缓存图像文件，因此在上面的URL中，您可以看到当前更新的结果。一旦完成，Facebook将存储您的新图像，并且只会显示新的图像。
0

我只有在把我之前创建的应用程序中的ID放入其中后才成功解决它

<meta property = "fb:app_id" content = "1234567891011121" />
0

我发现 Facebook 下载 og 图片失败的另一个原因与 EXIF 元数据有关，这是因为 WordPress 站点上上传的图片未写入 EXIF 元数据。我已经在线程中就此问题撰写了详细答案。

0

手动清空缓存，将?v=2或一些参数添加到您的URL中，然后单击“添加新URL”并启动Facebook调试器（https://developers.facebook.com/tools/debug/）。 现在，请使用原始URL（不带?v=2）重试，图像将出现。

-2
答案是，您必须记得使图像具有开放访问权限。如果您将其上传到服务器，并且您的服务器已启用安全性。 （安全性意味着您无法访问图像或任何内容，除非知道精确的链接）。 如果激活了Facebook，则无法连接到您的图像。
您可以做的一件事是将图像上传到Dropbox并使该文件公开。 所以每个人都可以访问它，然后将其链接到那里 :) 。或者只需打开服务器访问权限。 ^ ^ :)
-3

试试这个，它会有帮助的

<?php

$params = array();
if(count($_GET) > 0) {
    $params = $_GET;
} else {
    $params = $_POST;
}
// defaults
if($params['type'] == "") $params['type'] = "restaurant";
if($params['locale'] == "") $params['locale'] = "en_US";
if($params['title'] == "") $params['title'] = "default title";
if($params['image'] == "") $params['image'] = "thumb";
if($params['description'] == "") $params['description'] = "default description";

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# MY_APP_NAME_SPACE: http://ogp.me/ns/fb/MY_APP_NAME_SPACE#">
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <!-- Open Graph meta tags -->
        <meta property="fb:app_id" content="MY_APP_ID" />
        <meta property="og:site_name" content="meta site name"/>
        <meta property="og:url" content="URL/index.php?type=<?php echo $params['type']; ?>&locale=<?php echo $params['locale']; ?>&title=<?php echo $params['title']; ?>&image=<?php echo $params['image']; ?>&description=<?php echo $params['description']; ?>"/>
        <meta property="og:type" content="MY_APP_NAME_SPACE:<?php echo $params['type']; ?>"/>
        <meta property="og:locale" content="<?php echo $params['locale']; ?>"/>
        <meta property="og:title" content="<?php echo $params['title']; ?>"/>
        <meta property="og:image" content="URL/img/<?php echo $params['image']; ?>.png"/>
        <meta property="og:description" content="<?php echo $params['description']; ?>"/>

    </head>
</html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接