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

What is Open Graph and How to Use It in Social Networks
1 Star2 Stars3 Stars4 Stars5 Stars (11 votes, average: 4.55 out of 5)
Loading...
Table of Contents Table of contents

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

 

Facebook open graph

 

img-border
Facebook open graph exampleimg-close

 

Google+ open graph

 

img-border
Google+ og tagsimg-close

 

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:

 

img-border
Open graph protocolimg-close

 

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:

og:locale

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"/>

og:type

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" />

og:title 

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?" />

og:description 

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

og:url 

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/" />

og:image

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

og:site_name

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.

email__icon

Subscribe on our SEO news

limit

Get free access to
On Page SEO checks

Sign up for free and use On Page SEO Checker as many time as you like. Also get access to Chrome and Mozilla extensions those will help to check any active URL for SEO issues just in 1 click.

close

Reset Password

Enter your e-mail to reset your password

Your email

Check Your Email

We have sent you a new link to change your password. Check your email and follow instructions envelope

Your password has been reset successfully!