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

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>