Facebook share not showing image from open graph metatags

cgrantham picture cgrantham · Jan 11, 2012 · Viewed 15.3k times · Source

I'm trying to integrate the Facebook share button to my employer's site, the title, url, description/intro are all displaying correctly, however no image is being attached. When the share dialog opens, an image container flickers and then disappears as though facebook is trying to process the image(s) but fails.

I'm using og:image and a link relation to try and specify the image to use for shared links:

<meta property="og:image" content="/images/logo_white_150px.png" />
<link rel="image_src" type="image/png" href="/images/logo_white_150px.png" />

That image used to work (it scaled appropriately) but no longer does, I've also tried other images of differing size and format with no luck.

Here's the open meta-tags I'm using in the header:

<!DOCTYPE html>
<html xmlns:fb="http://ogp.me/ns/fb#" itemscope itemtype="http://schema.org/Article" xmlns:og="http://ogp.me/ns#">
  <head>    
    <meta property="og:type" content="landing page" />
    <meta property="og:title" content="Social Media Test Page" />
    <meta property="og:description" content="This is a page for testing the behavior of social media buttons..." />
    <meta property="og:image" content="/images/logo_white_150px.png" />
    <link rel="image_src" type="image/png" href="/images/logo_white_150px.png" />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:url" content="<%=shortUrl%>" />
    <meta property="og:site_name" content="site name" />
    <meta property="og:medium" content="mult" />
  </head>

Here's the JavaScript I'm using at the start of the body:

  <body>
    <script type="text/javascript">
      (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
      } (document, 'script', 'facebook-jssdk'));
    </script>
  ...

And here is how I'm using the button:

  <div class="left" style="text-align: center;">
    <a name="fb_share" type="button" share_url="<%=shortUrl%>">Share</a>
    <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
  </div>

Any help is much appreciated, thanks in advance
Chris.

Answer

Sebastian picture Sebastian · Jan 6, 2016

If everything is OK on the scraped result, try to fetch new scrap information using Facebook Debugger.

This is because Facebook use its own cache for og:data.