An Ultimate Guide on Open Graph (OGP) Tags
What Are Open Graph Meta Tags?
Open graph tags are short pieces of code that help correctly display links to your site on leading social networks. This web page markup system was created for Facebook. Later, Twitter and LinkedIn began to use it. It is supported by the most popular messengers like Viber, WhatsApp, and Telegram.
Social media tags are found in the <head> section alongside regular search engine metadata. They have the identifier “og:” at the beginning. Usually, such elements are added to the code automatically, although you can write them manually.
Why Use OGP Tags
Opengraph tags allow you to independently choose the main elements of link display on social media. These include an image, title, and short description — pretty much the same as what we specify for search engines. You can also choose language, regional features, and content type to improve the effectiveness of your ads. In addition, you may connect the internal tools of the Facebook social network.
If you ignore this considerable tool, most display elements will be determined automatically. It is quite possible that the system will take a screenshot of the least attractive part of the page, for example, the space between two elements. It also applies to the description. It contains a short piece of text next to a relevant keyword.
Are you willing to take the risk of trusting the success of your marketing campaign to random selection? If not, then 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 in its code. A line is added to it: <meta property=”AAA” content=”BBB” />. AAA is the tag’s name, BBB is a variable, that is, the value it conveys to the social network.
Open Graph markup has four required elements and several additional ones. The latter are also important, particularly if you often use contextual advertising.
og:URL
A link to the page canonical version you want to share. This OG tag ensures that social network users see the content you have prepared for them. It is important if you have created several versions of the website during the development, testing, and debugging process. By specifying the correct URL, you also consolidate data on likes and other interactions — it makes collecting statistics easier.
Syntax of using the tag:
<meta property=”og:url” content=”https://example.com/main.html” />
og:Title
It is the title of your page that will be displayed in the link. When creating it, remember the rules of copywriting: write briefly, make as much sense as possible, try not to repeat yourself, and avoid blatant clickbait. While there are no official guidelines for title length, it’s worth sticking to a range of 40 to 60 characters with spaces, just like metadata for search engines. Another important recommendation: focus on the content and do not use the brand name. First, the logo is usually placed in the image. Second, it will save space and increase user confidence.
Syntax of using the tag:
<meta property=”og:title” content=”Short instruction how to use Open Graph Protocol” />
og:Description
It is a short description that will appear under the title. The rules for writing the Open Graph tag are the same as in the text for search engines. Keep it short and to the point — motivate the user to click and follow the link. Use trigger words and create intrigue. But forget about clickbait and scam; otherwise, you risk being banned for spam.
Regarding text length, Facebook recommends limiting yourself to 2-4 short sentences. But for the correct display of the text on other social networks and in messengers, you should recall Google’s advice: the optimal size is up to 160 characters with spaces.
Syntax of using the tag:
<meta property=”og:description” content=”Learn how to use OG tags in your webpage properly” />
og:Image
It is the most important tag that takes up the maximum percentage of the link’s display area. It 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 added to it. The minimum resolution for correct display on all devices, regardless of screen characteristics, is 1200×630.
To effectively conduct marketing on social networks, you should add the Open Graph image tag to all important pages — the home page, blog, contacts, Terms & Conditions, etc. Create unique images that match the content. For product cards and other commercial sections, you can choose a standardized image, for example, a company logo.
Syntax of using the tag: <meta property=”og:image” content=”https://example.com/blog/wp-content/uploads/2022/11/image.jpg” />
og:Type
It is an invisible tag. It affects link search performance and marketing campaign effectiveness rather than display on social media. The following variables are used to sort by content type:
- website — just a page without multimedia content;
- article — an article on a blog or in the news section;
- book — electronic book;
- profile — a profile on social networks or other services;
- music — audio content;
- video — a link to a video.
The OG type tag is used to sort content at a lower level, for example, by the artist’s name or the film’s director. A complete list of variables is provided in the official Open Graph reference.
Syntax of using the tag:
<meta property=”og:type” content=”article” />
og:Locale
It is language and content’s regional features. The tag is used to facilitate the search and correct display of the link. You may not add this tag if you are targeting a US audience. Social networks and messengers will recognize it as “en_US” by default.
Syntax of using the tag:
<meta property=”og:locale” content=”en_GB” />
FB:app_id
It is a specialized meta tag Open Graph for Facebook. It allows you to link certain social network services to a link. You should connect statistics to analyze performance if you are pursuing a commercial goal. You can also add integration of other platforms or open comments. The identifiers of all services are indicated in the application panel.
Syntax of using the tag:
<meta property=”fb:app_id” content=”1234567890″ />
Additional Markup for Different Media Content Types
To increase the effectiveness of placing a link on social networks, it is worth making it bright and attractive. To do this, use visualization tools — images, videos, geodata, and 3D objects. Let’s see how to link to them using OG tags.
Images
We have already explained how to upload images using the og:image tag. But in some cases, it must be modified:
- og:image:url is a complete analog of a regular tag. It is better to use it when uploading several images. They will change after refreshing the page.
- og:image:secure_url — the same, but with a secure link of the https:// type.
- og:image:type — file format. Social networks recognize jpeg, gif, and png.
- og:image:width — forced setting of the image width. It is advisable to use this tag if the picture on the link has suboptimal dimensions.
- og:image:height — same but for height.
Video
The Opengraph Protocol is described by the og:video tag. For the video to be played in the feed of a social network, you should give a link with a secure prefix https:// and use one of two formats — MPEG-4 or Shockwave Flash. For the correct content display, you should remember the following modifications of the tag:
- og:video:url — a link for publishing several videos.
- og:video:secure_url — the same for a secure source.
- og:video:type — video format. It can take application/x-shockwave-flash or video/mp4 values. Must be specified for display in the feed.
- og:video:width — width of the video window. Used for the content of suboptimal size.
- og:video:height — Same for height.
3D Assets
We recommend you review the requirements for this type of multimedia content before adding it to your link. In short, you are limited to FBX 2015, gITF 2, COLLADA, OBJ, and DAE formats. At the same time, only part of the functionality used during development is available to you.
To insert a 3D object, use the syntax:
<meta property=”og:type” content=”three.asset” />
Indicate the link in the tag:
<meta property=”og:asset” content=” https://example.com/assets/standard.obj” />
And the final touch will be the title. Write it in the standard og:title tag.
How to Integrate OpenGraph Protocol into a Web Page
Support for markup for social networks has already appeared in most CMSs and their plugins. In addition, there are automation applications that quickly insert it on all the necessary pages. However, you can still practice by writing in the metadata manually.
WordPress
The best choice for this CMS would be the Yoast plugin:
- Install it, open the menu, and enter the page editing mode.
- Scroll down to the bottom of this section, and find the “Yoast SEO” window.
- Open the “Social” tab and select “Facebook.”
- Fill in the “Title” and “Description” sections and add a link to the image.
One good practice for WordPress is to choose a common link display template for the entire site. Enter the Yoast settings and open the Social and Facebook sections. Turn the switch under the inscription “Add Open Graph meta data” to the “Enabled” position. After that, the link will use the template by default. If you need to change the display method for an individual page, return to the instructions above.
Shopify
This content management system is not very flexible. It automatically duplicates OG tags from meta for search engines. The only thing you can change is to choose a template image for all site pages. To do this, open the menu sections in the following sequence:
- Online Store.
- Themes.
- Customize.
- Theme settings.
- Customize.
- Social media.
After the last step, all you have to do is specify the link to the prepared picture. Everything else is edited only manually in the page code.
Wix
The famous site builder also automatically researches tags from meta search crawlers and selects the first image on the page. However, it can edit similar information on each page. Select the “Social share” item in editing mode. The general template for the entire site is created in the same section of the main menu. It is one of the easiest and most flexible CMSs for social media marketing.
Squarespace
It copies social network metadata by default. But the image is inserted on each page separately. Open the editing mode and look for the “Social Image” section, which contains a line for image uploading. To use other types of OG, go to the “Advanced” section in the editing menu and select the “Page Header Code Injection” tool — the developer window.
Manual Integration
We described all types of tags, but it is worth collecting them in one place so as not to miss anything important:
- <meta property=”og:url” content=”https://example.com/main.html” />
- <meta property=”og:title” content=”Short instruction how to use Open Graph Protocol” />
- <meta property=”og:description” content=”Learn how to use OG tags in your webpage properly” />
- <meta property=”og:image” content=”https://example.com/blog/wp-content/uploads/2022/11/image.jpg” />
- <meta property=”og:video” content=”https://example.com/blog/wp-content/uploads/2022/11/video.mp4″ />
- <meta property=”og:video:type” content=”video/mp4″ />
- <meta property=”og:type” content=”three.asset” />
- <meta property=”og:asset” content=” https://example.com/assets/standard.obj” />
- <meta property=”og:type” content=”article” />
- <meta property=”og:locale” content=”en_GB” />
- <meta property=”fb:app_id” content=”1234567890″ />
All tags are added to the <head> section. Their location relative to each other and other elements does not matter much. But all metadata should be collected in one place for easy code editing in the future.
If you prefer to write tags manually, you should check the correct operation of the link and conduct an audit after adding them. However, we strongly recommend using automation tools such as Mega Tags or Web Code Tools. It will speed up the process and reduce the number of syntax errors.
How to Test Open Graph Tags?
Interestingly, this step usually takes more time than writing the metadata itself. It uses three tools:
- Facebook Sharing Debugger
- Twitter Card Validator
- LinkedIn Post Inspector
All of them have the same functionality and even a similar interface. The difference is only in the social network. After entering the link in the URL bar, you will see how it will look in the feed. Focus on the graphic display — og image, title, and description. Ignore secondary tags like type and app_id if you’re short on time.
Click the “Scrape Again” button to have the social network crawler index the page after making changes. If playback remains the same, use the Batch Invalidator tool to clear the cache. Repeat the process in the three applications until you get the perfect result.
Open Graph Tags Best Practices
Several secrets to success will significantly speed up the integration of social media markup and increase the quality of the result:
- Use only canonical versions of pages in the og:URL tag.
- Set the title length to 40-60 characters with spaces and the description to 120 to 160 characters.
- Create unique images for the most popular and meaningful pages.
- Use a link markup template for the rest of the site. It can be generated automatically by most CMSs.
- Add images with a resolution of 1200×630. It will help speed up downloads and maintain the required level of quality.
And the most valuable tip: conduct external testing of the results. Show a social media link to a focus group of 15-20 people and ask them to rate its appeal. Advanced A/B testing with several options will also be useful. By choosing the best of them, you will improve the conversion of the entire site.
Common Mistakes to Be Prepared for
Using the best automation tools does not eliminate all risks, and writing code manually increases them several times. You should use special services, such as SearchAtlas, and check the page after publication. The services can find the following errors:
- Incorrect syntax. Social networks are not able to recognize wrong commands.
- Lack of opengraph tags. We have already written about the consequences — the system automatically determines the picture and description. At the same time, it gives no guarantees that it will look attractive.
- Too many characters in the title and description. You will not convey your opinion to the user in case of partial absence of the text.
- A non-canonical version of the page is specified in the URL. You may be showing the wrong content in the feed that you planned.
- The image has a non-standard size. The system will only show its part. It’s always a risk because context matters.
Open Graph Tags: When and Why to Use Them
OG protocol is a bridge that connects traditional websites with social media feeds. Their audience consists of billions of users, and using the protocol is a must for pages of any type and content. To be successful, follow a well-defined protocol — add all the necessary tags from the list and perform internal diagnostics and external evaluation. A useful solution would be to create a general template for the entire site with subsequent A/B testing and choosing the best option.
FAQ
What are Open Graph meta tags?
They are short code snippets that program the display of a link to your website on social media. They are currently supported on Facebook, Twitter, LinkedIn, Viber, Telegram, and WhatsApp.
What types of Open Graph tags are there?
URL — link, title — title, description — short text below it, image — picture, video — short clip for feed, type — description of the content for search, locale — language and regional features, FB:app_id — connection of Facebook modules.
How to integrate Opengraph tags into a web page?
You can manually add the appropriate code to the <head> section or use the automation tools available in the most popular CMSs, including WordPress, Wix, Squarespace, and Shopify.
More Like This
ChatGPT for SEO: 50 Effective Ways to Use It
