Open Graph Meta Tags: Why You Need for Your Website

Have you ever notice the blog post which shared on social media gets a lot of clicks on the link, why this happens? These are the tricks of open graph meta tags.

These are the best way to share and attractively present your post, that helps you get more click in a short time.

What is Og Meaning?

OG is known as open graph protocol, which is lately introduced in 2010 by Facebook, then followed by the other top social networking sites.

Open Graph protocol assists you set up your post element like title, image, and description before it goes live on social account.

Recommended Reading: Why You Need to Have Digilocker

With the help of this open graph meta tags, we can set up which image should be shared on social media, along with dedicated title and description.

This tag helps you skyrocket your post, which means your post will get more likes, clicks, and share if it’s accurately applied on the website.

Look at the below image.

open graph meta tags

Here you can see open graph meta tags are divide into three sections.

Og Image:

The first part is known as og image, which described which picture you wish to show on social media for scheduling posts.

For og image tags, you need to set your highly attractive photo because it directly catches the user’s attention. You need the attached image, which is more or near to 2048 pixel to looks great.

See Also:  Distributed DOS Attacks Destroy Everything

Every social networking site has its criteria for the image tag, like Facebook has its own open graph meta tags, twitter has its twitter card.

Syntax: <meta property=”og:image” content=”image1.png” />

Og Title:

The second part is known as og title, as the name suggests this og title shows the title of your webpage or blog post on social sites.

This is a catchy statement must be in 60 characters, so its help user to catch the title easily, there are 60% chances to get more clicks, if the title is catchy.

As the industry experts suggest, do not use your brand name in og title because it’s already reflected on the page, so make sure to use a title that describes the purpose of the post.

Syntax: <meta property=”og:title” content=”page title” />

Og Description:

The last part of open graph meta tags is the description, and this is a small 1 or 2 line sentence that elaborates more words regarding the post.

For og description is to make sure has attractive and worthy words, that promise the post will deliver every detail, as here mention.

Facebook recommends making og description up to 3 to 4 sentences long, but I suggest to build an attractive meta description, which is not more than 180 characters, that you can use it here, so this will helps you save your time.

Syntax: <meta property=”og:description” content=”describe words in 1 or 2 sentences.” />

Recommended Reading: Top Directory Submission Site List

Check Open Graph Tags on Present on the Websites:

If your newbie, and don’t have any idea, if open graph tag exists on your websites, then there are two ways to make sure.

See Also:  How Product Schema Boost Your Ecommerce Value

Meta SEO Inspector is a great chrome extension, which helps you show all technical SEO elements present on the website.

We can inspect canonical tags, open graphs, index status, everything on the chrome bar without visiting the dashboard to check all manually.

Try Meta SEO Inspector for Chrome.

And if your coding geeks, then you can directly visit the source code of the website to check whether it’s present in the head section of the website.

<meta property=”og:title” content=” “>

This is how the Open Graph Meta Tags code looks.

How You Can Setup Open Graph Meta Tags?

If you are on WordPress, then we can use plugins, don’t worry about cost, its free option provided by Yoast plugin.

To access these features, you need to go to your post, then scroll down to the Yoast part.

open graph meta tags

As you can see, we see three sections on the page. Navigate to the social tab of Yoast.

Once you click on the social tab, you will see Facebook, and twitter drops down, Then you can manually add title, description, and image for Facebook and Twitter.

Or either way, manually add this tags code to the backend of the website.

<meta property=”og:title” content=” “>
<meta property=”og:type” content=” “>
<meta property=”og:image” content=” “>

Or we can get help from a social media meta tags generator, and this tool helps you automatically generate the code for you. Link

Conclusion: I hope you understood how open graph meta tags work, and why we need to have it for the website. Let me know your opinion through comments, hit the share if you love this post.

Leave a Comment