Open Graph Meta Tags: Ultimate Guide

Social media plays a crucial role in today's digital marketing climate. There are some excellent platforms for online businesses to promote their brands, products, and services to a wider market. However, some platforms, including Facebook, sometimes fail to draw the relevant content from your shared links. Also, it is common for social media posts to appear inconsistent and sometimes bizarre. Unfortunately, this doesn't look appealing and often discourages your audience from clicking the posts. 

This is why you have to make your posts stand out, and whether you are sharing your website pages or products and services on social media – this is where open graph meta tags are useful. Below is everything you should know about open graph meta tags.

What are open graph meta tags?

Open Graph meta tags are code snippets that regulate how URLs appear when shared on social networking. They are a component of the Open Graph protocol Facebook has and are widely utilized by other social media platforms such as LinkedIn and Twitter. They may be found in the <head> section of a webpage—any tag that begins with og: before a property name is an Open Graph tag.

Why are open graph meta tags relevant?

The Open Graph improves the user experience by optimizing the content you share. It increases the content visibility, makes it more appealing, and urges users to click. Open graph objects can offer the following:

  • Drive website traffic
  • Enhance your page rankings in searches 
  • Boost your brand reputation 
  • Increase engagement and conversions 
  • Grow your social media shares and following 

OG tags notify social media networks what content to display when somebody shares your product or website page. However, publishing a link on social media platforms like Facebook is unprofessional if the headline is not correct or the image is absent. You can also use open graph tags for location or group targeting. For instance, you can decide which image or information is displayed to users in certain locations. 

Types of open graph tags 

Open Graph tags allow you to modify how material appears when distributed on Slack, LinkedIn, Facebook, Twitter, and WhatsApp. HTML represents them by the "og:" meta attribute. Although there are several open graph tags, the basic tags include the following.

og: type

The object type meta tag defines the kind of content. You may utilize objects such as websites, articles, music, video, and others. The object type you use affects how the content appears.

og: URL

The URL meta element specifies the page's URL. It is the permanent content ID. The link posted on social media networks will be broken if the URL is changed. For the best practices, ensure to use the canonical URL and keep your URLs clean and short. A canonical URL aggregates metrics and metadata from all posts with the same URL.

og: Description

The description meta element defines your content succinctly. For instance, it describes your page in a word or two. It is advisable to make your description appealing and not more than 200 characters to entice clicks. This length is ideal for avoiding truncation.

og: image

The image meta element specifies the picture to be shown. This is the most important Open Graph tag. It makes your content more visible to attract clicks and engagement. However, it is best to pay attention to the image resolution, file size, and other recommended considerations. For instance, the ideal picture size for posting on social media is 1200 x 628 pixels. The supported image formats are JPEG, GIF, and PNG. Also, be certain that the image file size does not exceed 5MB.

og: site name

The meta tag site name specifies the name of your site. It appears beneath the page title. The site name may not be essential, but it indicates that your content is a part of a bigger website or subdomain.

og: video

The video meta tag contains the video URL in your content. This property, for example, will display a YouTube video on social media platforms. The best practice is to use extra tags such as "og:video:width" and "og:video:height" to improve the appearance of your videos.

og: locale

The locale meta tag specifies the language of the content. The language is en-US by default and displayed as <meta property="og:locale" content="en_US" /> in HTML. Use this tag if your website is multilingual.

Best way to implement open graph tags 

So how do you put OGP tags into action? Open graph tags belong in your HTML page's <head> section. You will need assistance from a web developer if you cannot manage the code. Fortunately, platforms such as WordPress offer several plugins you can use to implement the code on your website. You have to select one and install it. Likewise, you can utilize other free tools such as the Open Graph Protocol Framework and Open Graph and Twitter Card Tags.

Setting up an open graph for Facebook and LinkedIn 

Add the open graph markup code to your website HTML if you create an open graph for Facebook and LinkedIn. You may provide the article title and description and the image that will appear on Facebook and LinkedIn feeds. After configuring the Open Graph attributes and publishing the website, you can test its operation in the Facebook Debugger and LinkedIn Inspector. 

Setting up your Twitter Cards

Like Facebook, Twitter has an OGP tag validation tool, Twitter Card Validator, which allows you to test and preview how your tweets will display when shared on other sites. Enter the website URL where you wish to share your tweet and click "validate" to utilize the validator. The validator will display your tweet's title, description, and image and a preview of how it will appear on the website.

Testing and debugging open graph meta tags    

After deploying all the tags, double-check to confirm whether they are properly working and ready for sharing. Below are a few tools to test and debug open graph tags.

  • Facebook sharing debugger 
  • LinkedIn Post Inspector 
  • Twitter Card Validator 

All these tools function similarly by pulling page tags and showing how they will appear when shared. Testing is also useful for preventing instances where the og tags are not correctly pulled or displayed. Use the og:image:width and og:image:height tags to ensure a flawless snippet when somebody shares your content for the first time. Platforms like Yoast automatically add them to WordPress. 

The abandoned meta keywords 

Meta Keywords played an important role during the wild years of the internet in the 1990s and early 2000s. Webmasters used the technique to tell search engines what queries pages should rank. However, the technique was overused until it lost its relevance. At this point, search engines such as Google and Bing have ceased giving meta keywords any value. Currently, Yandex appears to be the only viable search engine giving some credit to meta keywords. 

Despite this, meta keywords can serve one purpose even today. They are useful for assisting in fueling website internal searches. They are a significant tool for narrowing internal searches, particularly for eCommerce businesses. 

Other fascinating meta tags

Aside from the key meta tags like meta title, meta description, and meta robots, many tiny meta tags let you indicate to search engines and browsers how they should act on your website.  

Charset meta tag

The charset element provides the HTML document's character encoding. The HTML5 standard urges web developers to utilize the UTF-8 character set, which contains nearly all of the world's characters and symbols!

Viewport meta tag

The viewport meta element instructs the browser that the screen's width should be regarded as the page's "Full Width." That is, regardless of the width of your device, whether desktop or mobile. The webpage will adapt to the width of the user's device. With the growing importance of mobile devices, webmasters should constantly ensure that their website is optimized for desktop and mobile usage.

Other tags are frequently confused with meta tags

Aside from the above tags, numerous other components are frequently misinterpreted for meta tags. Unfortunately, this misinformation is present in some well-known industry publications. The following may be referred to as meta tags, but they are all link relation properties in HTML. 

  • Pagination attributes
  • Mobile attribute
  • Canonical URL
  • Hreflang attribute

How to audit open graph meta tags 

Do you have a website with hundreds of pages and are unsure which ones contain open graph tags? You can use tools like OpenTag, Ahrefs' Site Audit, Meta Tags, SEMrush, and others to verify your pages in bulk. Execute a crawl and then navigate the social tags report to discover any issues relating to Open Graph and Twitter Card tags.

Developers can update and optimize the metatags with a few clicks without using any tools. Editing the file with assistance is easier and faster. Manually, users may locate the desired digital content, inspect its attributes, and click Details to go further into the metatags. It is easy to update and replace the sample code to improve the quality,

Final thoughts 

Open graph tags are key to your online success. While some tags determine your content displays on social media, others enable you to dictate the behavior of your website crawlers and browsers. Properly setting up your open graph meta tags can boost your search rankings and click-through rates (CTR).

If you need help with writing your next blog post, check out the guide I wrote on how to write a blog post outline.

Derek Saunders

Derek Saunders is a freelance content marketer and runs a marketing and software review blog. He aims to help freelancers, bloggers, and business owners grow in a better way online.

home iconsearch iconcontact icon