"The 'og:type' property is required, but not present." error

Question

I'm having an issue with Facebook's graph API. I'm getting a "The 'og:type' property is required, but not present." error on this URL: http://thatnewjoint.com/posts/logic-driving-ms-daisy-feat-childish-gambino (and every other URL on my blog).

The og:type meta tag is in the HTML so i'm not sure why Facebook isn't recognizing it. Here's what their graph api call is returning:

{
   "id": "561280430667026",
   "created_time": "2014-08-28T20:35:18+0000",
   "is_scraped": false,
   "type": "website",
   "updated_time": "2014-08-28T20:35:18+0000",
   "url": "http://thatnewjoint.com/posts/eminem-superman-throwback-thursdays"
}

seems like when i'm posting using their api (via the koala ruby gem), the link doesn't get scraped? i would assume that the og:type error is causing this but here are the meta tags from that page:

<meta property="og:url" content="http://thatnewjoint.com/posts/eminem-superman-throwback-thursdays" />
<meta property="og:title" content="Eminem - &quot;Superman&quot; [Throwback Thursdays] | ThatNewJoint | Premier Hip Hop Blog" />
<meta property="og:description" content="Classic from The Eminem Show. I&#39;ll be honest - the video is very strange, but the song is great."
<meta property="og:type" content="video">
<meta property="og:image" content="http://i3.ytimg.com/vi/8kYkciD9VjU/hqdefault.jpg" />
<meta property="og:video" content="http://www.youtube.com/v/8kYkciD9VjU?version=3&amp;autohide=1">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="1920">
<meta property="og:video:height" content="1080">

EDITING WITH MORE INFO:

Seems as though if I put the URL into the FB Debugger, I initially get this "The 'og:type' property is required, but not present." error BUT if I then click the "Fetch new scrape information" button, it will find all the correct information like it should. Is it possible that FB is attempting to scrape the URL too early? Seems like on their first pass, they just aren't scraping the URL properly, but I can't figure out why.

Answer 1

You will need to add this HTML meta tag to your HEAD, with your-app-id (unique Facebook App ID). Just be sure to swap out "your-app-id":

<meta property="fb:app_id" content="your-app-id">

To create a FB App ID go here: https://developers.facebook.com/apps

And add your same unique Facebook App ID to the Facebook JS and place it as close to the top of your HTML body tag as you can. Just be sure to swap out "your-app-id":

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '{your-app-id}',
      xfbml      : true,
      version    : 'v2.0'
    });
  };

  (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/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>

Also to place your website Facebook button add this code as well. Just be sure to swap out "your-unique-page-to-be-liked":

<div class="fb-like" data-href="your-unique-page-to-be-liked" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>

Finally in Facebook Developers Dashboard take your FB Application out of "Developers Mode" and put it in "Public" Mode.

For more info about FB Open Graph and meta tags here are 2 helpful links: 1. https://developers.facebook.com/docs/opengraph/using-objects 2. https://developers.facebook.com/docs/sharing/best-practices

That should do the trick. Let me know if you need any more help.

I updated this answer, thanks to kitdesai for pointing out that Facebook has new requirements for their Graph API Version which is currently up to v2.1