Monday 14 July 2014

How to Install Facebook's Open Graph Meta Tag Technology

Content Sharing Protocol for Webpages on Social Networks

How to install facebook's open graph meta tag technology on your website or blog via geniushowto.blogspot.com social sharing
Getting Your Site Better Visibility on Facebook
Facebook's open graph meta tag technology allows webpages to be displayed as content rich objects on social networks like Facebook and other networks which depend on Facebook for content sharing on websites, blogs and apps. The Graph protocol simply uses a simple <meta> tag in your html to define what and how content is extracted from an article or webpage that is shared image thumbnail , title and description including default images and description and title to show when these things are absent or is not specified in a post. thereby making your webpages graphically ready to be shared on the Social Web correctly avoiding any inconsistent data extracted from the webpage like the correct thumbnail not showing on sharing on Facebook, in such a case it's a must have meta tag to make your webpages and posts ready for the social web. Let's begin the process of installing the Graph Protocol on your webpages.

Instructions to Follow:

  1. Installing the Graph Protocol in HTML: 

    Now in order to install Facebook's open graph protocol into your html we need to mention a simple line of code in your <html> tag basically an extra language for the social services to extract the correctly marked up data from your web pages on being shared on Facebook. To do so go to your Blog or website template → Click Edit HTML → Look for HTML tag <html ......> which will look something like the below code

    <html xmlns="http://www.w3.org/1999/xhtml">
    Now inside this HTML tag you just need to mention one more namespace that is xmlns:og='http://ogp.me/ns#' just add the line to your html tag and make sure have spaces between the already present element inside your HTML tag. After completion your code will look something like the below code.
    <html xmlns='http://www.w3.org/1999/xhtml'  xmlns:og='http://ogp.me/ns#'>
    That's all your site is now equipped with Facebook's graph protocol and now it's time to markup your data.

  2. Marking Your Site with Meta Tags

    Now to to mark up your site with Graph search meta tags simply look for the <head> tag usually after the <html> tag or else press CTRL+F on your keyboard to find the tag. After finding the tag simply add in the below code below the <head> tag.
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='Your Default Image URL to be shown when image is not available for a particular shared webpage' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
<meta content='Your Facebook Apps ID via developer console' property='fb:app_id'/>
<meta content='Your Facebook profile's or page's ID' property='fb:admins'/>
    Make sure to replace the default image to be shown for a post without any image with a desired image URL, preferably your site's logo so that your logo will show up as thumbnail when there's no image in the post. The above data tags are used for Blogger's XHTML template so make sure to replace them with your respective site languages data tags. And in case you wish to track your sharing on Facebook then add in your Facebook App ID and profile ID which keep track of your shared pages via Analytics by going to facebook.com/insights which will show insights for all your apps, pages, domains and everything.

    Tip: You can force Facebook to use the default post thumbnail for your blog post or site by leaving the default image URL parameter (red in above code) empty in the above code.

  3. Top 10 Raw must have Graph Meta Tags for Increased Visibility and SEO: 

    As many of you know Google has been dominating the search engine industry and is now even crawling social networks like Facebook, the visibility factor can be multiplied several folds with Facebook graph search but that would require some must have meta tags for webpages. Here's a list of 10 most powerful graph meta tags to use:
    <meta property="og:title" content="Title Here" /> 
<meta property="og:type" content="article" /> 
<meta property="og:url" content=" http://www.geniushowto.com/" />
<meta property="og:image" content=" http://geniushowto.com/image.jpg" />
<meta property="og:description" content="Description Here" /> 
<meta property="og:site_name" content="Site Name, i.e. Genius How to" /> 
<meta property="article:published_time" content="2014-07-15T05:59:00+01:00" /> 
<meta property="article:modified_time" content="2014-07-16T19:08:47+01:00" /> 
<meta property="article:section" content="Article Section" /> 
<meta property="article:tag" content="Article Tag" /> 
<meta property="fb:admins" content="Facebook number ID" />
    Make sure to use URLs in place of URL content and avoid using them as names like usage of geniusknight.com as site name will be wrong use instead use Plain site name as Genius Knight. For more info on these graph meta tags read the documentation at ogp.me for a better understanding. Skip those which do not apply to your webpage as a null value or a wrong value can degrade your site's performance.
Now in order to test if Open Graph Protocol is now working on your site or not simple try to share a post and see if Facebook was able to extract the data correctly or not like the Title, correct image thumbnail and the meta description. In case of errors check them and fix them out with developers.facebook.com/tools/debug by entering a post URL and debugging the encountered errors sometimes it's just Facebook's server cache update which takes time to update a thumbnail or changed description so make sure to index them via this tool to update them.

Graph search enables you to rank higher in search engines as your shared content gets indexed via social shares as well thereby making it appear more and more in search results. Apart from that it also improves user interaction and sharing of your webpages drastically. 
Posted by at
Labels: ,