Problems with Open Graph

Question

I am ready to pull the remaining hair out of my darn head. Can't for the life of me figure out why Facebook will not pull the featured image, or even an image from inside the post, when I share via publicize from WordPress 4.0.

I have checked and un-checked 'insert og tags' in Yoast SEO, tried shareaholic and even hard coded the lines into my functions.php (see below for code used).

//Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
  return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'add_opengraph_doctype');
//Lets add Open Graph Meta Info
function insert_fb_in_head() {
  global $post;
  if ( !is_singular()) //if it is not a post or a page
    return;
  echo '<meta property="fb:admins" content="480187318774482"/>';
  echo '<meta property="og:title" content="' . get_the_title() . '"/>';
  echo '<meta property="og:type" content="article"/>';
  echo '<meta property="og:url" content="' . get_permalink() . '"/>';
  echo '<meta property="og:site_name" content="Islanders Insight"/>';
  if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
    $default_image="http://www.islandersinsight.com/wp-content/uploads/2014/08/BvlnJMzIUAEGHEu.jpg"; //replace this with a default image on your server or an image in your media library
    echo '<meta property="og:image" content="' . $default_image . '"/>';
  }
  else{
    $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' );
    echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
  }
  echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

This is the facebook page : https://www.facebook.com/IslandersInsight

And this is the post : http://www.islandersinsight.com/2014/10/new-york-islanders-vs-san- jose-sharks-pregame-report/

Can anyone please help? I am about to start trying to slash my wrists with plastic knives.

These are the only errors that the debugger is throwing me:

Inferred Property The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.

Inferred Property The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.

Inferred Property The 'og:description' property should be explicitly provided, even if a value can be inferred from other tags.

Inferred Property The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.

These are the only OG tags I see being generated when I click 'check page source':

<!-- OpenGraph Facebook Start -->
<meta property="og:title" content="New York Islanders vs. San Jose Sharks: Pregame Report" />
<meta property="og:description" content=" #479084605 / gettyimages.com When: Thursday October 16th, 2014 Where: Nassau Veterans Memorial Coliseum, Uniondale, NY Time: 7 p.m. TV: MSG+ (Howie Rose, Butch Goring) Radio: WRHU 88.7 FM (Chris King..." />
<meta property="og:image" content="http://www.islandersinsight.com/wp-content/uploads/2014/10/SharksatIsles-150x150.png" /> <!-- OpenGraph Facebook Ends -->
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="http://www.islandersinsight.com/xmlrpc.php" />

As you can see, it looks like something is shrinking my featured image to 150x150 even though its sized 1800x1200.

What could be doing that? And why wouldn't the debugger throw me an error alerting me to that fact? Just taking a shot in the dark obviously.

Answer 1

It is because your markup is invalid which is causing Facebook to think the meta elements are in the body. You can see this by running the page through W3C validator which make sense for the Facebook linter error message:

Your page has meta tags in the body instead of the head. This may be because your HTML was malformed and they fell lower in the parse tree. Please fix this in order for the tags to be usable.

I suspect it is all the tracking codes you have at the start of your head.

<!-- Start DFP SETUP -->
  <script type="text/javascript"><!--
  //<![CDATA[
  (function() {
  var useSSL = 'https:' == document.location.protocol;
  var src = (useSSL ? 'https:' : 'http:') + '//www.googletagservices.com/tag/js/gpt.js';
  document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
  })();
  //]]>
  //--></script>
  <script type='text/javascript' src='http://img.bnqt.com/lib/js/sdpdfphelper.js'></script>
  <script type="text/javascript">
    googletag.pubads().enableSyncRendering();
    googletag.pubads().setTargeting("title", sdpTargeting.title)
                      .setTargeting('targetPaths', sdpTargeting.targetPaths)
                      .setTargeting('fullPath', sdpTargeting.fullPath)
                      .setTargeting('queryStr', sdpTargeting.queryStr)
                      .setTargeting('domainName', sdpTargeting.domainName);       
  </script>
  <!-- DFP SETUP end -->

<!-- Begin comScore Tag -->
<script>
  var _comscore = _comscore || [];
  _comscore.push({ c1: "2", c2: "6035223" });
  (function() {
    var s = document.createElement("script"), el = document.getElementsByTagName("script")[0]; s.async = true;
    s.src = (document.location.protocol == "https:" ? "https://sb" : "http://b") + ".scorecardresearch.com/beacon.js";
    el.parentNode.insertBefore(s, el);
  })();
</script>
<noscript>
  <img src="http://b.scorecardresearch.com/p?c1=2&c2=6035223&cv=2.0&cj=1" />
</noscript>
<!-- End comScore Tag -->

Move those to the very end of your page right before the </body></html>.