When you share a link to your post on Facebook or Twitter, it automatically generates a preview card with a title, description, and optional image. This preview helps your post visibility by presenting it in an attractive manner to other users.
This preview can be customized for all our pages using Open Graph Protocol (OGP) created by Facebook. Twitter supports this protocol adding a few tags of its own as well. In this post, I will discuss the required meta tags to customize your link preview.
In this article, based on the Open Graph Protocol, I will tell you the exact tags to be added in the head section of your blog. This will transform your posts into rich social objects on Facebook, Twitter etc.
What is Open Graph Protocol
Open Graph Protocol is a schema to assign properties to a web page which can be easily understood by the compliant applications. Open Graph Protocol is implemented through meta tags in the head section of HTML web page and is loosely based on other existing schema technologies.
Open Graph Protocol provides different meta tags to be added to your page to customize the different elements of a web page as well as to define a lot of other properties for that page.
Though we can add all the tags defined in the Open Graph Protocol for a webpage or blog post, it will be redundant and will add to extra code. So, in this post, we will look at the basic required meta tags which will be sufficient for your customized link previews on Facebook & Twitter.
Customizing a link preview
If you look at your link preview of a post you shared on Facebook or Twitter, you will observe that there are three important elements-
- Title
- Short Description
- Image
These are the visible elements which are needed in a link preview. Apart from these, there are two more properties, which are type and url.
Type defines the type of web page. For blog posts and news articles, it is ‘article’. Url is the canonical url of the object. This acts as a unique id for the object in the entire graph. In case of multiple pages sharing same data like comment pages on a blog post, this url remains same.
Apart from this, Facebook requires you to add their FB App ID in another meta tag. As described in my previous post on the topic Social Sharing Buttons, you can easily get your Facebook app id from your Facebook for Developers dashboard.
In case of Twitter, though it defines it’s own tags, it officially supports the Open Graph Protocol as well. So, if you add separate Twitter meta tags along with Open Graph tags, Twitter tags will be redundant. So, in the interest of keeping our code concise, we will only add those Twitter tags, which are not covered by Open Graph Protocol.
Twitter only requires one extra meta tag, ‘twitter:card’, which we will add in our code.
Let’s take a look at the final code.
<meta property="og:type" content="article" />
<meta property="og:title" content="Title of your page">
<meta property="og:description" content="Description of your page">
<meta property="og:image" content="Image/url/of/your/post's/featured/image">
<meta property="og:url" content="Canonical/url/to/your/page">
<meta property="fb:app_id" content="Your_FB_App_ID" />
<meta property="twitter:card" content="summary_large_image">You can see that "og:type" and "twitter:card" tags are static and will remain the same for all blog posts. "fb:app_id" will also remain the same if you are using same app id for entire website.
You will have to modify four tags as per your post data- "og:title", "og:description", "og:image", "og:url".
Paste these tags in the head section of your HTML page. Your page is now rich social object.
Sometimes Facebook or Twitter fetches wrong values for these tags, or sometime they may not even able to fetch any data. Also, you may have changed the post title, description or image after the page has been fetched by Facebook/Twitter. As Facebook & Twitter cache their data for many days, you may not be able to see the updated data when you share that link.
In such cases, you may use the Facebook Sharing Debugger which shows how Facebook looks at the Open Graph Meta of your page and shows you the open graph data currently saved by Facebook for your post. It also allows you to force Facebook to fetch the data again, in case, there is a discrepancy.
What happens when there are no Open Graph meta tags on your page
If there are no Open Graph meta tags on a page, Facebook tries to get that data automatically based on page content. Usually, the title of the page is taken as title. Description is taken from the description meta tag, if available. Otherwise, it takes first few lines from the content. Similarly, the first image found on the page which is larger than 200×200 pixels id taken as image.
There is no confirmation that in the absence of Open Graph meta tags, Facebook will take only these values. It can take any value as defined by their fetching algorithms. So, to avoid this uncertainty, it is always advised to add the above seven meta tags to all your web pages.
Conclusion
So, you can see that Facebook’s Open Graph Protocol is currently kind of a universal protocol to define social properties of a web page. It is supported by Twitter and many other social networks.
It is very easy to implement as it requires adding only seven basic tags. You can add many more tags by referring to the Open Graph Protocol Documentation.
So, don’t wait anymore. If you have not yet implemented the Open Graph meta tags in your blog or website, it is important that you do it now.