og meta tags making use of facebook open graph protocol

David Jones
@david3jones
avatar-davidejones

With the introduction of Google+ a major competitor in the social networking world it reminded me what facebook has really accomplished and introduced into the day to day tasks of a web developer. The most noticeable for me is the facebook open graph meta tags. This was something I was not aware of for sometime but after discovering it and its uses its now become the default for me to use it on every website I build. If you aren’t familiar with this basically the facebook open graph meta tags allow you to specify certain information about your website for controlling how its referenced by facebook users. All of the meta tags begin with the letters og: and is then followed by the name of the tag. For example to specify an image to use when referencing your site on facebook you could do something like this

<meta property="og:image" content="http://yourwebsite.com/logo.png"/>

Along with this image tag there are tags for title, url, site_name, type, latitude, longitude and much more. Again these are all used in the same manor as the previous example

<meta property="og:site_name" content="Your Website Name"/>
<meta property="og:url" content="http://websiteurl.com"/>
<meta property="og:title" content="This is your website title"/>
<meta property="og:type" content="website"/>
<meta property="og:latitude" content="31.416343"/>
<meta property="og:longitude" content="-112.151213"/>

For different og:type values and full information on the open graph protocol and its implementation visit the facebook developers site here. http://developers.facebook.com/docs/opengraph/

Comments

  • avatar-david
    # david

    hi, I’m trying to implement a FB comment section on my website (www.davidloran.com) and got a message saying “This comment has not yet been published to Facebook” when commenting. I went to check it with the FB DEV debug tool and got the following: “Open Graph Warnings That Should Be Fixed:

    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.”

    What am I doing wrong? Any help will be greatly appreciated… David

  • avatar-davidejones
    # davidejones
    I’m not 100% sure but I think the url needs to match the canonical url, take a look at this post on stackoverflow http://stackoverflow.com/questions/7869430/facebook-open-graph-error-inferred-property

Comments are currently closed