Amidst the pool of millions of content on social media, your content may get lost. Enters Open Graph meta tags to make it easier for you! Learn all about OG tags from our blog and drive more clicks. https://www.webguru-india.com/blog/what-is-open-graph-meta-tag-a-detailed-overview/
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
What is open graph meta tag – a detailed overview
1. What is Open Graph Meta Tag – A Detailed Overview
Imagine this – you have created an informative content on your website and
shared it on social media. Now you are waiting to see a hike in traffic, likes, and
shares.
We hope it was that easy!
But it’s not!
You have to put some effort into enhancing the appearance of the shared post
so that people click on it and share. Otherwise, amidst the pool of millions of
content shared on social media, your content may get lost.
Enters Open Graph meta tags to make it easier for you!
OG meta tags are much in the craze these days. Wondering what these are?
Read the blog to the end to get a complete overview.
2. What is Open Graph Meta Tag
OG meta tag is the code snippet that controls the appearance of the URLs on
social media. It is a part of Facebook’s OG protocol and is also used by other
social media platforms like LinkedIn and Twitter.
With an OG tag, you can control how information travels from a 3rd party site
to Facebook when a page is shared. That way, instead of featuring a pixelated
image or scrambled snippets, your posts will feature information in an
organized manner.
This is how our blog Why Choose Magento for E-store Development looks on
Facebook with the OG tag:
Which Open Graph Meta Tags to Use
There are as many as 17 OG tags listed by Facebook in their official document.
We made it easy for you. You just need 5 tags to inform Facebook of the basics
of your page. We will discuss these below with reference to this blog: Why
Choose Custom Ecommerce Website over a Ready Solution.
1. og:title
syntax:
<meta property=”og:title” content=”Why Choose a Custom Ecommerce
Website over A Ready Solution” />
This is where you define the content’s title. It serves a similar purpose as the
meta title tag does for your content on the search engine result page. If
Facebook cannot find the og:title tag on a page, it uses the meta title. You have
full right to use different titles for meta title and og:title. If you want to give a
captivating title to your page exclusively on social media and drive more clicks,
you can give a catchy title to it.
Though there is no limit on the character, it’s better to maintain the same limit
as you would do in your meta title: within 60 characters. If the title is longer
than 100 characters, Facebook will automatically shorten it to 88. Keep the title
compelling enough to trigger clicks from the users.
2. og:description
3. syntax:
<meta property=”og:description” content=”Custom eCommerce website or
a ready solution – the blog offers a comparative study between the two.
Check it out.
This one is similar to the meta description tag. It describes the gist of your
content. Now, unlike the traditional meta description tag, it won’t impact your
SEO. Therefore, instead of looking for the right keyword, pay attention to
making it catchy so that it attracts people to click on it.
Facebook can display up to 300 characters in this section. However, it’s better to
limit the content to 200 characters. A short and crisp description will help
people to get an idea at a glance and click on the link to know more.
3. og:image
syntax:
<meta property=”og:image” content=”https://webguru-
india.com/blog/wp-content/uploads/2021/03/Why_Choose_a_-
Custom_Ecommerce_Website_over_A_Ready_Solution.jpg” />
A picture helps your content to stand out and drive people’s attention. The OG
image tag will ensure that a particular thumbnail will be displayed when your
page or content is shared.
If you don’t specify an image with og:image, Facebook may feature an ad banner
scraped from the page or nothing at all! This will seriously impact the content
and people may scroll past it.
Usually, the professionals at any reputed social media marketing
agency recommend the resolution for an OG image to be 1200×627 pixels [1.91:1
ratio]. Also, make sure that the image doesn’t exceed the 5MB size limit.
4. og:type
Syntax:
<meta property=”og:type” content=”article” />
4. This tag describes the type of object you are sharing: image, video or blog post.
Here are some examples of content types:
Website based: website, article, blog
Place: city, country
Business: company, restaurant, hotel
People: actor, politician, author
Entertainment: movie, game, book, food
And more!
This tag plays an important role. Say, your post is about a movie or a book with
a like button. It will determine if the content will come up in a user’s interest
section.
5. og:url
Syntax:
<meta property=”og:url” content=”https://webguru-india.com/blog/why-
choose-a-custom-ecommerce-website-over-a-ready-solution/” />
This is where you can set the canonical URL for the specific page you are
sharing. That way, you define one page where all the likes and shares go to. It’s
very useful if you have two or more URLs for the same content.
Remember, the URL you provide is not displayed on the Facebook newsfeed.
Only the domain name will be visible.
5. [ here, give an arrow sign and write – og:title [Why Chose a Custom Ecommerce
Website over A Ready Solution], og:image [the image], og:description [if you are
planning…use a h…] and og:url [webguru-india.com] ]
Advantages of Open Graph Meta Tags
Why go through the trouble of implementing OG tags? Here are the reasons
why the providers of digital marketing services emphasize using OG tags before
sharing content on social media:
Enhance the Appearance of Social Media Posts
The first and foremost reason to use the OG tag is that it helps you to create
attractive posts. If the image on the post is blurry or the text is not catchy, users
are less likely to interact with the content.
OG tags give you complete control over the way your content is displayed. You
can make the title and description as catchy as you want. It helps to organize all
the elements of your content and produce a professional appearance. This, in
turn, drives conversions.
Improved Visibility on Facebook Search
OG tag helps Facebook understand what the content is all about. This, in turn,
helps to increase your brand visibility through Facebook Search. On the other
hand, when people search for something on Facebook, they glance through
some results before clicking on a particular result. An OG tag-optimized
content is more likely to drive their attention.
Check out the following picture:
6. When searched for “mobile app development process”, Facebook brings up our
article Technical Insights into Mobile App Development Process, which is
optimized with OG tag.
Further, if someone shares a link of a post that is optimized with Open Graph
meta tags through direct message on Facebook Messenger, WhatsApp or
iMessage, the OG tag will help to create a snippet.
Suitable for Various Platforms
While Facebook brought forth an open graph, it is now employed by other
social networking platforms including Twitter, LinkedIn and Pinterest.
Therefore, you can create a tag for once and optimize your presence on diverse
platforms.
Optimize Brand Presence on Google Discover
Google Discover is an AI-driven content recommendation tool placed below the
Google Search bar in the Chrome app. It recommends news, articles, videos,
advertisements, live sports scores, etc. based on user-behaviour. You can find
more about Google Discover here.
If you want to optimize your content so as to be found in the Discover feed, the
OG tag may play a crucial role. Here’s an interesting fact. Ahrefs team has
recently noticed a relation between Open Graph meta tags and Google Discover.
They found that a typo existing in the og:title of a post (‘ink Building Case
Study’) was featured in Google Discover. However, the typing mistake was not
present in the actual title of the article (‘Link Building Case Study’).
How to Check OG Tags
To help you monitor OG tags, Facebook has a dedicated tool called Sharing
Debugger. What does it do? We will explain below.
When you type the link you want to check, it returns errors and relevant
suggestions for OG tags, if any. You can check and modify the image and
description if you want.
Also, it clears the Facebook cache. Why is it important? Suppose you post a link
on Facebook and then find out a mistake in the thumbnail. So you go back to
make necessary changes in the OG tags and again post it on Facebook.
7. Chances are that nothing will happen and the thumbnail will remain the same.
And the credit goes to the cache. Sharing Debugger completely refreshes the
cache on the link after you modify it. So make sure to use it every time you
make a modification in the OG tag.
Time to Wrap Up
As of March 2021, OG Tags are used by 54.6% of all websites. That means almost
half of the sites are still not using these. Optimizing OG meta tags may take
some time but it’s worth doing. The tags will help you to stand out from the
crowd, drive more visibility in the Facebook search result, and draw people’s
attention & more clicks.
Do you use OG tags before sharing content on social media? If not, start
implementing it soon!
Resource: https://www.webguru-india.com/blog/what-is-open-graph-meta-tag-a-
detailed-overview/
………………………………………………………………………………………………………
WebGuru Infosystems
Y8, Block-EP, Sector V, Salt Lake
Kolkata-700091, India
Website: https://www.webguru-india.com/
Email: enquiry@webguru-india.com
Phone: +91-8420197208
Follow us on: