What is Open Graph meta tags and How to Use it?

As everybody knows that content is the king for ranking on google But without open graph tags your content doesn’t get more traffic to your website.

Author Image
Abdul Rehaman4 min read

The content should be able to share in social media. Most of the users love to share their knowledge and social media is a wonderful platform for getting more attraction to your content.

What is Open Graph Tags?

Open Graph was introduced by Facebook in 2010 which allows your integration between facebook and user website. Open Graph meta tags are useful to identify the elements which you want to show when someone share’s your page.

Why Open Graph is very important for marketers?

Every digital marketer aims to get more traffic to the website. Social media sites play a major role in getting more traffic. These Open Graph tags help to improve conversion and click rate to the website.

Open Graph tags don’t affect the on-page SEO, It will improve the website performance on social media. There will be more traffic from Facebook. So first I will explain about the Facebook tags.

Facebook Open Graph Tags

When you share your website URL it will look like the below image.

Facebook will display the image when you share the website URL by using Open Graph Tags. This lead to increase your website traffic from facebook. The users will be attracted by these display images. By this, you can understand the importance of the Open Graph tags.

How to use Open Graph tags?

The following tags are involved in the Open Graph

Og: title

Every content will have a title. When you have the Open Graph tag it serves as the meta title. If you don’t have OG tag Facebook consider meta title has your code.

Facebook display your post has bold and eyecatching. There is no limit for characters in your post. But is best to add between 60 and 90.

Example:

<meta title =”og:title” content=”Your content title here” />

Og: type 

The type of content can be described by the Open Graph. The type includes article, movie, technology and website.

Og: Image

Image is the most important factor for the marketers in Open Graph. Because users will be attracted by the images. This helps you to understand the particular thumbnail for your shared page. It will improve your conversion rates.

Note: Facebook does not use image smaller than a width of 300px and height of 200px

Og:description

This tag is very similar to meta description tag in HTML. This helps to describe your content and also helps to rank on search engine results page. This will be shown below the title link on Facebook.

The description is also useful for SEO. The search engine considers description as one of the factors to rank on the search results page.

Example:

<meta description =”og:description” content=”Your descriptive content here use it.” />

Twitter Tags

Twitter is also a popular social channel where you can expect traffic to your website. Open Graph will help you to stand out from the crowd.

The following are the tags in the twitter

Twitter: card

This meta tag is the type of content sharing in twitter. In twitter, you have three options like Photo, video and content. If you don’t use the Open Graph it will be shown as only content.

Example: <meta name=”twitter:card” content=”summary”>

Twitter: URL

This tag is similar to the Facebook URL. Twitter does because it has the same content on your site multiple times. This helps the URL gets all the tweets. Otherwise, tweets will have multiple URLs.

Example: <meta name=”twitter:url” content=”your website URL “>

Twitter: title

It is also similar to facebook Open Graph title, This will be involved with the keywords. The content should be clickable. It has a limit of 70 characters.

Example: <meta name=”twitter:title” content=”Your Title”>

Twitter: description

This tag is similar to the Google description tag. But keywords are not involved in this content. Your content should be compelling with the sentence which click-through to your website. It has a limit of 200 characters.

Example: <meta name=”twitter:description” content=” Your description. “>

Twitter: image

Your content should be attractive to get the users to your website. You need to add an image to your content. The limit for the image is the maximum of  1MB and cannot be smaller than 60px.

Example: <meta name=”twitter:image” content=” your image”>

How to test your website’s Open Graph integration

Facebook helps you for testing the Open  Graph to see how it looks when shared on the Facebook page. Using this tool help to verify your Open Graph is proper or not.

banner ad