Open Graph Protocol: Convert Your WebPages Into Social Media Snippets!

Imagine what would happen if the webpage you shared on social media appeared like a featured snippet. The visibility, impressions, engagement, and conversions; everything will start skyrocketing!

That’s the power of open graph protocol! 

They can easily convert your webpage into social media snippets and boost your marketing campaign like never before! So hop on, as we are going to discuss them today!

What is Open Graph?

OG tags control how your web page URL will look on the screens when shared on social media platforms. Simply put, open graph protocol transforms your web pages into social media snippets, thus enhancing their visibility on social media platforms.

The open graph protocol was initially designed by Facebook to provide better visibility for well-designed content. Later on, brands started using the OG image and other tags to improve visibility and engagement, which further made them important. 

What Are The Types Of Open Graph Tags?

There are a total of 17 open graph tags, but not all of them are important. That’s why we have divided them into two groups, covering both major and minor tags.

Essential OG Tags

Essential OG types, like the name suggests, are the ones that are of utmost importance, and you must install them in your structure code.

Og: title

The og: title tag is used to describe the title of your page. 

It is the most important open graph meta tag as it presents the headline, the first thing the user notices. The syntax for using this open graph tag is as follows

<meta property=”og: title” content=” Insert Your Title Here”>

In the above example, the OG title will be “How To Disavow Backlinks: Easy 3-Step Process.” It is extremely important that you keep the SEO title tag as clean and crisp as possible.

Our on-page SEO analysis tool can help you here by determining whether your title tag is accurate and of relevant length or not. Ideally, the title length should be within 60 characters to avoid truncation on both mobile and desktop screens.

You can also compare your meta title length with your competitors and understand whether you fall within the stipulated range.

Based on the comparison and suggestions, you can change your title and re-check. 

Og: type

The og: type open graph meta tag states the type of content you are posting. 

It helps social media platforms understand what you are posting, making it easier for them to rank it. Here’s the syntax for the og:type tag

<meta property=”go: type” content=” Insert the type here” />

Remember that only a few values are accepted for the go: type tag, which you can see below

1. Website, 
2. Book, 
3. Video. movie, 
4. Music. song, and 
5. Article

In case you are promoting one of your landing pages, make sure to insert “website” in the og: type syntax.

Og:URL

The og:url tag is for you to insert the canonical or original URL of the webpage that you are sharing on social media. This particular open graph tag helps social media platforms identify the original content without any hassle.

Here’s the OG tag syntax:

<meta property=”og:url” content=”Insert your canonical URL here”>

You should always paste the canonical URLs of the web pages to avoid a penalty from Google. If you are unsure as to whether your website has canonicalized pages or not, use our Site Auditor to check for the same. 

1. Enter your domain name and URL, and let the tool conduct an audit.
2. Go to the “Non-indexable Pages” section and click on the number beside “Canonicalized Pages.”
3. A new dashboard will appear, displaying all canonicalized pages present on your domain.

Now that you have the list, you can easily identify the canonicalized pages and prevent those URL addresses while implementing the og:url tags.

Og: image

The OG image tag is used to insert the open graph image URL for the social media snippet. Since the open graph image will take up maximum space, the OG image tag is of utmost importance.

Here’s the syntax for the OG image tag:

<meta property=”og:image” content=”Insert image URL here”>

Before you insert the image URL in the OG image tag, there are some pointers that you must remember:

1. Ensure that the open graph image size falls within the 1200 x 630 size aspect
2. Ensure that the OG image is of good quality and has high-resolution
3. The open graph image must be in JPEG or PNG format for easy uploading
4. Make sure that the OG image is related to the content

Optional Open Graph Meta Tags

Optional tags, as the name suggests, are not as important as the essential ones and can be used to polish the snippet structure.

Og:description

The og:description open graph meta tag is used to insert the summary of your content.  Simply put, you need to paste the web page’s meta description tags over here.

The syntax for og:description is:

<meta property=”og:description” content=”Insert your description here”>

Just like meta description, the recommended character limit for the og:description tag is under 200 characters. If you are unsure whether your meta description is accurate and of approximate length or not, you can take the help of our SEO IQ. The tool provides accurate details on whether your meta description fits within the character limit and if it needs any changes.

Besides, our SEO IQ also analyzes the meta descriptions of your top ten competitors and presents your web page’s position amongst them.

Og:site_name

The og:site_name tag is used to state the name of your website. Here’s the syntax for the same:

<meta property=”og:site_name” content=”Insert your brand name here”>

Og:locale

The og:locale tag is used to specify the language that you are using in your webpage content. It helps the social media platforms figure out the target audience that will benefit from the post.

Here’s the syntax for the og:locale tag:

<meta property=”og:locale” content=”Insert language and country in correct format”>

Always make sure to enter the language in the proper language_country format for a better understanding of the social media crawlers.

How To Use Open Graph Meta Tags?

Now that you know the various types of tags, let’s see how you can use them in various content management systems. We are going to focus on three major CMS: WordPress, Shopify, and Wix.

We’ll also discuss how to implement OG image and other tags manually on your web page.

WordPress

To implement OG image, OG title and other open graph protocol tags on WordPress, you first need to install the Yoast SEO plugin.

Head on to the Yoast SEO section on the left-hand sidebar and select “Settings.”

The features dashboard will appear on your screen, after which you have to select the “Open Graph Data” from the “Social Sharing” section.

The Yoast SEO plugin will automatically add the essential open graph image and other tags for all web pages.

Fill out the details for individual web pages, and it’s done.

Shopify

Shopify is the next big CMS platform website owners use for their business. If you are one of them, you must know that the CMS platform automatically selects your original title and URL as OG title and URL from the web page.

 In case you want to edit or view them, this is the pathway that you need to follow:

Online Store > Themes > Actions > Edit code > Snippets > social-meta-tags.liquid 

However, in the case of Shopify, you need to optimize the OG image tag. Just follow this route for the same:

Select the Online Store > Themes > Customize > Theme Settings > Customize > Social Media > Select an image.

Make sure to insert a high-resolution image in the open graph image tag for better visibility.

Wix 

Similar to Shopify, Wix also takes up the open graph image and other tags from your web pages. However, you can still customize the essential OG data tags like OG title, open graph image tag, and open graph description easily.

For that, you first need to follow this pathway:

“Marketing & SEO” > “SEO” > “SEO Settings.”

After that, select the page type for which you want to edit the open graph image, and other open graph protocol tags. Once you have selected the page type, select the “Basics & Social Share” option and then “Edit.”

The next dashboard will present you with the OG title, OG description, and OG image tags that you can customize as per your requirements. Once you are done with all the editing, make sure to “Save” the changes.

Manual Implementation

In case you want to implement the tags manually, you need to follow these steps:

1. Get hold of the HTML code of the web page on which you want to implement the tags.
2. Manually insert the OG image and other tags within the <head> section of the HTML code.

Testing And Debugging Open Graph Meta Tags

Now that you have successfully implemented the OG image and other tags in your web pages, it’s time to test them and remove the bugs, if any.

Step 1: Use A Debug Tool

First of all, you need to use a proper debug tool to verify whether the OG image and other open graph protocol tags are free of bugs and performing correctly or not. 

There are three main debug tools that you can use for this purpose:

1. Facebook Sharing Debugger
2. Twitter Card Validator
3. LinkedIn Post Inspector

You need to paste the web page URL in the debug tool to initiate the test.

Step 2: Check The Tags

Once you have pasted the URL, the debug tool will analyze the open graph protocol tags and display the same for verification. Cross-check whether the tags have the same content you had entered.

Step 3: Check For Warnings

Almost all three debuggers mentioned above will showcase warnings related to the open graph protocol tags for you to edit and improve. Check out for such warnings and start working on them immediately. 

Step 4: Re-check

After making the changes, make sure to re-check the tags by selecting the “scrape again” or the re-check option in the debugger tool.

Open Graph Meta Tags Are The Way To Enhance Social Media Presence

Who doesn’t want to have a great social media presence? Currently, social media holds a majority of the portion in the online marketing section, which means brands must focus on their social media presence. And they can do that by implementing the open graph image and other tags. 

These tags can easily convert a simple article into a social media snippet, capturing the majority of the screen space, which automatically attracts the readers. If you also want to enhance your brand visibility on social media platforms, you must practice using OG tags. And don’t worry; RankWatch is there with you at every step.

Hope this blog was useful for you!

See you soon!