Thursday 16 April 2015

Facebook Open Graph meta tags or Facebook graph objects

What are Facebook Open Graph Meta Tags?

Facebook's open graph protocol allows web developers to showcase the preview of their page when it is shared on facebook. The web developers set the information in the web page which is used by facebook to display that page with a preview in the facebook news feed. This information is set via some some custom META tags.
Let's take a look at different META tags facebook uses to allow you to set the information displayed when some one shares the url of your website.

The basic syntax for all the facebook META tags is that every tag is prefixed with og: and then the property name, second attribute inside the facebook META tag is content where the value of property is mentioned.

Facebook Meta Tags

  1. The Image tag
  2. The image tag tells facebook to use the specified image when page is shared in news feed of facebook
    <meta property="og:image" content="https://avatars.githubusercontent.com/u/4556455?v=3"/>
    
  3. The Title tag
  4. This is the title which is corresponding to the URL of the page
    <meta property="og:title" content="Title to be displayed on facebook"/>
    
  5. The URL tag
  6. It represents the URL of the corresponding page
    <meta property="og:url" content="url of the page"/>
    
  7. The site_name tag
  8. It represents the name of the website
    <meta property="og:site_name" content="Impetus"/>
    
  9. The type tag
  10. It represents the category of the website and allows facebook to categorize the link based on this type tag
    <meta property="og:type" content="blog"/>
    

More can be explored but the syntax is same the type of tag prefixed with og: and the content inside the content attribute of these META tags.

No comments:

Post a Comment