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
Google+ open graph
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 cache of information 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:
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="https://sitechecker.pro/open-graph/" />
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.