Insights
What are Open Graph metatags and how to use them in web pages
About 80% of the population uses a social media network on a daily basis, so promoting your website on them is a great idea for your business. But it’s not just about what you share on them, it’s about how you do it! You can control all the posts on your social media profile, but did you know that you can also control (somewhat) the posts of others when they share content from your site on their profiles? This is achieved through Open Graph (OG) metatags.
But what are OG tags? When you share a URL through a social network (also through some messaging services) you have surely noticed that this link is automatically converted into a kind of card. This is called an OG object. Take a look at these examples below from LinkedIn, Twitter, Facebook, WhatsApp and Slack:
The Open Graph protocol was created by Facebook in 2010 in order to control the way links were shared on its platform and is currently used as a standard for most social networks (except Twitter). This protocol consists of including in the code of web pages a group of metatags where social networks obtain all the information displayed in the OG object, such as the title, image or description.
Why is it advisable to use OG tags?
If your web pages don’t have OG tags, the social network or messaging platform where users share your site’s content will extract the information they need to build its OG objects elsewhere, each following its own criteria. As a result, the final appearance may not represent you properly. This is very important, because if your audience finds your OG object attractive, more users will click on the posts, which will bring more and more traffic to your website. It’s worth putting some effort into this, as you can see.
Which OG tags should be included in a web page?
The OG metatags that every website should include are og:title, og:description, og:image, og:url, og:locale, og:type y og:site_name. Let’s analyze each of them…
og:title
The title summarizes in a few words the content of a web page. Besides, the main function of any title is to arouse the reader’s interest: it can be curiosity, emotion, desire, need… whatever. It’s all about connecting with the audience, but this is not easy because it requires a deep knowledge of your audience.
All social networks include without any exception a title in their OG objects and all of them do so using the og:title metatag. If a good title should always be as concise as possible, in this case this point is very important because the number of characters is very limited. For example Facebook limits the titles of its OG objects to 100 characters, while Twitter reduces them to 70, a figure that seems very high compared to WhatsApp: the messaging platform only displays 40 characters in its OG titles. All of them, however, trim the title and add an ellipsis when the metatag content reaches the limit set by each of them. On the other hand, other platforms such as LinkedIn or Slack don’t limit their titles, but we recommend as a rule of thumb that they never exceed 70 characters.
As you can see, the og:title meta tag is quite similar in both length and function to the title tag that every web page must include, but the content of both tags does not necessarily have to be the same.
og:title has its equivalent for Twitter: twitter:title. Don’t forget to always include it as well.
og:description
The og:description meta tag is the perfect partner of og:title. Its task is to complement the work of the title. Therefore, the content of both meta tags should be planned together. What one doesn’t do, the other has to do. They never repeat what the other has already said. They share the same objective and always go hand in hand.
However, not all social networks include a description on their cards: Facebook and LinkedIn, for example, do not. Others such as Slack, Twitter or WhatsApp do, although in a very different way: while Slack does not limit its descriptions, Twitter reduces them to the first 200 characters and WhatsApp to the first 90. It is always advisable to keep it between 130 and 160 characters, a similar measure to the one recommended for the description tag, although the content of both does not have to be exactly the same. Remember that you must also include a specific description for Twitter using the twitter:description tag.
One last tip: never include the same og:description on all your pages.
og:image
It is often said that a picture is worth a thousand words, but in the case of OG objects this statement is much more true. Not only because the image is the main protagonist of OG objects, but also because the way we consume content on social networks rewards the visually striking. Only if something catches our attention powerfully at first glance do we stop to read it. So when it comes to choosing the OG image you should put all your eggs in the basket.
A good OG image must be original and eye-catching, but at the same time it must represent the visual identity of your brand so your audience immediately associates it with you. And of course it must represent the content that users will find when they click on the link.
The tag that defines the images of your object is og:image. You can only use one image for each OG object, so the image you use will be the same for LinkedIn, Facebook, WhatsApp, Slack… For Twitter you can use your own image using the twitter:image metatag (it is not mandatory because in case of not using this tag Twitter uses og:image). The recommended format for Twitter is 2:1 (generally 600px wide by 300px high for small objects and 1080 x 566 for large objects) or 1:1 (450 x 450 for small objects and 1080 x 1080 for large objects). For the rest of social networks, in our opinion landscape formats work better on computers and laptops, while square images are better suited to mobile devices, so choosing one or the other depends on each case. If you choose a landscape image it is best to use an aspect ratio of 1.9:1 (1200px wide by 627px high), while if you opt for the square format we recommend 1200 x 1200.
Some brands always include their logos on OG images.
Finally you can add the og:image:alt tag to include a description of your OG image. And if you have a short video it is advisable to include it in your object with the og:video tag as well.
og:url
The URL is important because it identifies the authorship. All OG objects display the URL of the link they point to, although most of them do not display the full path (only the domain). However, the canonical URL of the web page must always be added to the og:url tag. Again, Twitter also has its own meta tag for this: twitter:url.
og:site_name
As we have seen before, OG tags must be applied specifically to each page. So, to indicate that the page we are sharing belongs to a website there is the og:site_name tag. Twitter has a similar tag called twitter:domain, but both have a big difference: the content of the generic tag is the name of the website, but the Twitter tag uses as value the URL of the home page.
og:locale
The og:locale tag is used to indicate the language in which the shared page is written. If no og:locale tag is specified, the language of the page is normally interpreted to be US English (en_US). (‘en_US’), so if this is not the case you should add your OG meta tag, for example <meta property="og: locale" content="es_ES" /> for pages from Spain, <meta property="og:locale" content="fr_FR" /> for pages from France or <meta property="og:locale" content="fr_CA" /> for pages from Canada that use French as their primary language.
og:type
og:type indicates what type of content is being shared on the social network or messaging platform. Unlike all the OG tags we have already seen, its value is not open: you must necessarily use one of those preset by the Open Graph protocol itself. There are many types of content, although the most commonly used are basically two: website (for any web page) and article (specifically designed for blog posts or news of a digital media).
The og:type tag is important because it conditions some of the other OG tags. If our content is an article, it would be interesting to add also information about who writes it (article:author), who publishes it (article:publisher), the date of publication (article:published_time), the date of update or modification (article:modified_time), the expiration date -if necessary- (article:expiration_time) or the section of the media (article:section). For example:
<meta property='og:type' content='article' />
<meta property='article:author' content='John Doe' />
<meta property='article:publisher' content='World News' />
<meta property='article:section' content='Economy' />
<meta property='article:published_time' content='2021-09-01T12:00:00+02:00' />
<meta property='article:modified_time' content='2021-09-04T17:45:11+02:00' />
<meta property='article:expiration_time' content='2021-09-30T23:59:59+02:00' />
The Twitter equivalent of og:type is twitter:card. The values to choose in this case are four: summary (the generic one, used for blog posts or news as well as for product pages of an online store), summary_large_image (the same as the previous ones but with a larger image), player (to share multimedia content, both audio and video) or app (to promote downloads of an application directly from the App Store or Google Play). In addition, in the case of Twitter, two more tags are usually added: twitter:site (to indicate the Twitter account of the media) and twitter:creator (to indicate the Twitter account of the author).
How to include OG tags in the web pages of your site?
OG meta tags always go in the head of web pages. Here’s an example that brings together all the meta tags we’ve talked about:
<head>
<meta property="og:title" content="Eddie Redmayne says it was a mistake to play trans role in The Danish Girl">
<meta property="og:description" content="The British star, who was nominated for an Oscar for his role as Lile Elbe, feels a trans actor should have been cast in the role.">
<meta property="og:image" content="eddie-redmayne.jpg">
<meta property="og:image:alt" content="Eddie Redmayne">
<meta property="og:video" content="eddie-redmayne.mp4">
<meta property="og:url" content="https://www.world-news.com/entertainment-arts/eddie-redmayne-says-it-was-a-mistake-to-play-trans-role-in-the-danish-girl">
<meta property="og:site_name" content="World News">
<meta property="og:locale" content="en_GB">
<meta property="og:type" content="article">
<meta property='article:author' content='John Doe' />
<meta property='article:publisher' content='World News' />
<meta property="article:section" content="Entertainment & Arts">
<meta property='article:published_time' content='2021-09-01T12:00:00+02:00' />
<meta property='article:modified_time' content='2021-09-04T17:45:11+02:00' />
<meta property='article:expiration_time' content='2021-09-30T23:59:59+02:00' />
<!-- TWITTER -->
<meta name="twitter:title" content="Eddie Redmayne says it was a mistake to play trans role in The Danish Girl">
<meta name="twitter:description" content="The British star, who was nominated for an Oscar for his role as Lile Elbe, feels a trans actor should have been cast in the role.">
<meta name="twitter:image:src" content="eddie-redmayne_twitter.jpg">
<meta name="twitter:image:alt" content="Eddie Redmayne">
<meta property="twitter:url" content="https://www.world-news.com/entertainment-arts/eddie-redmayne-says-it-was-a-mistake-to-play-trans-role-in-the-danish-girl">
<meta name="twitter:domain" content="www.bbc.com">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@WorldNews">
<meta name="twitter:creator" content="@johnDoe">
</head>
You can copy the above code into your pages and replace the content attribute values with your own. Or you can use online tools that generate all these OG meta tags for you, such as Web Code Tools. But if you are not a coding expert but rather a CMS guy, there are also plugins for WordPress that add these meta tags, such as Open Graph Protocol Framework. In addition most SEO plugins also include a functionality to configure OG tags, such as Yoast’s SEO, one of the most used.
Tools for testing OG tags
Once you have added all the necessary OG tags to your pages, it is important to check that they will be displayed as expected when other users share your pages on their social media. There are many online tools that will be very useful for this: Post Inspector de LinkedIn, Facebook Debugger, Twitter Card Validator…
Social media users are more likely to click on content if they find it atractive. Working on your OG tags will not only increase traffic to your website: this will also increase your brand visibility and improve your SEO.
Did you find this post interesting? Share it!
Your contacts will like to read it, for sure!
