Facebook does not load image from og:image

Question

It was already working, but today I was surprized, when I tryed to share the link, and Facebook did not show the image, from og:image meta tag.

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

Where is the image?

Answer 1

The image is appearing in the Facebook debugger (although it doesn't look great since you've got some transparency which works best with your grey background which FB won't take)

Also its best to use a square image.

One thing I've found it that Facebook caches the meta data on their side. So if we do changes to things like images, they don't always surface until that cache is cleared. Perhaps you had the wrong image url/no url in the past and FB has cached that result. If so you may have to wait a while for it to clear and get your data again. I've seen it take a while (in the approx range of a day)

Answer 2

Turns out the answer is to also set og:image:width and og:image:height.

See also: Facebook Open Graph No Image First Time

(In my own testing, I found that setting og:image:width and og:image:height is sufficient. Setting og:image:type is unnecessary.)

Answer 3

I had the same problem but FB Debugger "said" that the image has to be at least 200px in both dimensions. When I resized the image to 200px by the shorter side all went well. Another thing is the thing Bruce said - the caching. I had to start another page to test my final link.

Hope this helps. Regards

Answer 4

When you notice a cache problem with a page you want to share on facebook (I mean if you see differents values between your page source code and the values that appear on facebook, or if you notice some missing values), then you can go on the following url https://developers.facebook.com/tools/debug/, give the url you were trying to share on facebook and submit the form to clear the facebook cache. You can now try again to share your page, you should see the same values than in your page source code.

Answer 5

Put your URL into this site and facebook will help you out:

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

Some time facebook showing old caches images files so above URL your will so current updated result. once done facebook will store your new image on after that it will show only new images.

Answer 6

For manual cache emptying, add ?v=2 or some arguments to your url, then click on "add a new url" and launch the Facebook debugger (https://developers.facebook.com/tools/debug/). Now, retry with the original url (without ?v=2), and the image appear.

Answer 7

I only managed to resolve it when I placed my id from my previously created application

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

Answer 8

I came across another reason for og images not being downloaded by FB which had to do with the EXIF metadata not being writent to the uploaded images on the WordPress site. I have written a detailed answer about this issue in this thread.

Answer 9

The answer is, you have to remember to make the image open access. If you upload it to your server, and your server have security activated. (Security means you can't acces images or anything without knowing the exact link to it). If that is activated facebook can't connect to your image.

A thing you can do, is upload your image to dropbox and make that file public. So everyone has access to it and then link it to that :). Or just open up your server access. ^^ :)

Answer 10

Try this it will help

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