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

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?

You may also like to check: Online META Tag Generator #1 Free SEO Tool For Website - SEO Meta Description Tool

Open Graph Conditions

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?

Frequently Asked Questions

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

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.