An “Open Graph Meta Tags” is one of the most important tags that every blogger need to add into the HTML body of their blog to properly show title, description, images whenever the page from the website is shared on social media websites like Facebook, Twitter, Google+, Pinterest and so on.
Open Graph Protocol —
Webmasters used to search; What is an open graph tag? What is a twitter card? Any open graph examples? What is an open graph on Facebook? How to enable Facebook's Open Graph meta tags? What is a tag in social media? How Facebook's open graph protocol and Twitter cards help to improve SEO? How open graph markup can optimize social media experiences?
It is a must need for the blogger to correctly present your blog's Title, images, and description in social marketing sites. Open graphs meta tags (og tags) help to integrate your blog with social networking websites by providing them your page details to make rich graph objects with the related functionality. The open graph protocol is created to promote, speed up and improve the SEO and social media sharing via local tools given by Google, Facebook, W3C, and Twitter.
To convert your pages into graph objects, you required adding related open graph metadata to either each of your pages of HTML body. There are various open graph types i.e. social meta tags (facebook and twitter meta tag) for different social sites you need to add on your blog HTML, which will provide separate content to the respective site. This “Open graph meta tags” makes you run successful social marketing that allows you to manage what information displayed on social sites when any of your pages is shared. The content marketing remains the most powerful method to get links to boost your SEO efforts.
To work open graph tags for you, you need to add these meta tag markup manually into the HTML code of your blog. For adding Open Graph tags to your WordPress blog programmatically you can check the “Facebook Revised Open Graph Meta Tag” plugin. Here I'm going to share the most common methods to add the open graph meta tags you required to your website along with a short explanation of each. If you want to see the digital marketing growth you need to optimize the Open Graph tags that'll enable you to make it happen a rise in social sharing and improved conversion rate.
 |
| Open Graph Meta Tags Markup Protocol |
In the previous post I was talking about; [Guide] Breadcrumbs & SEO [What, Why & How] ✅ | Do We Require SEO Breadcrumbs Navigation on the Site? Q&A
Why is Open Graph Tags & Data is required?
Social networking websites like Facebook, Twitter, and Google+ have the significant power to drive massive social traffic to your blog. But to make it work, the social crawlers need to crawl and fetch the correct information from the page you are going to share. All the pages need to be SEO optimized with OpenGraph meta tags so as to get a search engine friendly URL structure, to crawl and index your website ASAP. With the use of these open graph social meta tags you able to handle the page content that will be shown on the shared snippet in social media newsfeeds.
You can check about; HTML Meta Tags – Generate Meta Keywords That Improves Search Engine Ranking. There is a lot more to learn about SEO than adding a title & meta description tags and it is really worth to spend some time in learning it. Even without Open Graph, social sites can fetch the information and data snippet for your links once it is shared. But it may get failed to extract the specific content like correct title, description, image, in a proper way derived from the link of your web page.
If the social site is not able to get the right info about the link, like the same title not shown, or the right thumbnail image not fetched, then the visitor who is going to share your page will not able to post and so furthermore, the website traffic will affect badly. Hence, it is necessary that you need to add open graph meta tags to the HTML of your website/blog.
You may also like to know; Stop Using Dynamic Meta Tags | Advanced SEO Practice
What is an open graph tags?
The 5 required properties included into Open graph tags for every page are:
1. og:title: This tag is used to fetch the exact title of the link.
2. og:url: This tag is used get the canonical URL of the page you sharing.
3. og:description: This tag contains 2-3 lines of short description about the page.
4. og:image: This image tag extracts the right image & displayed when the link is shared on social sites.
5. og:type: This tag indicate the type of your blog/page/website.
6. og:site_name: This tag is used to indicate the brand name of the site.
You may also like to check: Online META Tag Generator #1 Free SEO Tool For Website | SEO Meta Description Tool
Open Graph Conditions
Before adding open graph tags you need to know the basic rules of SEO:
1. Title: the best SEO practice for optimized title tag length is to keep titles under 60 characters for all social sites.
2. Description: The SEO Meta descriptions must be optimized, the Google search results having snippets up to 300 characters.
3. Image Dimensions: You must be aware of the image dimensions and the rations for social likes like; Facebook allows 400×300, Twitter Cards fetch the images of 280×150 whereas, Google+ tags get a 180×120 size of images to be shown in the snippet.
RECOMMENDED: 101 Best Top Working SEO Tips To Rank Higher in Google Search Results | Actionable Top SEO Tips
Adding Open Graph Meta Tags in Blogger/WordPress Websites
Social media open graph meta tags help to control the appearance of your links shared on the social media. Choosing on which meta tags you required to add, or remove can be difficult to decide.
Presenting an ultimate guide that'll help you to add open graph markup/meta tags in your HTML template and make your web data look valid on social sites:
1. Facebook Open Graph Tags
These Open Graph markup tags can control what to display in a share on the Facebook feeds. A proper use of the Facebook Open Graph tags can have a great influence on SEO and improve social sharing.
Add the below Facebook Open Graph Tags just before the tag:
<meta content='website' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<!– Title, URL & Description –>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl.https' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' property='og:description'/>
</b:if>
<!– Image –>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta content='1200′ property='og:image:width'/>
<meta content='630′ property='og:image:height'/>
<b:else/>
<meta content='YOUR-WEBSITE-LOGO-URL' property='og:image'/>
</b:if>
<!– FB specific –>
<meta content='YOUR-FACEBOOK-PROFILE-ID' property='fb:admins'/>
<meta content='YOUR-FACEBOOK-APP-ID' property='fb:app_id'/>
<!– Facebook OpenGraph ends–>
Check Facebook Open Graph Tags with Facebook Debugger:
After you implement the Facebook Open Graph Tags in your HTML, enter your page URL into the Facebook debugger tool to get crawled.
1. Go to: https://developers.facebook.com/tools/debug/
2. In “Sharing Debugger”, add a link to be checked.
3. You will see details of the page fetched by Facebook Open Graph Tags shown on the same page.
You may also like to know; Use Facebook Without Internet [FREE] or Data Plan From Any Mobile
2. Adding Twitter Cards
These Twitter cards tags can be very helpful to your website to influence the followers & help grow user engagement. Once you added a Twitter card and tweet any link, it will look little-expanded tweets which will increase the click-through rate, promote brand awareness, and ultimately drive massive targeted traffic.
Add the below Twitter Card Tags just before the tag:
<meta content='summary_large_image' name='twitter:card'/>
<!– Title, URL & Description –>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.url' name='twitter:url'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<!– Image –>
<b:if cond=' data:blog.postImageUrl'>
<meta expr:content=' data:blog.postImageUrl' name='twitter:image'/>
<meta content='280′ property='twitter:image:width'/>
<meta content='150′ property='twitter:image:height'/>
</b:if>
<!– Twitter specific –>
<meta content='YOUR-TWITTER-PAGE-USERNAME' name='twitter:site'/>
<meta content='YOUR-TWITTER-PROFILE-USERNAME' name='twitter:creator'/>
<!– Twitter Card Tags Ends–>
Check Twitter Cards Tags with Twitter Validation Tool:
The Twitter Validation Tool requires no prior permission. It provides you a plenty of reviewed data regarding Twitter Cards Tags.
1. Go to: https://cards-dev.twitter.com/validator
2. In “Card URL”, add a link to be checked.
3. You will see details of the page fetched by “Card validator” shown on the “Card preview” along with the log.
Check out; 12 Effective Ways to Use Twitter to Drive Traffic to Your Blog | Twitter Marketing Blog
3. Google Open Graph Publisher Markup Tags
Add the below Google Open Graph Tags just before the tag:
<!– Title, URL & Description –>
<link expr:href='data:blog.canonicalUrl.https' rel='canonical'/>
<meta expr:content='data:blog.canonicalUrl.https' property='url'/>
<meta expr:content='data:blog.pageName' itemprop='name'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
<b:else/>
<meta expr:content='data:post.snippet' itemprop='description'/>
</b:if>
<!– Image –>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' itemprop='image'/>
<meta content='180′ property='width'/>
<meta content='120′ property='height'/>
</b:if>
<!– Google + specific –>
<link href='GOOGLE-PAGE-URL' rel='publisher'/>
<!– Google Open Graph Tags –>
You must know; 10 Ways How to Increase Website Traffic From Google Plus // Content Marketing
All of these optimized open graph markup tags and meta descriptions can have a significant impact to improve your SEO. These open graph tags are created to fetch, control the proper information and the content like a title, a short description of the link, and a thumbnail image so as to show them properly while sharing on social media.
