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





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

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 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 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:
<!-- 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.


You liked this article? Please, share this...

Seriously. It helps a lot with the growth of this blog.
Most of the online readers don’t share this article 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, my dear reader if you share this page on your social profile.
It won’t take more than 5 seconds of your time. The share buttons are right here.

Authorised by:

A cybercrime expert, CBI - he is a personal technology columnist & the founder of ProBlogBooster. You can follow him on the social media or subscribe the email newsletter for your updated guides and tutorials. He talks about computer security and mostly publishes news articles about blogging tips, SEO, making money online, affiliate marketing, & 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.


Prev Story
Next Post »
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




Articles on Writing Unique Content

Making Blogger Responsive Mobile-friendly Template
Learn More About Responsive Web Development

Top 15 Must-Have Apps You Should Install
Right After Buying A New Smartphone

Making Blogger Responsive - How to make, design and build a responsive blogger template. This is an advanced tutorial & tep-by-step guide for making mobile-friendly responsive blogger HTML template compared to responsive web development. [Read More...]
These are the best android and iOS apps you need to consider and install right after buying a new smartphone to make your life easier. These apps will keep you smartphone as like new and boost mobile performance regularly. [Read More...]