QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Facebook Open Graph Meta Tags Tutorial

Facebook Open Graph Meta Tags Tutorial

open-graph-protocol

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
preview

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.

<!-- this webpage plays a video -->
<meta property="og:type" content="video" />

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.

<meta property="og:title" content="QNimate - Facebook Open Graph Protocol" />

og:site_name

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

<meta property="og:site_name" content="QNimate" />

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

<meta property="og:url" content="http://qnimate.com/narayan-prusty/" />
<meta property="og:url" content="http://qnimate.com/narayanprusty/" />

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.

<meta property="og:description" content="learn all about open graph protocol." />

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.

<meta property="og:image" content="http://qnimate.com/facebook-open-graph-protocol/post-image.png">

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.

<meta property="og:image" content="http://qnimate.com/facebook-open-graph-protocol/post-image.png">
<meta property="og:video" content="http://qnimate.com/1.swf">

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..

<meta property="og:image" content="http://qnimate.com/facebook-open-graph-protocol/post-audio.mp3" />

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:

<meta property="og:see_also" content="http://qnimate.com/2.html">
<meta property="og:see_also" content="http://qnimate.com/3.html">

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.

<meta property="og:title" content="This is the english version of title." />
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="fr_FR" />

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”.

X-Facebook-Locale: fr_FR

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

<meta property="og:title" content="This is the french version of title." />
<meta property="og:locale" content="en_FR" />
<meta property="og:locale:alternate" content="fr_US" />

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:

<meta property="fb:app_id" content="1447531992132118" />

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,

<meta property="fb:admins" content="557880802, 557099992" />

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.

May 21, 2014Narayan Prusty
Designing WordPress Posts UI For Post FormatsTwitter Cards Meta Tags Tutorial
Comments: 1
  1. steber
    5 years ago

    Good summary, thanks Narayan!

    I don’t understand if the fb:app_id tag is compulsory when the goal is just to post a link on facebook and get a nice preview of the linked webpage.

    ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

Image6 years ago 3 Comments API, SEO, Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • What is Open Graph Protocol?
  • og:type
  • og:title
  • og:site_name
  • og:url
  • og:description
  • og:image
  • og:video
  • og:audio
  • og:see_also
  • og:locale and og:locale:alternate
  • fb:app_id
  • fb:admins
Related Articles
  • Twitter Cards Meta Tags Tutorial
  • URL Tracking Parameters and Its Negative Impact
  • Login Using Facebook Tutorial
  • SEO Pagination Best Practices and Friendly URLs
  • PageSpeed Insights API
Our Sponsor
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license