fbpx
Loading
Home/Blog/SEO/What Open Graph markup is

What Open Graph markup is

Social media reposts are one of the powerful tools for website promotion, especially if it has an active blog. And in order for the post with a link to the resource to be displayed correctly and be informative, a special Open Graph markup is used. Initially, it was created for reposts on Facebook but today Facebook, Twitter, Pinterest, and other social networks and even instant messengers work with it.Open Graph is the HTML code for page layout. In other words, meta tags transfer to social networks information about what content to use when reposting and how to display it.

How Open Graph can be useful

Share buttons on the site allow you to create natural links to a resource, with the right snippet that contains an image and text, and increase the trust of search engines in the site. But the content of the snippet is sometimes pulled not from the article to which the link leads, but randomly, from other materials on the site, which confuses the reader and leads to a drop in interest to the link. The Open Graph markup allows you to avoid this and generate a beautiful and correct preview that is relevant to the content of the article when reposting.Benefits of implementing Open Graph:

 

  • optimization of the title, description, and image under the preview;
  • repost automation – no need to manually add text and image.

How to сustomize Open Graph Markup

The Open Graph protocol consists of tags that are inserted into the HTML code of the page in the <head> section and contain: a title, a description of the material, a link to the image that should be displayed in the announcement, a link to the web page itself, and the name of the site. There are also additional OG tags — for example, for contacts, addresses, and other elements of the site. All tags are listed on the official markup site ogp.me.Note that each social network needs a certain image size. You can assign an additional meta tag for each of them, however, in this case, the picture may not always be displayed correctly. Therefore, we recommend that you write in the code a single initial size for all social networks in pixels using the options width (width) height (height). Then each social network will crop the image to fit its current requirements.There are two ways to embed Open Graph markup on your site:

 

  1. Manually, that is, put the corresponding technical assignment to the programmer.
  2. With plugins for CMS:
  • Open Graph or Yoast SEO for WordPress;
  • Phoca Open Graph for Joomla;
  • Open Graph Meta for Opencart and others.

 

After implementing the markup, you need to check the display of the snippet to make changes to the tags, if necessary. How to do it:

 

  1. Manually repost the article to each social network where you plan to make announcements and check if the snippet is displayed correctly.
  2. By automatically checking the link with:
  • Facebook Crawler;
  • Google tool;
  • Twitter tool.

 

Checking the Open Graph markup will allow you to make changes to it on time for correct content display.

When you repost an article on a social network, a box appears with the sentence «Tell about it». We recommend you do not ignore it, but use it for its intended purpose: briefly talk about the article using the link and how it is useful. Then people will immediately understand if they need this information, and you will get much more views, likes, and clicks, as well as reposts of the announcement than when posting a «naked» link without any explanation.Summing up, we recommend that you implement Open Graph on your site without fail to share announcements that are correct and attractive for social network users, thus attracting more traffic to the site and improving behavioral factors.

Worth a read