What are Facebook Open Graph (OG) Tags and how to use them on your Website

When someone posts a link to website, blog, mobile app etc. on Facebook, Facebook shows a preview of the linked page content (see below)

Ever wondered how Facebook knows the content of the website? Facebook crawls the link (similar to Google) and looks for what’s call “Open Graph” tags on the site. On the above link (http://mentr.io), if you do a view page source, you will see the following snippet (btw if you know how to paste code in medium let me know)

<meta property=”og:title” content=”Mentr — The College Preparation App”/> <meta property=”og:url” content=”http://mentr.io"/> <meta property=”og:site_name” content=”Mentr”/> <meta property=”og:image” content=”http://mentr.io/images/block_5.png"/> <meta property=”og:type” content=”website”/> <meta property=”og:description” content=”Mentr is a mobile app that provides innovative college preparation resources to high school students and their parents when they want it and where they want it. A network of current college students provide virtual college tours in real time, provide feedback on college essays, provide answers to a variety of college preparation questions. Students also participate in panel discussions to share their college preparation experiences with others.”/></code>

Facebook looks for these properties on the page. You can see how the image corresponds to the data in the tags. The above tags (title, url, site_name, image, type, description) are most important. There are other tags but I never used them.

Official page for Facebook Open Graph

https://developers.facebook.com/docs/sharing/webmasters#markup

How do you use these tags on your static website?

If you have a static site, just copy these tags between <head></head>of the page. Upload to the server and you are done.

How do you use these tags on your dynamic PHP website?

If you have dynamic website like Mentr written in PHP (or any other language for that matter), then you most probably have a header file that gets included in every page. But how do you change the og tags depending on the page you are in? For example, og tags for the “About” page may be different from og tags on the “Product” page for an e-commerce website.

Here is the trick we used on Mentr.

Before including the header, we set the og tags as PHP variables

<?php
$ogTagsSet = 1;
 $ogTitle = “Got college admission blues? Chat with college mentors to get peer help.”;
 $ogUrl = “http://mentr.io/chat";
 $ogSiteName = “Mentr — Peer to peer college preparation”;
 $ogImage = “http://mentr.io/images/chat-1.png";
 $ogType = “website”;
 $ogDescription = “My high school college counselor supports 500+ students so she spends just 30 minutes with me per year. I can’t afford a private college counselor that costs $5000-$10000. How am I supposed to win the race for college admission? Is there a solution?”;
include(“include_header.php”);
?>

Then in include_header.php you do this

<?php
 if (!$ogTagsSet) {
 $ogTitle = “Mentr — The College Preparation App”;
 $ogUrl = “http://mentr.io”;
 $ogSiteName = “Mentr”;
$ogImage = “http://mentr.io/images/block_5.png";
 $ogType = “website”;
 $ogDescription = “Mentr is a mobile app that provides innovative college preparation resources to high school students and their parents when they want it and where they want it. A network of current college students provide virtual college tours in real time, provide feedback on college essays, provide answers to a variety of college preparation questions. Students also participate in panel discussions to share their college preparation experiences with others.”;
 }
?>
<!DOCTYPE html>
<html lang=”en”>
 <head>
 <meta charset=”utf-8">
 <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
 <meta name=”viewport” content=”width=device-width, initial-scale=1">
 <! — The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags →
 <meta property=”og:title” content=”<?php echo $ogTitle; ?>”/>
 <meta property=”og:url” content=”<?php echo $ogUrl; ?>”/>
 <meta property=”og:site_name” content=”<?php echo $ogSiteName; ?>”/>
 <meta property=”og:image” content=”<?php echo $ogImage; ?>”/>
 <meta property=”og:type” content=”<?php echo $ogType; ?>”/>
 <meta property=”og:description” content=”<?php echo $ogDescription; ?>”/>

Since you set the variables before including the header, they will be passed the the header file and the values will be seen by the header file. If the variables are not set, header file will go on with default OG Tags.

How to debug OG Tags

Facebook provides a handy debugger tool to debug your OG tags. It here — https://developers.facebook.com/tools/debug/

You simply paste the URL and hit the button. It will show you what content it was able to fetch from the page, including errors if any. This is a very handy tool.

Note about scraping images off the page

So when Facebook crawls the link for the first time, it fetches the image. But it takes time to fetch and store it on its own server. You may not see the image appear when you put the link Facebook post for the first time.So you can remove the link and paste it again. Second crawl already has the copy of the image in Facebook’s cache so it shows the image.

So that is pretty much it. I hope this was helpful.