og meta tags making use of facebook open graph protocol

Posted by 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/

Trackback URL for this post: http://davidejones.com/blog/621-og-meta-tags-making-facebook-open-graph-protocol/trackback/

Being Sociable...

  • If you like this article then please share it on your favourite social network and follow me on twitter for the latest updates

2 Responses to og meta tags making use of facebook open graph protocol

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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>