title: Facebook Does Not Grab Proper og:Image On Initial Share
body: <p>I have Wordpress site with a small bit of php code which creates the OpenGraph tags for each post. Unfortunately the Featured image (og:image) is not grabbed by Facebook when I copy the URL into a new FB post.</p>
  
  <p>Just to clarify the flow of events:</p>
  
  <ol>
  <li><p>My users create a Wordpress post. </p></li>
  <li><p>Then someone shares it on Facebook by copying the link into a FB post. Facebook displays the proper text, but grabs the wrong og:image.</p></li>
  <li><p>I go to the object debugger and test the Wordpress post. It shows no errors and all the correct og tags (including the correct og:image) but displays the default (wrong) image for the site in its thumbnail!</p></li>
  <li><p>Then if I click the Scrape New button, the proper thumbnail (matching the og:image tag) appears.</p></li>
  <li><p>Now if a user shares the same Wordpress post in Facebook, FB -does- display the proper og:image in the FB post.</p></li>
  </ol>
  
  <p>So initially the -default- image is being grabbed, but not the Featured image (ie. the post_thumbnail() in Wordpress parlance. However, if I open the 'Object Debugger For Facebook' and get a new scrape for the page, the correct image always appears. This has gotten tedious.</p>
  
  <p>The maddening thing is that if I look in the Object Debugger for the initial scrape, although the Default Image is displayed (which is incorrect) if I look at the stats, the og:image tag Facebook says it sees is -correct-. So it's -says- it scraped the correct image, but is displaying the incorrect image!</p>
  
  <p>The only error I ever see in the Object Debugger is that "the image may be too small. Images must be at least 200x200..."... which is not true. The image is always at -least- 300 x 209.</p>
  
  <p>I've checked that the code in the page header generates properly. </p>
  
  <p>I am not using a caching plug-in or a CDN.</p>
  
  <p>So: How can I insure that FB always grabs the correct og:image WITHOUT having to open the object debugger and Scrape New.</p>
  
  <p>Again: I've seen similar (old) questions here where the 'answer' was to run a new scrape for every post. Well, that just isn't going to fly with my users. We need a way to insure that a new post shows the correct og:image without having to do any extra work.</p>
  
  <pre><code>function insert_fb_in_head() {
      global $post;
      if ( !is_singular()) //if it is not a post or a page
          return;
  
  //echo '&lt;meta property="fb:admins" content="YOUR USER ID"/&gt;';
  
    echo '&lt;meta property="og:title" content="' . get_the_title() . '"/&gt;';
    echo '&lt;meta property="og:type" content="article"/&gt;';
    echo '&lt;meta property="og:url" content="' . get_permalink() . '"/&gt;';
    echo '&lt;meta property="og:site_name" content="example site"/&gt;';
    echo '&lt;meta property="og:description" content="' . get_post_meta(get_the_ID(), '_yoast_wpseo_metadesc', true). '"/&gt;';
  
  if(!has_post_thumbnail( $post-&gt;ID )) { //the post does not have featured image, use a default image
      $default_image="http://jchmusic.com/images/default-250.jpg"; //replace this with a default image on your server or an image in your media library
      echo '&lt;meta property="og:image" content="' . $default_image . '"/&gt;';
  }
  else{
      $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post-&gt;ID ), 'medium' );
      echo '&lt;meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/&gt;';
      echo '&lt;meta property="og:image:width" content="' . esc_attr( $thumbnail_src[1] ) . '"/&gt;';
      echo '&lt;meta property="og:image:height" content="' . esc_attr( $thumbnail_src[2] ) . '"/&gt;';      
  
  }
  echo "";
  }
   add_action( 'wp_head', 'insert_fb_in_head', 5 );
    /* Facebook ends *************/
  </code></pre>