Open Graph Reference - Connection and Tags

The Open Graph protocol is a markup that you can add to your HTML documents in order to logically structure your content and gain control over the fragments that are displayed when your URLs are published via social networks such as Facebook, LinkedIn, Twitter, VKontakte , Odnoklassniki and applications such as Slack, WhatsApp, Viber and Telegram .

Why should you care about using Open Graph?

The presence of an attractive image that catches your attention, as well as a catchy and informative name and description , encouraging people to click on your fragment, significantly increase traffic to the site if you want to use traffic from social networks. Thus, the Open Graph layout allows you to easily control the display of fragments of your URLs on social networks.

Social activity  is a great way to prove to search engines that you have high-quality content that can be shared, unique and valuable to a wide audience. Of course, Open Graph does not increase the site’s rating directly, but it helps search engines to determine the context of your content, just like Schema.org.

In the end, all other things being equal, your SEO performance really benefits from using Open Graph microdata more than without it.

Facebook snippet
Check Open Graph on site

How to start using microdata Open Graph

To connect the protocol, just declare a few meta tags in HTML:

The announcement of the use of the protocol is specified by a string in the html block prefix="og: http://ogp.me/ns#"

There are four required Open Graph properties:

  • og:title
  • og:type
  • og:image
  • og:url

The remaining tags are indicated to enhance the visual possibilities of the snippet .


OG Title - the title in the Open Graph microdata

2019.08.02 11:16

In the Open Graph protocol, the og: title meta tag is used to set the title of the snippet. How to embed og: title correctly in the HTML code of the page and fill it in to achieve maximum SEO effect.

OG Description - description of the page object

2019.08.02 11:16

The og: description tag allows you to specify a short description of the page object in the Open Graph microdata. Learn how to fill out the description and achieve the maximum SEO effect.

OG type - the type of the object described on the page

2019.08.02 11:17

The Open Graph protocol allows you to clearly specify the type of object that is described on the page. The list of available values for the property is quite large. It is important to know and apply the main ones.

OG Site name - design name of the site

2019.08.02 11:17

Using the meta-properties og site name, you can specify a separate site name in the snippet of the link. Learn how to brand news links by entering the name of the site or organization.

OG Image - link announcement image

2019.11.16 21:36

Open Graph meta tag og: image allows you to set the image of the announcement for the snippet links in social networks and instant messengers. How to choose the right image for maximum performance of the content.

OG URL - canonical link for Open Graph

2019.08.02 11:18

To create a link in the Open Graph snippet, the og: url meta tag is used. The property property of this element helps to specify a canonical link for the page.