Check SEO meta tags

Fast Links

What is Open Graph and How to Use It in Social Networks

What is Open Graph and How to Use It in Social Networks

Here are some examples of how structured information on the link to an article looks like on social networks


Facebook open graph


Facebook open graph example


Google+ open graph


Google+ og tags


We are sure you agree that these posts look very attractive and clickable, just by being social linking that a network user shared with their friends, posted on their timeline or in a community.

But, what should you do if the code is written correctly, but while sharing it on Facebook, incorrect or outdated information is displayed? Welcome to Facebook for developers. Following this link you can clear old Google cache formation that is stored on the social network for your page and feed it a new beautiful meta title tag and meta description tag.

Perhaps now you come up with an idea how to customize the layout of the OG for your site, and spam (just for a little bit) in groups and social networking communities?


How to customize the OG layout


Let’s now figure out how to set up the Open Graph protocol for your site to transform this idea into reality. Everything is extremely simple! Here is how the source code of the protocol looks like:


Open graph protocol


It is placed in the page code, in the… </ head> section, but can be put after the main meta tags.

Let’s deal with each Open Graph tag and their meaning separately:


It help to indicate the localization (language of the site); you can use the value of “en_US” by default. Simply saying it`s very similar to hreflang tag. Here is an example:

<meta property="og:locale" content="en_EN"/>


This tag describes type of page (article, news, video, category, etc.); you can use “article” as the default. It`s purpose to set the view which will be shown on social media page. Remember: you can set up only the one type of page! Here is an example:

<meta property='og:type' content="article" />


This is one of the main tags, it indicates title of the article, how it should be displayed. For SEO purposes it`s very important to set it up. Remember: this title will be shown on your Facebook page, so you should make it attractive for users. The limits are just like for SEO titles: don’t go beyond 60 characters. Here is an example:

<meta property="og:title" content="What Are Open Graph Tags and How to Use Them Effectively?" />


It states the short description that is displayed when the link preview is generated and has as same meaning as a seo description. Here is an example:

<meta property="og:description" content="Open Graph markup is a protocol that allows you to manage and monitor the data that forms in preview (structuring information about the page) in the post when a user shares the link in social networks. Those open graph tags help to create desired design for a post in social networks." />


It`s a canonical link to the page of the site. It is used as an object identifier (web page). Remember: it`s required parameter. If you forget to add it, your open graph markup won`t work. Here is an example:

<meta property="og:url" content="" />


Simply saying, it`s a link to a picture that will be displayed in the post. Remember: be careful with open graph image size because it has upper and lower validation limits. For example, for big screens, it would be appropriate 1,200 x 630 pixels, but for the smallest – 200 x 200 pixels. This tag may contain additional properties. For example :

og: image: secure_url – sets the URL of the image that works on HTTPS;
og: image: width – the number of pixels wide;
og: image: height – the number of pixels in height;
og: image: type – sets the MIME image type


It sets the website name, which is displayed in the pre-show regime. Here is an example:

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

The meaning of each tag is outlined, so you only need to fill them in and embed them in the code page of your favorite Internet resource.

We would like to add that with the introduction of the Open Graph protocol it is recommended to add “Share” buttons for social networks on the site’s pages. This will make it easier for users to share useful information about your site with other users. Well, it certainly will simplify implementation of tasks for a SEO optimizer when working with “likes” exchanges, which, although they do not bring a tangible link effect, allow us to speed up indexing / re-indexing while promoting the site.


Open Graph for WordPress, Opencart, Joomla

For the most popular cms-systems, there are ready-made plug-ins that help realize introduction of the Open Graphic markup without involving coders.

For example, for WordPress, this SEO plugin can be downloaded here or you can use the extension of Yoast SEO plugin, which also solves this issue. For Joomla, you will find a plugin following this link, and for OpenCart here.

Check other of our awesome SEO tools!
Traffic Checker Estimate website traffic stats by different channels & in different periods.
Rank Checker Get a report with keywords that bring the website the most of organic traffic.
Speed Test Test a specific page for speed and get suggestions how to improve it.
Backlinks Checker Our free backlink checker tool will help you monitor links to your website.
Website Safety Check out that the website is safe and not listed as suspicious.
Similar Websites Free tools allowing users to get information on similar sites in a few seconds.
View all tools

Check your website SEO performance

Get a personalized checklist on how to improve your website to rank higher on Google