Open Graph Meta Tags : Completely Master Facebook and Twitter

Open Graph Meta Tags : Completely Master Facebook and Twitter

One of the main tasks that SEO specialists regularly face is delivering content to a target audience. Also, professionals need to maintain the loyalty of the existing audience and attract the attention of new users.

An effective and efficient tool for solving these problems is social networks. In the first quarter of 2020, the number of monthly active users on Facebook exceeded 2.6 billion users.

Statista.com

In the US, 190 million people use this network. 

The number of Twitter Monetizable Daily Active Usage (mDAU) in the third quarter of 2019 reached 145 million people, the network’s audience grows annually by an average of 17%. 

Therefore, the communicative capabilities of social networks are difficult to overestimate.

At the same time, any content must first attract and retain the user’s attention before it becomes visible to the user. One way to make a link on a social network attractive is to use the Open Graph protocol. Let’s examine this tool, its functions, and how to use them when working with content.

What is Open Graph?

Facebook introduced the Open Graph protocol in 2010 to develop integrity with other sites. In essence, Open Graph actions are similar to a snippet that allows you to create a link on a Facebook page by marking up using codes and meta tags. Thus, you can make the preview attractive:

  1. Highlight basic information.
  2. Make the correct URL.
  3. Select a photo or video to be displayed on the page.
  4. Generate relevant titles and descriptions.

In this example post on the New York times page, we see a link drawn using Open Graph

Facebook.com

In this example of a post on Facebook Open Graph was not used, so the preview simply demonstrates one of the frames of the video to which the link is given:

Facebook.com

On its page for developers, Facebook gives an example of the markup used for the post of The New York Times:

Developers Facebook

As you can see, in these Open Graph examples, the markup consists of 5 lines, which describe the elements of the snippet:

  • The URL is the link to the article page.
  • Type: indicates the type of content, in this case, an article.
  • Title: indicates the title of the article.
  • Description: a description of the content of the article.
  • Image: indicates which image should be shown on the preview.

While Open Graph meta tags are primarily an encoding for Facebook, other social networking sites, including Twitter and LinkedIn, also recognize this markup.  

It is worth noting that Open Graph can affect user behavior:

  1. People choose links that match their interests and the quality images, catchy headlines, and relevant descriptions are appealing. And this, in turn, will lead to increased traffic on the site.
  2. Using Open Graph helps Facebook to better understand what the article is about and affects the delivery of results for a user’s request.
  3. An attractive and clear preview highlights the post against the background of the rest of the feed.

Types of Open Graph Meta Tags

To correctly apply Open Graph tags, it is worth understanding their varieties that are presented in the Facebook documentation. 

og:ul

This tag describes the canonical URL of the page; it should not contain a session variable or other additional parameters. Thus, the main address to which the transition with the preview will be carried out is noted. The Share action will also be performed using this URL. At the same time, only the domain name will be visible on the Facebook news feed.

An example of the tag: <meta property=”og:url” content=”http://nameofdomain.com” />

og: title

This is the title for the content, which works the same as the standard title indicated by the meta tag. On Facebook, the title is shown in bold, and although its length is not limited, experts recommend using a length of 40 characters for the mobile and 60 characters for the desktop version. The title should not contain advertising information, branding, the site name, etc.

An example of the tag: <meta property = ”og: title” content = ”the name of your title” />

og: image

It is an image URL for the snippet. This point is worth focusing on in more detail since Open Graph image is an effective tool to emphasize on the content. By choosing a picture and fixing its location in the meta tag, you can be sure that the image you selected will be shown on the social network. If you do not include this aspect, Facebook will choose the illustration on its own, and it is not always a good option.

If you use a site and content management system, you can use a plugin that will automatically configure the micro-marking of your images. We will dwell on the topic of plugins below. It is worth noting that it will be safer to register the code yourself, and at the same time, make sure that the image is of high quality and suitable in size.

Facebook Open Graph image size must be at least 200 x 200 pixels and not exceed 8 MB. The guide for developers recommends 1200 x 630 pixels, this size will allow for a high-quality display on devices with high resolution.

To match the proportions of the desktop and mobile versions of the pages, for Open Graph image Facebook advises to keep the aspect ratio of 1.91:1 or close to it, which will avoid cropping the pages.

Another argument in favor of manually setting meta tags for photos is the ability to use pictures that are not on the site for posting on Facebook. You can also place an image with text on top of the image. In this case, it is important to remember that text is best placed in the middle so that it is not cropped during formatting.

An example of the tag: <meta property = ”og: image” content = ”http://www.domainname.com/name-of-image.jpg” />    

og: type

This tag is used to describe the type of content. The most commonly used tag is the “website” one since the link almost always leads to the page of the site. At the same time, depending on the specifics of the content, it can be additionally designated with the following tags: article, blog, music, food, person, etc.

If the content is associated with a specific subject, event, or product, you can choose a special description for it. Examples and descriptions of different types and objects are listed in the Open Graph protocol. https://ogp.me/#types 

Example of the tag: <meta property = “og: type” content = “website” />

og: description

A brief description of the content, which, in essence, is similar to the traditional meta-description for the site page. The main task of the description is to arouse interest in the user and arouse the desire to follow the link. Do not write more than one or two short sentences. Although Facebook states that you can write up to 4 sentences in the description, SEO experts recommend that you do not go beyond the limit of 200 characters. This will increase the likelihood that users will see the entire description, rather than the passage that fits in the snippet.

An example of the tag<meta property = ”og: description” content = ”your short and entertaining description to attract users” />

In addition to standard meta tags, the Open Graph protocol provides advanced tag options, some of which are worth noting:

og: locale

Used to change the language, since by default it’s American English.

og: audio and og: video

Used for additional audio and video files.

How to Install Open Graph Meta Tags on a Site

The Open graph tags are located in the <head> section of the HTML page where the metadata is placed. You can create codes yourself, depending on the type of your content, and then place them in the <head> block. If you feel insecure about writing code, you can simply transfer this task to a web developer. If your site is based on the popular CMS, you can use the plugins to generate codes.

WordPress has a special Open Graph plugin:

WordPress.org

Many people prefer to use the popular Yoast SEO plugin, which provides the ability to do markup for social networks.

When adding tags for Facebook, you need to select this section in the plugin menu and fill in the Facebook Title, Facebook Description, and Facebook Image windows using the appropriate codes. In this case, the plugin itself will register the URL. If there is an image on your page, it will be used by the plugin by default. So in case that you do not plan to make a special image for the post, you can leave out this item and save time.

LinkedIn Open Graph Meta Tags and Layouts for Twitter

These social networks also support the Open Graph protocol, forming a snippet for the given meta tags:

Twitter.com

Linkedin.com

At the same time, Twitter has its unique markup called Twitter Cards. But, as stated in the Twitter guide for developers, the tags on this social network look similar to the tags of the Facebook protocol.  

Therefore, if you have already created Open Graph tags and are going to post the same content on Twitter, you do not need to rewrite the markup. The system will check the codes and, after not finding specific Twitter markup elements, turn to the Open Graph protocol. Also, codes for Open Graph and Twitter may be present at the same time, as shown in this example:

Developer Twitter

Another thing – when scanning, the Twitter crawler takes into account the specification of the robot.txt file, so, you need to make sure that all the necessary pages with markup are available for verification.

LinkedIn uses Open Graph protocol, but unlike Facebook, the maximum image size allowed for publication on this network is 5 MB (as opposed to 8 MB on Facebook). The aspect ratio is 1.91:1, the minimum resolution is 1200 X 627 pixels. Therefore, when choosing an image to post on different social networks, it is better not to go beyond 5 MB.

What is an Open Graph tester and how to check protocol operation in social networks

The Facebook Open Graph tester is a special tool called Sharing Debugger that allows you to see how the snippet will look with markup. For the Facebook Open Graph debugger crawler to start scanning, you need to enter the page URL in the window.

Also, by using Open Graph Debugger, you can identify errors and fix tags by clicking the Scrape Again button. To clear the cache, use the Batch Invalidato.

Sharing Debugger

The Twitter Open Graph debugger is called Twitter card validator and it shows how the preview will look:

Twitter Card Validator

The Linkedin open graph debugger called Linkedin Post Inspector has a similar effect.

Using Open Graph meta tags may seem like a painstaking task but a little practice will allow you to easily and quickly make layouts and create vivid and attractive previews for your pages on social networks.

These snippets in no way affect the ranking and do not directly affect SEO but they contribute to the image formation, positioning, and can attract new users and potential customers to your pages. Therefore, the number of useful and relevant tools for SEO and marketing communication can be attributed to Open Graph.

Author

Leila Bergman Leila Bergman

SeoQuake content manager

Leave a Reply

Your email address will not be published. Required fields are marked *