Add All Open Graph Tags in Blogger/WordPress Websites | Best Practices To Boost Social Sharing



Advantage Of Buying Large Appliances Ac, Fridge, Washing Machine, Etc. Online

Buying online AC, fridges, washing machines, dishwashers, and other major kitchen and home appliances are now becoming more beneficial choices in India as compared to other countries. There are many benefits in buying household supplies online. First of all, you get unbeatable discount prices. Also, you get brand-new and genuine products. Other benefits include no interest EMI payments, and moreover you also able to return the product for a full refund if not satisfied, etc.

Just to give you an example, below are some of the benefits by the Amazon India, the leading global online retailer, offering the most affordable sale. The same deals & offers are not always available, but it is a good idea to check this link to the special offers page on Amazon.in India's website.
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
Open Graph Meta Tags Markup Protocol

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 400x300, Twitter Cards fetch the images of 280x150 whereas, Google+ tags get a 180x120 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 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. 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:
<!-- Facebook OpenGraph starts-->
<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:
<!-- Twitter Card Tags Start-->
<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:
<!-- Google Open Graph Tags -->
<!-- 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.


Don't forget to LIKE, SHARE & SUBSCRIBE...
Seriously, your small share helps a lot with the growth of this blog.
Most of the readers don’t share as they feels that we as bloggers don’t require their ‌tiny social share. But here’s the fact…
I've developed this blog piece by piece, your one small share at a time, and will continue encouraging me to do so. So I appreciate your support if you share this page on your social profile.
My dear reader! it won’t take more than 5 sec. of your time. The share buttons are there, please share and subscribe.
Vinayak SP
Authorised by: Vinayak SP

I'm a writer, digital columnist, tech-savvy and an engineer all rolled into one. Yes, that pretty much what everyone likes to call a geeky friend or what you’re probably here seeking, a content writer. You can follow me on the social media or subscribe the email newsletter for the updated guides and tutorials. Regularly publishes news articles about blogging tips, SEO, making money online, Adsense optimization, web hosting, affiliate marketing, & tech reviews.

⚠ Disclaimer
We are one of the type of a professional review site that operate like any other website on the internet. We respect & trust our readers. And we are confident & would like to mention that the above post contains some affiliate/referral links. And if you make a purchase; we receive commission from the links/apps/products we refer. We are totally unbiased and do not accept paid reviews or fake reviews claiming to be something they are not. We test each product thoroughly and give high marks to only the very best. We are independently owned and the opinions expressed here are our own.
Read & Post Comments

COPYRIGHTS & USAGE

All of the ProBlogBooster ideas are free for any type of personal or commercial use. All I ask is to keep the footer links intact which provides due credit to its authors. From time to time, we may use visitors/readers, information for distinct & upcoming, unanticipated uses not earlier disclosed in our privacy notice. If collected data or information practices changed or improved at some time in the future, we would post all the policy changes to our Website to notify you of these changes, and we will use for these new purposes only data collected from the time of the policy change forward. If you are concerned about how your information is used, you should check back our website Policy pages periodically. For more about this just read out Privacy Policy

Most Trending Pages

101 Top SEO Tips & Strategies To Increase Organic Traffic

101 Top SEO Tips From Experts

You should learn effective SEO techniques as there are many best SEO optimized websites for you and your brand who are already working on and their search rankings are now in the first top ten results. Listed top SEO tips and tricks which will help you get better search ranking & keep you at the top of the SEO results.

Add All Open Graph Tags To Boost Social Sharing

Open Graph Protocol

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 & 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.


Benefits of Online Marketing For The Business

Benefits And Importance of Online Marketing For The Business

Listed the advantages of online marketing, benefits of digital advertising and the strategies that the online marketing services for small businesses practices to drive more buyers. Sellers are now aware of the benefits of internet advertising and how digital marketing help to generate more sales. Follow benefits of internet marketing for your business.

10 Ways To Make YouTube Videos PROFESSIONAL

Top 10 Ways How To Make PROFESSIONAL YouTube Videos // YouTube Techniques

Making videos professionally is not as complicated as it appears. If you have basic accessories of shooting, then you are ready for this. You just need to know how to hold a camera & some basics of filmmaking. Having high-quality video will undoubtedly increase your subscriber, & obviously helps you to make money with youtube ads.