Social media is an important channel that can attract a lot of traffic to your website. Therefore, it is worth taking care of, among other things, how the content and links you share are presented on social media. These are controlled by the open graph protocol. Find out more about it in this article and stay one step ahead of the competition.
What is open graph and what is its history? Highlights
It has probably happened to you more than once to see a social media post in which a link to a page where open graph has not been implemented. Well, such posts don't look good.... They definitely don't encourage people to click the link because the preview displays a random part of the page. Everything can be changed by a few lines of code. Introducing open graph to you!
The open graph meta tags are an internet protocol that was originally developed and introduced by Facebook in 2010 to standardise the use of metadata on a website to represent the content of the page (Facebook Open Graph). Facebook was soon followed by other social media.
In the simplest terms, using open graph, you can tell social networks such as Facebook, Twitter, Pinterest, LinkedIn and Google+, what information is to be displayed when you or anyone else shares a link from your site.
You already know what open graph does. Now it's time to look at the technical side of it. From this point of view, it is simply a piece of code, located in the section of a given web page. It is preceded by the "og:" property.
Unlike other meta tags, "og:" is not placed for search engine robots. The purpose of the tag is to tell the social network what to display when you add a link to the social network. Just as search engines visit your site and look for the data they need to display your site in search results, social networks do the same by looking for their own tags.
Basic (mandatory) open graph tags
You already know what open graph tags are, it's time to learn about the types available! Of all of them, only four are required for a social network to "understand" your page, but there are a few additional ones that are sometimes helpful. Let's take a look at the most important ones.
og:title
Like the title metatag, in which you inform search engines of the title of the SEO of your page, og:title is its title, which should display on social media.
Your og:title should be clear, with no branding or mention of the domain itself. Ideally, its length should not exceed 60 characters.
Example of use:
<meta property="og:title" content="Why implement open graph on the website" /> />.
og:url
This tag indicates which page the user will be referred to when they click on the post in question. Use the canonical address URL, this will help count all the shares, likes etc.
Example of use:
<meta property="og:url" content="website URL" />
og:image
This tag is responsible for what image will be associated with the published content. Note that this is probably the most relevant open graph tag, as it takes up the most space in the social channel. Be sure to take care of it, otherwise the portal will select a random image from the URL itself, and it could be a banner ad or some other incomprehensible, irrelevant graphic for social media browsers.
Example of use:
.
og:type
This tag identifies the type of object being shared (e.g. article, website, video). You will find a full list of object types HERE.
Example of use:
.
og:description
This is a tag similar to the meta description, which is the description you create for search engines. You can create original text or use the one you use in the meta description to make it display on social media. Facebook recommends that the description is 2-4 sentences long, but it's better to write shorter descriptions to avoid being clipped.
Example of use:
.
Details of all types of open graph tags can be found, for example, in the Facebook's official documentation.
Why use open graph tags? What will their implementation give you?
Although the use of open graph tags is not considered a ranking factor and does not directly improve a page's search engine position, it is worth using them. Why? Because appropriately optimised social media posts will certainly be more likely to be clicked on by users. This in turn will translate into more traffic to your website. Remember, too, that social media engagement linked to your activities is a good signal to Google.
How are Open Graph tags added?
These are located in the section of the website and can be entered manually. However, if your site is based on one of the popular content management systems, there is a simpler way. Quite a few plug-ins have been created that make this process much easier.
Here they are:
Magento 2 - Social Meta Tags
Joomla - JFB Connect
PrestaShop - Prestashop Facebook Open Graph Tags
What does it look like to set up Open Graph on WP via Yoast?
- Install the plugin (I have linked above where you can download it from. You can also do it directly from the cockpit of the site by going to the "plugins" section)
- Edit the entry in question
- At the bottom, in the Yoast section, select the social media tab
- Create an appropriate title, description and image for each entry
Want to check that the link you share on Facebook will look decent? Use Sharing Debugger! Paste the link and you get all the information that Facebook has managed to extract from the source code.
Social media is a very important channel that can get you a lot of traffic to your website. Remember, too, that if your content looks attractive on social media, chances are more people will like it or pass it on.
English 
Polish 
German