2012-04-27 171 views
29

它已经在工作,但今天我很惊讶,当我尝试分享链接时,Facebook没有显示图片,来自og:image meta标签。Facebook不会加载图片:image

facebook debugger

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" /> 

enter image description here

哪里像?

回答

19

的图像出现在Facebook的调试器(虽然它看起来并不大,因为你已经有了一些透明度与你的灰色背景的效果最好,其FB不会拿)

也是其最好用一个方形图像。

有一件事我发现Facebook将元数据缓存在他们身边。因此,如果我们对图片等内容进行更改,则在清除缓存之前,它们不会始终显示。也许你以前有错误的图片url /没有url,FB已经缓存了这个结果。如果是这样,您可能需要等待一段时间才能清除并重新获取数据。我已经看到它需要一段时间(在大约一天的范围内)

+1

从png更改为gif解决了这个问题,而且旧的png没有被FB缓存,因此我在应用和使用FB调试器进行测试后立即播种结果 – Alexei 2012-05-14 05:39:54

+6

通过Facebook调试器来保存URL会强制缓存刷新 - 如果你不耐烦,请记住一些事情! – DaveStephens 2012-10-09 01:36:17

+3

即使这样也不会一直刷新缓存 – 2013-04-08 03:22:34

6

我有同样的问题,但FB调试器“说”,图像必须在两个维度至少200px。当我将图像的大小调整到200px时,所有图像都很顺利。另一件事是布鲁斯说的 - 缓存。我不得不开始另一个页面来测试我的最终链接。

希望这会有所帮助。 Regards

+1

有趣的是,Facebook忽略了我在og:image中的144x144 png,赞成加载spinner.gif,它的大小是16x16左右。有趣。将尝试200x200 PNG,但我敢打赌,它只是想要.gif,或者PNG上的8位透明度令人困惑? – 2013-05-08 16:23:56

3

当你发现你想在facebook上分享的页面存在缓存问题(我的意思是如果你看到你的页面源代码和Facebook上出现的值有差异,或者你注意到一些缺失的值) ,那么你可以继续下面的网址https://developers.facebook.com/tools/debug/,给你想要在Facebook上分享的url并提交表单以清除facebook缓存。 您现在可以再次尝试共享您的页面,您应该看到与您的页面源代码中相同的值。

+0

看来缓存实际上已被清除。然而,Facebook似乎并不喜欢小图片。如果图像太小,则“随机”拍摄图像。 – progzy 2014-12-12 14:18:42

11

原来的答案是也设置og:image:widthog:image:height

参见: Facebook Open Graph No Image First Time

(在我自己的测试,我发现,设置og:image:widthog:image:height足以设置og:image:type是不必要的。)

3

把您的网址进入该网站,Facebook将帮助你出:

http://developers.facebook.com/tools/debug

一段时间的Facebook显示旧缓存图像文件,所以上面的网址你的意志所以当前更新的结果。一旦完成Facebook将存储您的新图像后,它将只显示新的图像。

-2

试试这将有助于

<?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> 
-2

答案是,您必须记住要使图像开放访问。如果您将其上传到您的服务器,并且您的服务器已激活安全性。 (安全意味着你不能在不知道链接的情况下访问图片或任何东西)。如果这是激活的Facebook无法连接到您的图像。

你可以做的一件事是上传你的图片到Dropbox并公开该文件。所以每个人都可以访问它,然后将其链接到:)。或者只是打开你的服务器访问权限。 ^^ :)