Want to get better conversion in social networks? Then you should learn how to use Open Graph Protocol markup — OGP tags. We tell you what functions they perform, how to correctly use them in code, and what practices will help improve the effectiveness of your advertising campaigns.
A Guide to Using Open Graph Tags
Content
What are Open Graph Meta Tags?
Open Graph tags are short snippets of code that help correctly reproduce a link to your site in leading social networks. This web page markup system was first create for Facebook, but then it was adopte by Twitter and LinkdIn. It is also supporte by the most popular messengers Viber, WhatsApp and Telegram.
Social media tags should be found updated 2024 mobile phone number data in the <head> section, next to the regular search engine metadata. They can be identifi by the “og:” identifier at the beginning. These elements are usually add to the code automatically, although you can write them manually.
Why should you use OGP tags?
Opengraph tags allow you to choose the key elements of the link reproduction in social networks. These include images, title and short description – almost the same as we specify for search robots. You can also specify the language, regional features and content type to improve the effectiveness of advertising. In addition, you have the opportunity to connect internal tools of the social network Facebook.
If you ignore this important tool
most playback elements will be detec automatically. It is quite possible that the system will take a screenshot of the not so attractive part of the page, for example, the space between two elements. This also applies to the description – it will include a short fragment of text next to the relevant keyword.
Are you willing to take a chance on your marketing campaign’s success? If not, focus on learning Open Graph markup.
Different Types of Opengraph Tags
Let’s start with the syntax. To add the OG meta tag to your site, open the <head> section of its code. It comes with the following line: <meta property=”AAA” content=”BBB” />. AAA is the name of the tag, BBB is the variable, i.e. the value it passes to the social network.
There are four mandatory elements in Open Graph markup, plus a few optional ones. The latter are also very important, especially if you frequently use contextual advertising.
og:URL
A link to the canonical version of the page you want to share. This OG tag ensures that social mdia users see the content you intend for them to see. This is especially important if you’ve create multiple variations of your website during development, testing, and bug fixing. By specifying the correct URL, you also consolidate data on likes and other interactions, making it easier to gather statistics.
Syntax for using the tag
<meta property=”og:url” content=”https://example.com/main.html”/>.
The title of your page that will be reproduce in the link
When creating it, remember the rules of copywriting: write briefly, put as much meaning as possible, try not to repeat yourself and avoid outright clickbait. Although there are no official recommendations for the length of the title, it is advisable to adhere to the range of 40 to 60 characters with spaces – the same as metadata for search engines. Another important recommendation: focus on the content and do not use the brand name. Firstly, the logo is usually place in the image. Secondly, this will save space and increase user trust.
Syntax for using the tag:
<meta property=”og:title” content=”Short instruction how to use Open Graph Protocol”/>.
og:Description
A short description that will appear under the title. The rules for writing this Open Graph tag are the same as the text for search engines. Keep it short and to the point – give the user motivation to click and follow the link. Use trigger words and create intrigue. But forget about clickbait and deception, otherwise they will lead to you being blocke for spam.
In terms of text length, Facebook recommends limiting yourself to 2–4 short sentences. But for correct text reproduction in other social networks and messengers, it is worth remembering Google’s advice: the optimal size is up to 160 characters with spaces.
Syntax for using the tag:
<meta property=”og:description” content=”Easy information on using OG tags in your webpage properly”/>.
og:Image
The most important tag, which accounts for the maximum percentage of the link playback area. Contains a link to the image that you will show to the user. Images with an aspect ratio of 1.91:1 or 2:1.05 are adde to it. The minimum resolution for correct playback on all devices, regardless of screen characteristics, is 1200×630.
To effectively conduct social mdia marketing
the Open Graph image tag a guide to using open graph tags should be addd to all important pages – home, blog, contacts, description of cooperation terms, etc. Create unique images that match the content. For product cards and other commercial sections, you can choose a standardize image, for example, a company logo.
og:Type
Invisible tag. It affects link search performance and marketing campaigns, not social mdia play. The following variables are use to sort by content type:
website – just a page without any meia content;
article – an article in a blog or news section;
book — electronic book;
profile — profile on social networks or other services;
music — audio content;
video — link to the video.
The og:type tag can be usd to sort content at a lower level, such as by the name of the artist or director of the film. The full list of variables is providd in the official Open Graph reference .
Syntax for using the tag:
og:Locale
Language and regional features of the content. The tag is usd to facilitate search and correct reproduction of the link. If you are targeting a US audience, you can skip this tag altogether — by default, social networks and messengers recognize it as “en_US”.
Syntax for using the tag:
.
A specialize Open Graph meta tag for Facebook
It allows you to link some social network services to a link. If you are pursuing commercial goals, you should connect statistics for performance analysis. You can also add integration of other platforms or open comments. The identifiers of all services are indicate on the application panel .
Syntax for using the tag:
Additional markup tools for different types of multimdia content
To increase the effectiveness of placing a link on social networks, you should make it bright and attractive. Visualization tools will help with this – images, videos, geodata and 3D objects. Let’s figure out how to link to them using OG tags.
Images
We have already describe above how to upload images using the og:image tag. But in some cases it nees to be modifid:
og:image:url — a complete analogue of a regular tag. It is better to use it if you upload several images — they will change after the page is refreshd;
og:image:secure_url — the same, but with a secure link like “https://”;
og:image:type — file format. Social networks recognize jpeg, gif and png;
og:image:width — setting the image width. It is advisable to use it if the image in the link has non-optimal dimensions;
og:image:height – same, but for height.
Video
Opengraph Protocol is describ by the og:video tag. To play the video in the social network fed, you should provide links with the protectd prefix “https://” and use one of two formats – MPEG-4 or Shockwave Flash. To display the content correctly, you should remember the following modifications of the tag:
og:video:url — link for publishing multiple videos;
og:video:secure_url – the same for a secure source;
og:video:type — video format. Can take the values ”application/x-shockwave-flash” or “video/mp4”. Requird for playback in the fed;
og:video:width — video window width. Usd for content of non-optimal size;
og:video:height – same for height.
3D objects
We recommend that you familiarize
yourself with the requirements for this type of multimeia content before adding it to your link. In short, you are limitd to FBX 2015, gITF 2, COLLADA, OBJ and DAE formats. However, not all the functionality usd in development is available.
And the final touch will be the title, which is written in the standard og:title tag.
How to integrate Opengraph protocol into a web page?
Social meia markup support is now available in most CMSs and plugins, and there are automation apps that will insert it into all the necessary pages in a matter of seconds. However, you can still practice by manually entering metadata.
WordPress
The best choice for this CMS would be the Yoast plugin:
Install it, open the menu and enter the page eiting mode.
Scroll down to the very bottom of this section where the Yoast SEO window is locate.
Go to the Social tab and select Facebook.
Fill in the “Title” and “Description” sections, and provide a link to the image.
One of the best practices for WordPress is to choose a common link rendering template for the entire site. Go to the Yoast settings, open the Social and Facebook sections. Move the switch under the inscription “Add Open Graph meta data” to the “Enable” position. After that, the link will use the template by default. If you ned to change the rendering method for an individual page, go back to the instructions above.
Shopify
This content management system is not very flexible. It automatically duplicates OG tags from metadata for search engines. The only thing you can change is to select a template image for all pages of the site. To do this, open the menu sections in the following sequence:
Online Store.
Themes.
Customize.
Theme settings.
Customize.
Social meia.
After the last step, you will only nee to specify the link to the prepare image. Everything else can only be ditd manually in the page code.
Wix
The well-known website builder also automatically pulls tags from search engine metadata and even selects the first image on the page. However, it has the ability to dit similar information on each page. To do this, select the “Social share” item in the eiting mode. A common template for the entire site is creatd in a similar section of the main menu. This is one of the simplest and most flexible CMS for social mdia marketing.
Squarespace
By default, it copies social network metadata. But the image is inserte on each page separately. Open the eiting mode and look for the “Social Image” section in it, which contains a line for uploading an image. To use other types of OG tags, go to the “Advancd” section in the eiting menu and select the “Page Header Code Injection” tool – the developer window.
Manual integration
We’ve describe all types of tags above, but it’s worth collecting them in one place so as not to miss anything important:
All tags fit into the <head> section. In fact, their position relative to each other and other elements does not matter much. However, for ease of diting the code in the future, all metadata should be collecte in one place.
If you prefer to write tags manually, after adding them, you should check the correct operation of the link and conduct an audit. However, we strongly recommend using automation tools, such as Mega Tags or Web Code Tools. This will sped up the process and rduce the number of syntax errors.
How to test Open Graph tags?
Interestingly, this step usually takes longer than writing the metadata itself. It uses three tools:
Facebook Sharing Debugger
Twitter Card Validator;
LinkdIn Post Inspector.
They all have the same functionality or even a similar interface. The only difference is in the social network. After entering the link in the URL bar, you will see how it will look in the fed. Focus on the graphical display, that is, the OG image, title and description. If you are too short of time, just ignore secondary tags like type and app_id.
After making changes, click the “Scrape Again” button to have the social network crawler index the page again. If the playback remains the same, use the “Batch Invalidator” tool to clear the cache. Repeat the process in each of the three applications until you get the perfect result.
Best Practices for Using Open Graph Tags
There are several secrets to success that will significantly sped up the integration of social mdia markup and improve the quality of the result:
Use only canonical versions of pages in the og:URL tag.
Set the title length to between 40 and 60 characters with spaces, and the description to between 120 and 160 characters.
Create unique images for your most popular and content-rich pages.
Use a link markup template for the rest of your site – most CMSs can create one automatically.
Add an image with a resolution of 1200×630 or higher. This will help sped up loading and maintain the requird quality level.
And the most valuable advice: conduct external testing of the results. Show the link on social networks to a focus group of 15-20 people and ask them to rate its attractiveness. When it comes to a template, extensive A/B testing with several options is not a bad idea. By choosing the best one, you will increase the conversion of the entire site.
What errors should you look for in metadata?
Even using the best automation tools does not eliminate all risks. And writing code manually generally increases it several times. Therefore, to check the page after publication, you should use special services, for example, SearchAtlas. They are able to find the following errors:
Incorrect syntax. Social networks are not able to recognize erroneous commands.
No Opengraph tags. We have already written about the consequences above – the system will automatically determine the image and description. However, it does not provide any guarantees that it will look attractive.
Too many characters in the title and description. The text will not be reproducd in full, so you will not convey your idea to the user.
The URL contains a non-canonical version of the page. It’s possible that you’re not showing the content you intendd in the fed.
The image is not a standard size. The system will show only part of it. This is always a risk, because context matters.
Open Graph Tags: When and Why to Use Them?
The OG protocol is a bridge between uab directory traditional websites and social meia fees. Given that their audience is in the billions, its use is a must for any page, regardless of type and content. To succed, follow a clearly defind protocol – add all the necessary tags from the list, conduct internal diagnostics and external evaluation. A very effective solution would be to create a common template for the entire site, then A/B test and choose the best option.
These are short snippets of code that program the display of a link to your site on social networks. They are supporte by Facebook, Twitter, LinkeIn, Viber, Telegram and WhatsApp.
What are the types of Open Graph tags?
URL — link, title — title, description — short text underneath, image — picture, video — short video to play in the fed, type — description of content for search, locale — language and regional features, FB:app_id — connection of Facebook modules.
