Add All Open Graph Tags (Schema Markup) To Your Website To Boost Your Social Shares [Blogger/WordPress]

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 are the snippets of most basic meta tags used into the HTML body for all content types to control how URL, title, description, images, and content shows up when it is shared by integrating any web page into the social graph for getting more social share and to improve your content sharing. If you add OpenGraph meta tags on every page, Facebook, Twitter, LinkedIn, Pinterest, VK, will display a preview with images and a link to your website. Check out all opengraph metatags for all websites and blogger blogs.
Open Graph Meta Tags Markup Protocol: Open graph meta tags are the snippets of most basic meta tags used into the HTML body for all content types to control how URL, title, description, images, and content shows up when it is shared by integrating any web page into the social graph for getting more social share and to improve your content sharing. If you add OpenGraph meta tags on every page, Facebook, Twitter, LinkedIn, Pinterest, VK, will display a preview with images and a link to your website. Check out all opengraph metatags for all websites and blogger blogs.

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 spending 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 Tag?

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 tag fetch the right image & displayed when link is shared socially.
  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 </head> 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: Facebook Sharing Debugger
  2. In "Sharing Debugger", add a link to be checked.
  3. You will see the 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 card 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 </head> 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 expr:content=' data:blog.postImageUrl' name='twitter:image:src'/>
<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 plenty of reviewed data regarding Twitter Cards Tags.
  1. Go to: Twitter card 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 </head> 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


Video: What is Open Graph and how can it help my website with social media?

What is Open Graph and how can it help my website with social media?We'll walk through the basics of Open Graph and how you can add it to your website. You'll learn how this helps optimize your webpage for social media.


Frequently Asked Questions

Please take a moment to read through our FAQ section for quick answers to common questions.

What is Open Graph tags?

Open graph meta tags are the snippets of most basic meta tags used into the HTML body for all content types to control how URL, title, description, images, and content shows up when it is shared by integrating any web page into the social graph for getting more social share and to improve your content sharing. An \"Open Graph Meta Tags\" is one of the most important tags that every web developer need to add it into the HTML body of their web pages to properly show title, description, images whenever the page from the website is shared on social media sites like Facebook, Twitter, Google+, Pinterest and so on. If you add OpenGraph meta tags on every page, Facebook, Twitter, LinkedIn, Pinterest, VK, will display a preview with images and a link to your website.

What is Open Graph tag in SEO?

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.

Why Open Graph Tags Required?

It is a must need for the web developer to correctly present your web page title, images, and description in social marketing sites. Open graphs meta tags (og tags) help to integrate your web page 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.

How to Optimize Blog Images Usig Open Graph Tags?

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.

What is 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.

What is Twitter Open Graph tags?

These Twitter card 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.

What is Google Open Graph tags?

Google open graph publisher markup tags are the snippets of most basic meta tags used into the HTML body for all content types to control how URL, title, description, images, and content shows up when it is shared by integrating any web page into the social graph for getting more social share and to improve your content sharing.

Bottom Line

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.


If you enjoyed this article, please share it with your friends and help us spread the word.

Next Post Previous Post
No Comment
Add Comment
comment url
But before you read the page, I just want to tell you that; you can now convert every visitor & every impression in $$$ with the most advanced & reliable monetization platform that having highest fill rate & the best payouts in the industry.
ADTR Network

One day approval. Monetize your traffic from day 1, with 100% fill rates, higher CPM, & quick payouts. Register to Start Earning Right Now →

Join
ADTR Network
Now

New AI-Powered Content Marketing Toolkit
Rated 5/5 stars in 10,000+ reviews. Stay ahead of the competition with next-gen tech adoption by optimizing content for the target audience to drive 3x faster results. Act now to gain a competitive edge in the market.

ADTR

Improve Revenue, Performance,
&
Grow Traffic Faster

Join Adsense Certified Ad Partner
"ADTR is a must have automatic testing tool for serious publishers."
300% Rise
in AdSense Earnings
Get results from Day 1
It's FREE
Read The Case Study

Testimonials

Client Name 1

I joined PBB when I started blogging 6 years ago. It was my go-to resource for just about ANYTHING!! Without it, I would not have continued down this journey. Having the support, motivation and resources available when you’re in such a lonely profession like blogging is crucial to success. Thank you PBB for helping me turn my passion into a full-time career!!!.

Nikhil Agarwal
Client Name 2

Thank you! After many years of dreaming and enjoying the beauty and insight from numerous blogs I found the courage to start one myself. I could not have done it with your step-by-step guidance! Thank you so much for Pro Blog Booster, for your patient instructions, and for your nudge to publish before it is perfect! I have a long way to go, but am excited to be tippy-toeing into the blog world!

Nandhini Sinha
Client Name 3

I highly recommend ProBlogBooster to any new tech blogger. I began my journey several years ago. The site holds a wealth of information and is both inspiring and educational. They keep up-to-date with the latest standards and trends bringing key information to help you start and grow your technology blogging business. The tech tuts are very in details and the support you receive will help to overcome any challenges along the way. Again, I highly recommend PROBLOGBOOSTER as your companion for tech blogging!

Arnab Tamada
Client Name 4

Problogbooster is awesome. If you’re serious about taking your blog to the next level then there’s no better blog. It has given me the confidence to keep growing my eCommerce site and view it as a serious business.

Matt Flynn

Disclaimer

We are a professional review site that operates like any other website on the internet. We value our readers' trust and are confident in the information we provide. The post may contain some affiliate/referral links, and if you make a purchase through them, we receive referral income as a commission. We are unbiased and do not accept fixed marketing articles or fake reviews. We thoroughly test each product and only give high marks to the very best. We are an independent organization and the opinions/views/thoughts expressed here are our own.

Privacy Policy

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