41

I'm trying to implement Facebook's OpenGRaph protocol on my product pages.

On each page I have this above the head section:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

Then within the head section i have:

<meta property="og:title" content="This Page Title"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="http://www.mywebaddress.com"/>
<meta property="og:image" content="http://www.myimage.jpg"/>
<meta property="og:site_name" content="My Site Name"/>
<meta property="fb:admins" content="10101010101"/>
<meta property="og:email" content="hello@mywebaddress.com"/>
<meta property="og:description" content="Description of my product."/>

I then have a 'like' button with this code:

(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'));

To my eye, everything seems to replicate what can be found on the Facebook Developers page but when i 'like', Facebook is seemingly only picking up on the page title and general info.

I have tried to 'debug' the page using their Object debugger, and i get these warnings:

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:image property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property   The og:locale property should be explicitly provided, even if a value can be inferred from other tags.

As far as I can tell, i have followed Facebook's instructions to the letter, but I have no joy. Am I doing anything wrong?

starball
  • 20,030
  • 7
  • 43
  • 238
Dan
  • 977
  • 6
  • 16
  • 31
  • Can you check this? http://facebook.stackoverflow.com/questions/11146635/facebook-like-button-og-tags – Thommie Jun 22 '12 at 11:39

7 Answers7

55

Are those tags on 'http://www.mywebaddress.com'?

Bear in mind the linter will follow the og:url tag as this tag should point to the canonical URL of the piece of content - so if you have a page, e.g. 'http://mywebaddress.com/article1' with an og:url tag pointing to 'http://mywebaddress.com', Facebook will go there and read the tags there also.

Failing that, the most common reason i've seen for seemingly correct tags not being detected by the linter is user-agent detection returning different content to Facebook's crawler than the content you're seeing when you manually check

Igy
  • 43,710
  • 8
  • 89
  • 115
  • 1
    Oh man, sometimes i could kick myself! That seems to have done the trick Igy, thank you so much :) – Dan Oct 23 '11 at 21:56
  • 1
    I guess someone at Facebook moved too fast and broke things because I cannot get it to work at all, Facebook just picks another image. They have an online debuger where you enter the URL, that one shows errors even for Facebook's URL. – adrianTNT Aug 03 '13 at 17:00
  • So stupid showing OG tags only to Facebook. Why would one exclude Twitter or other services utilizing this meta information?! – Daniel W. Nov 10 '16 at 14:08
  • @Dan So what was the issue for you? I'm having the same problem but I can't see from your response which part of Igy's response was the kicker. – Andrew-ThinkUp Jan 26 '17 at 21:11
  • 1
    You saved my day! Thanks for pointing out this overlooked mistake – Imtiaz Apr 29 '20 at 15:26
24

You need a space after the final set of quote marks

<meta property="og:url" content="http://www.mywebaddress.com"/>

Should be..likes this one

<meta property="og:url" content="http://www.mywebaddress.com" />
Nikolay Mihaylov
  • 3,868
  • 8
  • 27
  • 32
hetster
  • 293
  • 2
  • 3
16

UPD 2020: "Open Graph Object Debugger" has been discontinued. Use Sharing Debugger to refresh Facebook cache.

There is some confusion about tons of Facebook Tools and Documentation. So many people probably use the Sharing Debugger tool to check their OpenGraph markup: https://developers.facebook.com/tools/debug/sharing/

But it only retrieves the information about your site from the Facebook cache. This means that after you change the ogp-markup on your site, the Sharing Debugger will still be using the old cached data. Moreover, if there is no cached data on the Facebook server then the Sharing Debugger will show you the error: This URL hasn't been shared on Facebook before.

So, the solution is to use another tool – Open Graph Object Debugger: https://developers.facebook.com/tools/debug/og/object/

It allows you to Fetch new scrape information and refresh the Facebook cache:

Open Graph Object Debugger

Honestly, I don't know how to find this tool exploring the Tools & Support section of developers.facebook.com – I cannot find any links and mentions. I only have this tool in my bookmarks. That's Facebook :)

Use 'property'-attrs

I also noted that some developers use the name attribute instead of property. Many parsers probably will process such tags properly, but according to The Open Graph protocol, we should use property, not name:

<meta property="og:url" content="http://www.mywebaddress.com"/>

Use full URLs

The last recommendation is to specify full URLs. For example, Facebook complains when you use relative URL in og:image. So use the full one:

<meta property="og:image" content="http://www.mywebaddress.com/myimage.jpg"/>
Oleg Cherr
  • 3,565
  • 2
  • 17
  • 27
  • Nice tool. I was having problems with the other FB tools due to cache. – redeemefy Jun 22 '17 at 19:18
  • 2
    Using `property` did it for me. It's a bit confusing as the `property` attribute [doesn't seem to be defined](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta) at the HTML spec level. ¯\\_(ツ)_/¯ – Kirk Woll Dec 27 '18 at 14:36
5

In case it helps anyone I had the same error. It turns out my page had not been scrapped by Facebook in awhile and it was an old error. There was a scrape again button on the page that fixed it.

Anthony Taylor
  • 101
  • 1
  • 3
1

It might help some people who are struggling to get Facebook to read Open Graph nicely...

Have a look at the source code that is generated by browser using Firefox, Chrome or another desktop browser (many mobiles won't do view source) and make sure there is no blank lines before the doctype line or head tag... If there is Facebook will have a complete tantrum and throw it's toys out of the pram! (Best description!) Remove Blank Line - happy Facebook... took me about 1.5 - 2 hours to spot this!

Elliott Rodgers
  • 11
  • 1
0

In my case an unexpected error notice in the source code stopped the facebook crawler from parsing the (correctly set) og-meta tags.

I was using the HTTP_ACCEPT_LANGUAGE header, which worked fine for regular browser requests but not for the crawler, as it obviously won't use/set it.

Therefore, it was crucial for me to use the facebook's debugger feature See exactly what our scraper sees for your URL, as the error notice only could only be seen there (but not through the regular 'view source code'-browser feature).

screenshot of the facebook debugger

johnrbnz
  • 357
  • 2
  • 8
0

If you so much as point to the wrong image, or your image file path is incorrect in any way, you'll see the following three errors:

Bad Response Code: URL returned a bad HTTP response code.

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

Missing Properties: The following required properties are missing: og:url, og:type, og:title, og:image, og:description, fb:app_id

In my case, all that was wrong was I had the wrong path to og:image - once I corrected that all of these problems disappeared immediately.

stevec
  • 41,291
  • 27
  • 223
  • 311