Facebook Open Graph Meta Tags Tutorial

When you share a link on Facebook, it looks for Open Graph Meta Tags to generate preview of the link. In this post I will provide list of all open graph meta tags using which you can track and customize preview of the links you share on Facebook.

What is Open Graph Protocol?

Facebook looks for open graph meta tags of a link before generating its preview. This procedure of generating preview is called Open Graph Protocol.

Preview of a URL looks like this

Open graph meta tags starting with “og” are called global open graph meta tags. Open graph meta tags starting with “fb” are called facebook insights open graph meta tags.

Before producing open graph meta tag we should plan what will be displayed in the different sections of the preview and how we are going to track our object.

Let’s see all the open graph meta tags in depth.

og:type

og:type is used to specify the type of content the webpage contains. It can be a simple website, blog article, movie site etc.

Its possible values are:

• website
• article
• video
• book
• music
• profile

og:title

og:title is used to specify the title of your webpage. This title will be displayed in the preview. If not specified then defaults to webpage title.

og:site_name

og:site_name is used to specify the name of your website. Displayed in the object specific section of preview.

og:url

Many URLs can point to the same webpage or can have same content. To aggregate all comments and likes between all those canonical URLs we use og:url tag.

Suppose we have two URLs pointing to same web page or have same content. Let those URLs be “http://qnimate.com/narayan-prusty” and “http://qnimate.com/narayanprusty”.

In the webpage head section we can write

Now all the comments and likes will be same for both URLs.

og:description

og:description is used to specify a description of the webpage in 2-4 sentences. This description will be displayed in the preview.

og:image

og:image is used to specify the url of the image associated with the webpage. This image is shown in the preview. Facebook recommends to use a image of atleast 1200×630 pixels. If your image size is larger than 600 x 315 then a larger image will be displayed in Facebook otherwise a smaller image will be displayed.

If you have multiple og:image tags then facebook will allow you to choose one while sharing.

og:video

og:video is used to specify the url of the video associated with the webpage. This video is shown in the preview and can be played.

Now a user can play video directly in facebook without visiting the webpage. Remember that facebook only play .swf files. And also you have to provide og:image for playing video.

This is useful while sharing a video post. If you have multiple og:video tags then facebook will allow you to choose one while sharing.

og:audio

og:audio is used to specify the url of the audio associated with the webpage. This audio is shown in the preview and can be played..

Now a user can play audio directly in facebook without visiting the webpage. Remember that facebook only play .mp3 files.

This is useful while sharing a audio post. If you have multiple og:audio tags then facebook will allow you to choose one while sharing.

og:see_also

If you want a engaged user to see your other URLs then you can use this tag to specify the other URLs.

Suppose you have written three blogs on a topic. You can share one URL and when user engages on that shared post by clicking like, commenting or viewing then facebook will show other two posts view below the first one. This will keep the user more engaging with your products.

You can embed this code in your first blog:

og:locale and og:locale:alternate

You can have multiple language versions of your post available to facebook users via og:locale and og:locale:alternate meta tags. You can specify the language versions of your post using these tags.

Suppose your have english and french version of your post. So you can include this in the header of the english version of the page and share the URL.

Now if someone is using french version of facebook then facebook will make a request to the shared URL using the HTTP request header “X-Facebook-Locale”.

Now you know that facebook is requesting the french version of the page there you can return this response

For more information on open graph protocol localization read this reference.

fb:app_id

You can find out views and clicks of your shared link by combining the shared link with one of your apps using fb:app_id. In the app insights you can see the metrics of the shared link.

Suppose I have a facebook app with app id as “1447531992132118”. Then I can share a link and see the views and clicks of the link in my app in the following way:

Now to see the metrics(clicks and views) visit this link and click on button “Insights of your website”. A dialog box will be displayed, enter the domain name of your shared URL and choose the app to which you linked the URL. And click “Get Insights” and now you will be able to see the metrics of your shared URL.

fb:admins

Its also serves the same purpose as fb:app_id. But the difference when using fb:admins you don’t need to have a facebook app, you just need to have a facebook account to track the metrics of an shared URL. One more advantage of using this og tag is that multiple facebook users can see the metrics of the same URL.

Suppose your facebook account id is “557880802” and my account id is “557099992”. We both together wrote a post and shared it on facebook. Then we can see the metrics of the post by embedding fb:admins og tag into the webpage this way,

To see the metrics we can go to the same page as we went for fb:app_id. And there enter domain name and instead of selecting a App in the dropdown we select our respective accounts. And click on “Get Insights”. Now we both will be able to see the metrics from our respective accounts.

Debugging

Facebook provides a utility called as Open graph debugger using which you can check if your tags are valid and also see a sample preview of your URL without sharing it. Click here to use the debugger.

Conclusion

To keep things simple I skipped structured data and open graph objects. For most cases the above open graphs will be enough. For more detailed information visit this link. Google+ and Twitter also recognize some of the open graph protocol tags. Thanks for reading.