Luutaa Technologies - Developer Blog

Make Your Website Facebook Ready

We see the popular facebook like button on most of the websites. We know when someone clicks on like button, it instantly gets posted on user’s wall with a backlink and some other information.

Have you ever seen closely how facebook link sharing script extracts information about your website to show on website? Lets investigate this minute, but important fact which can make a lot difference in what gets posted on facebook when someone clicks ‘like’ button.

How Facebook Like Button Works
How Facebook Like Button Works

By default, facebook extracts ‘Title Tag’, Meta Tags Especially, ‘description’ tag for Title & Description. For image, it searched for images on website & picks one with default (no choice like we see while sharing link on wall).

We can actually control what information is shared on Facebook. Isn’t that great? With the Help of Facebook OG (Open Graph) Tags in Header of Page, we can predetermine the format.

Here are simple Steps for the same.

  1. Make Changes in HTML Tag as mentioned here. Facebook Open Graph
  2. Create the OG Meta Tags as Mentioned Below

The Open Graph protocol defines four required properties:

  • og:title – The title of your object as it should appear within the graph, e.g., “The Rock”.
  • og:type – The type of your object, e.g., “movie”. See the complete list of supported types.
  • og:image – An image URL which should represent your object within the graph. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1. We support PNG, JPEG and GIF formats. You may include multiple og:image tags to associate multiple images with your page.
  • og:url – The canonical URL of your object that will be used as its permanent ID in the graph, e.g., http://www.yoursite.com/.

In addition, we’ve extended the basic meta data to add two required fields to connect your webpage with Facebook:

  • og:site_name – A human-readable name for your site, e.g., “Luutaa Technologies”.
  • fb:admins or fb:app_id – A comma-separated list of either Facebook user IDs or a Facebook Platform application ID that administers this page. It is valid to include both fb:admins and fb:app_id on your page.

At Last You can Check if OG Tags are working properly using this Facebook URL Lint

This small trick is very helpful in makes your site look good while its shared on Facebook

Leave a Reply:

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