Classy Daily Used Free Google Tools Blogger Should Not Ignore

Posted On // Leave a Comment
Useful Google Tools No Blogger Should Ignore

Amazing Things Bloggers Can Do With Google Tools





    We are living in a generation where one doesn't get recognition until one represents himself in a way which is more appealing to the audience. From celebrities to ultra-rich CEOs, everyone used a special element which has given them fame, success in their respective businesses or even made them popular. That SPECIAL element is Marketing!

    Be it small, primary level businesses or Fortune 500 Companies, all of them have to represent themselves to stay in the competition of sales with the help of excellent marketing strategies. Social Media Marketing, as well as Content marketing, have become mandatory elements for increasing business sales. There are 15 Awesome Google Tools which would prove to be beneficial for you in the long run, not only for marketing purposes but also for organizing your work in a good manner!

    Google Analytics :


    If you are working in the Marketing Department of a company, you must have this tool. This is the most powerful tool by Google which is a boon to the Marketers. If you want to know about the visitors who visit the website of your company, then Google Analytics should be in your must-have tools list.

    Google Adsense :


    Want to make money through your blog or a website where you have thousands of subscribers as well as visitors? Then Google AdSense is the tool you should look for. You can earn a good amount of passive income as well as follow your passion of writing through blogging.

    Google Blogger :


    Majority of passionate writers want to convey their works through blogging. But the problem is they don't want to commit to blogging platforms which are self-hosted. If you have the same problem, then Google Blogger is the solution to your problem. Now, what are you waiting for? Chase your passion for writing through GoogleBlogger!

    Google Chrome :


    A browser which is fast in actual terms, consisting of lots of themes, apps as well as extensions, GoogleChrome is easily the best browser. Surf the net smoothly with GoogleChrome and also make sure you increase your marketing productivity by SEO Site Tools which is an extension offered by the browser.

    YouTube (owned by Google) :


    YouTube, the place where millions of visitors watch videos, be it educational videos, video songs, inspirational videos, business boosters and so on. Through YouTube, your video would be available to a large number of audience and it would definitely be a great Marketing tool for your business. A picture conveys a message, while a video conveys your whole idea!

    Google Webmaster tools :


    A good amount of valuable data can be known with Google Webmaster tools.
    Site Health, Site Optimization, Site Configuration and Site Traffic can be easily learned with the help of Google Webmaster tools.

    Google Translate :


    Suppose you go to a specific blog or webpage on the internet but it is in a language not used by you, there's nothing to worry about because Google Translate will translate it into your language. Google Translate has removed the language barrier in thetrue sense.

    Google Books :


    For the book lovers, Google Books is one of those places which they would prefer to go for reading online. Many books of different genres are available on Google Books. If you are a writer, then you would definitely want your work to be listed here as it would boost your sale to a bigger audience. So Writers, get ready to convey your stories, literary work, fiction as well as non-fiction to the avid readers through GoogleBooks.

    Google Insights :


    Google insights provide you with keywords which are trending currently. The popularity of a keyword can be known with the help of Google Insights.

    Google Alerts :


    Don't have time to read Newspapers? Want to know about the mentioning of your brand on the web? If YES, then quickly set up your Google Alerts. Google Alerts can be used to see where your competitors are getting mentioned and where they are building their profiles.

    Google Gadgets :


    If you want your website to have more functions, then check on the gadgets on Google Gadgets. The Gadgets in GoogleGadgets are organized in different categories such as:
    1. Tools
    2. Communication
    3. News
    4. Finance
    5. Technology
    6. Sports
    7. Games
    8. Lifestyle
    9. Politics

    Gmail :


    Ever wished that your email account could filter your messages into different categories or labels and archive them easily? Well, your wish could be fulfilled by having an email account at Gmail. Gmail gives a professional look to your email account by organizing your inbox in a proper manner.

    Google Places :


    If you want your local business to flourish, then you must list it on Google Places. You can add photos, videos to make your business available on the first page of search results.

    Google Reader :


    Who doesn't like to be systematic? Google Reader allows one to organize as well as view RSS feeds at one place.

    Google Keyword Planner :


    Many Bloggers or Content Marketers don't know how to get the best long tail keywords for their content. When you once go through Google Keyword Planner in Google Adwords you will come to know how simple it is to use for daily basis to get our articles on the top of the search results for long time. The more you use it to perform searches the more you understand it and you will become used to in utilizing it.

    Google Photos :

    Google Photos is a Photos sharing and Storage service where you can share, upload photos. Google implements different forms of machine learning into the Photos service as it detect and arrange your photos based on the photo content, enabling features that can automatically generate albums, animate similar photos into quick videos, surface past memories at significant times, and improve the quality of photos and videos etc Android Users can directly take backup of their photos with one google account.

    Google My Business :


    Who doesn't want to get free advertising from Google? 

    If you are running a local business then you should not ignore this tool. With this tool you can get free advertising from Google.

    When you search any best hotel in particular city, or best web designing company in your city etc on google You will see this type of search results as shown in the screenshot below.

    When I searched "web designing company in bangalore" I got This box results with normal search results.



    After seeing the above result you will be thinking the above results should be sponsored. No but this are not paid results you can also include your listing or your local business.

    Claim Your local business listing in Google My Business and follow all the steps given in the Google Site then if all done well then within few weeks you should see your business shown when someone search keyword or phrase related to your business.

    Best Paid Tool From Google:

    Google Adwords :


    Google Adwords provides a paid search campaign by which you can bid on the right keywords which would eventually give you a good amount of audience, leading to the enhancement of the value of the ads you pay for.

    Conclusion:

    With One Google Account You can access all this priceless tools.

    Google Made our life easy with all this free tools and more but we have mentioned the important and most used ones according to us. as they are free, some have limitations and there’s always room for improvement So Google will update and improve them time to time.

    Here we have shared the free tools and paid tools for marketing, blogging. so use this tools and say us which is your most used Google Tool? and Which is your most rarely used Google Tool?


    That's It Thanks For Following our Tutorial '' Classy Daily Used Free Google Tools Blogger Should Not Ignore '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.


    Read More >>

    Auto Slide Up 'Recommended Post For You' Widget For Blogger

    Posted On // Leave a Comment
    Auto Slide Up 'Recommended Post For You' Widget For Blogger




      Live Demo

      Hello Friends We Are Back With Another Trending And Very Useful Widget For Blogger i.e. Auto Slide Up 'Recommended Post For You' Widget For Blogger & Popularly Known as You Might Also Like Widget. We have Added Many Great Features To this widget to make it look Beautiful and work Faster.

      Features of Recommended Post For You Widget:

      1. This Will Not Take Any Extra Space in Your Post Area
      2. This Widget Will Only Appear When the Reader/User Scroll Down Half the page.
      3. This Widget Will Hide Automatically When User Scroll Up The Page.
      4. This Will Show The Random Post From Your Blog to the user
      5. It is attractive and make your site or blog more professional.
      6. This Widget Will Only Appear in Posts Pages.
      7. This Widget Will Show Title, Thumbnail And Description of Post.

      ChangeLog for Recommended Post For You Widget:

      1. Added Close Button So That User Can Close The Widget.
      2. Duplicates Posts Displaying Issue Resolved
      3. Added Background Image To The Widget

      We Have Styled This Widget in Such a Way That It Looks More Official and Beautiful. We Checked in Many Templates This Widget Works Very Smoothly. Recommended post Widget Will Work Similar To Random Posts Widget But Here It Showcase only One Post From any Category or Label You Assigned.

      After A Lot of Hard Work and Tweaking Few Things We have Created this Widget For our Users So that They Can Add It and Increase User Engagement. 

      Benefits of Using Recommended Post For You Widget:

      We Can Get Many Benefits From This Widget as Many Blogs Does Not Have User Interaction. So From This Widget The Blog Will Recommend Related Post To Users This will increase Internal Linking as well as User Interaction will also increase So Bounce Rate Will Decrease When Bounce Rate Decreases This Shows Users are Spending Much Time In Your Site And When Pageviews Increases Ranking Also Improves.

      But Adding This Widget is little Tricky But We Will Guide You. Lets Start.

      First We Will Add The Styling( CSS ):

      STEP 1: Log in to your Blogger account and Go to your Blogger Dashboard


      Template

      STEP 2: In The Left Side Bar You will find Template Section as highlighted in the image above Click on Template.


      STEP 3: Click On Edit HTML.

      STEP 4: After Clicking on Edit HTML Search for
      ]]></b:skin>

      Template Code

      STEP 5:  Copy This Below Code Before ]]></b:skin>

      /* Start Recommended Post Widget By http://www.allbloggertricks.com */

      .ABT_Recommended_widget_Wrap {
                  width: 300px!important;
                  box-sizing: border-box;
                  position: fixed;
                  bottom: 10px;
                  right: 0px;
                  z-index: 99989658;
                  background: rgb(183, 35, 61) url('http://2.bp.blogspot.com/-pxCeivrvHic/WOkGzAyPXnI/AAAAAAAANWw/AYX83o5bzcUkJheYwwO2sd0MAdvpe7F-ACLcB/s1600/bg.png');
                  border-top: 4px solid rgb(54, 88, 156);
                  font-family: 'Oswald', sans-serif;
              }
              .ABT_Recommended_widget_Wrap .ABT_Recommended_widget_Inner_Wrap {
                  padding: 10px;
                  overflow: hidden;
              }
              .ABT_Recommended_widget_Wrap img {
                  width: 100%!important;
                  max-height: 200px;
                  border-radius: 5px;
              }
              .ABT_Recommended_widget_Wrap .ABT_Widget_Title h2 {
                  font-size: 18px;
                  text-decoration: none;
                  text-transform: capitalize;
                  word-break: break-all;
              }
              .ABT_Recommended_widget_Wrap .ABT_Widget_Title h2 a, .ABT_Small a {
                  text-decoration: none;
                  text-transform: capitalize;
                  color: rgb(54, 88, 156);
                  font-family: 'Oswald', sans-serif;
              }
              .ABT_Widget_Close_Button span {
                  position: absolute;
                  left: 0;
                  top: 0;
                  padding: 1px 8px 3px;
                  background: rgb(54, 88, 156);
                  color: #FFF;
                  font-size: 19px;
                  cursor: pointer;
              }
              .ABT_Recommended_widget_Wrap {
                  display: none;
              }
              .ABT_Widget_Close_Button h3 {
                  display: inline-block;
                  margin: 30px 0px 5px 0px;
                  color: rgb(54, 88, 156);
                  font-family: 'Oswald', sans-serif;
              }
              .ABT_Widget_Snippet {
                  font-size: 16px;
                  line-height: 1.2em;
              }
          
          .ABT_Small{
                  font-size: 14px;
                  text-decoration: none;
                  text-align: right;
              }
          
      /* End Recommended Post Widget By http://www.allbloggertricks.com */

      STEP 6:  All Done Save the template.

      [II] We Will Add Markup ( HTML):

      STEP 1:  Go To Template Section As Shown in The Image Below
      Template

      STEP 2:  Now Search for (Search by Pressing CTRL + F) 

       <data:post.body/>

      You Will Find This Code 3 Times or more in your Template So Refer 2nd or 3rd Time.

      STEP 3:  Copy This Below Code After <data:post.body/>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      &lt;div class=&#39;ABT_Recommended_widget_Wrap&#39; id=&#39;ABT_Recommended_widget_Wrap&#39;&gt;
        
      &lt;/div&gt;

      <script type='text/javascript'>   
        
      var ListCount = 1;var RandomArray = [];var TotalPosts = 0;
      function TotalCount(json) {TotalPosts = json.feed.openSearch$totalResults.$t;}
      document.write(&#39;&lt;script type=\&quot;text/javascript\&quot; src=\&quot;http://www.trendingwidgets.com/feeds/posts/default?alt=json-in-script&amp;callback=TotalCount\&quot;&gt;&lt;\/script&gt;&#39;);
      function GenerateNum() {
                  for (var i = 0; i &lt; ListCount; i++) {
                      var RandomNum = Math.floor(Math.random() * (TotalPosts) + 1);
                      RandomArray[i] = RandomNum;}}
      function trendingWidgets(json) {
                  var pageNum, thumbnail, trueThumbnail;
                  var ul_list = document.getElementById(&#39;ABT_Recommended_widget_Wrap&#39;);
                  for (var a = 0; a &lt; 1; a++) {
                      for (var b = 0; b &lt; json.feed.entry[a].link.length; b++) {
                          if (json.feed.entry[a].link[b].rel == &#39;alternate&#39;) {
                              break;}}
                      var get_url = json.feed.entry[a].link[b].href;
                      var get_label = json.feed.category[a].term;
                      if (json.feed.entry[a].link !== null) {
                          var ListTitle = json.feed.entry[a].title.$t;}
                      if (json.feed.entry[a].media$thumbnail.url !== null) {
                          thumbnail = json.feed.entry[a].media$thumbnail.url;
                          var trueThumbnail = thumbnail.replace(&quot;?imgmax=800&quot;, &quot;&quot;);
                          trueThumbnail = trueThumbnail.replace(&quot;s72-c&quot;, &quot;&quot;);
                      } else if (json.feed.entry[a].content.match(/src=(.?[\.jpeg|\.jpg|\.gif|\.png])/) !== null) {
                          trueThumbnail = json.feed.entry[a].content.match(/src=(.?[\.jpeg|\.jpg|\.gif|\.png])/)[1];
                      } else {
                          trueThumbnail = &quot;&lt;span id=&#39;no-image&#39;&gt;No Thumbnail&lt;/span&gt;&quot;;}
                      var newContent = json.feed.entry[a].summary.$t;
                      var theContent = newContent.replace(/(&lt;([^&gt;]+)&gt;)/ig, &quot;&quot;).substr(0, 80);
                      var listing = "<div class='ABT_Widget_Close_Button'><span title='Close Button'>Close</span><center><h3 style='text-align: center'>You Might Also Like</h3></center></div><div class='ABT_Recommended_widget_Inner_Wrap'><div class='ABT_Widget_Thumbnail'><a href='" + get_url + "'><img src='" + trueThumbnail + "' alt='" + ListTitle + "' title='" + ListTitle + "'></a></div><div class='ABT_Widget_Title'><h2><a href='" + get_url + "'>" + ListTitle + "</a></h2></div><div class='ABT_Widget_Snippet'>" + theContent + "</div><div class='ABT_Small'><a href=''>Get This Widget</a></div></div>";
                      ul_list.innerHTML += listing;}
                  $(document).ready(function() {
                      $(&#39;.ABT_Widget_Close_Button span&#39;).on(&#39;click&#39;, function() {
                          $(&#39;#ABT_Recommended_widget_Wrap&#39;).animate({right: &#39;-550px&#39;}, &#39;slow&#39;, function() {
                              $(this).css(&#39;display&#39;, &#39;none&#39;);});});
                      var height = $(document).height() / 2;
                      $(window).on(&#39;scroll&#39;, function() {
                          if ($(document).scrollTop() &gt; height) {
                              $(&quot;.ABT_Recommended_widget_Wrap&quot;).slideDown(&quot;slow&quot;).css({right: &#39;0px&#39;});} else {
                              $(&quot;.ABT_Recommended_widget_Wrap&quot;).slideUp(&quot;slow&quot;).css({
                                  right: &#39;-550px&#39;});}}); }); }
                                                                                                           
      </script>
         
      <b:if cond='data:top.showPostLabels and data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop index='i' values='data:post.labels' var='label'>
              <b:if cond='data:i == 0'>
                   <script>
             for (var i = 0; i &lt; ListCount; i++) {
                  GenerateNum();
                  var blogLink = "http://www.allbloggertricks.com";
                  var callScript = document.createElement(&quot;script&quot;);
                  callScript.src = blogLink + &quot;/feeds/posts/default?alt=json-in-script&amp;start-index=&quot; + RandomArray[i] + &quot;&amp;max-results=1&amp;callback=trendingWidgets&quot;;
                  var latest_posts_new = document.getElementById(&#39;ABT_Recommended_widget_Wrap&#39;);
                  latest_posts_new.appendChild(callScript);}
          </script>
              </b:if>
          </b:loop>
      </b:if> 
      </b:if> 

      STEP 4:  All done save the template and Open Your Post and Scroll Down Half The Way To See This Widget Working.


      Customization:

      • The Orange Highlighted Text Represents the URL Of The Blog. So Add Your Blog URL Starting With http and don't add the Slash at the end.

      Conclusion:


      Finally You have Added The Widget in Your Blog. And In our Upcoming Post We Will Share Related Recommended Post Widget. This Widget Will Work Similar To This But THe Difference is That This Will Generate Random Posts but That Widget Will Fetch Related Post.

      And those who have added this widget successfully without any hurdles congrats to them. and if you want any styling or improvement to this recommended widget notify us we will try to add it for you.


      That's It Thanks For Following our Tutorial '' Auto Slide Up 'Recommended Post For You' Widget For Blogger '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.

      Incoming Search Terms:



      Read More >>

      How to Add a WP Style Flexible Tabbed Sidebar Widget in Blogger?

      Posted On // Leave a Comment
      How to Add a WP Style Flexible Tabbed Sidebar Widget in Blogger




        Hello Friends we are back with another useful widget for blog i.e. responsive tabbed content widget which consists of 3 columns and one column will show at a time. This widget will save the space of your site as you can add three widgets in this section. 

        Advantages of using tabbed content box:

        1. Using this tabbed content box will save your blog space
        2. You can add desired number of widgets based on the priority
        3. This is responsive and can fit to any website
        4. As it is responsive you can add it to sidebar, footer, above posts etc
        5. It is attractive and make your site or blog more professional.
        6. It is created in pure JavaScript no frameworks has been used so less code is used.
        7. You can add/remove the widget from the layout of the blogger.

        We have not used any JavaScript Framework in creating this Tabbed Content Widget Box. We used very less code and most of the styling is done through CSS. This widget will load very fast. We have added the hover effect and make it look very stylish.

        You can customize this widget this looks good in sidebar, above footer, below posts etc so it is your choice to place it anywhere you like but in the separate section. 

        You can use widgets like Recent Posts, Popular Posts, Blog Archive, Random Posts, Social Followers Box, Stats Widgets Like Alexa etc widgets in this Tabbed Content Box Widget

        First we will add the styling( CSS ):

        STEP 1: Log in to your Blogger account and Go to your Blogger Dashboard


        Template

        STEP 2: In The Left Side Bar You will find Template Section as highlighted in the image above Click on Template.


        STEP 3: Click On Edit HTML.

        STEP 4: After Clicking on Edit HTML Search for
        ]]></b:skin>

        Template Code

        STEP 5:  Copy This Below Code Before ]]></b:skin>

        /* Start Tabbed Content Box By http://www.allbloggertricks.com */

        .ABT_Hide{ display: none; } .ABT_Tabs_Wrap{ margin: 0px; max-width:100%; box-sizing: border-box; } .ABT_Index_Tabs_Wrap{ display:flex; max-width:100%; padding: 5px 5px; box-sizing: border-box; } .ABT_Tabs{ max-width: 30%; font-size: 18px; font-family: IMPACT; color: rgb(255,88,0); margin: 5px 8px; cursor: pointer; border-radius: 2px 10px 2px 10px; box-shadow: 0px 0px 5px 3px rgb(193,193,193); padding: 5px 5px; text-align: center; flex: 1 0 auto; display:flex; justify-content: center; align-items: center; flex-direction: column; box-sizing: border-box; position: relative; } .Tab_content{ width:100%; box-sizing: border-box; margin-top: 10px; padding: 10px 10px; display:flex; } .ABT_active{ background: rgb(220,240,240)!important; } .ABT_Tabs:hover{ background: rgb(220,240,240)!important; } .ABT_Tabs:before{ content: ""; height: 100%; width: 5%; background: rgb(255,88,0); position: absolute; left:0px; border-radius: 2px 10px 2px 10px; }
            
        /* End Tabbed Content Box By http://www.allbloggertricks.com */

        STEP 6:  All Done Save the template.

        [II] We Will Add Markup ( HTML):

        STEP 1:  Go To Template Section As Shown in The Image Below
        Template

        STEP 2: This step is depend on your template coding as different designers used different names for the sidebar or your desired place where you want the tabbed content box appear but if you want to add it to sidebar then most common names would be sidebar, sidebar-wrapper etc so search for
        <aside class="sidebar-wrapper"> 

        or
        <aside 
        or 
        <div id='sidebar-wrapper'> 
        or 
        sidebar




        STEP 3:  Copy This Below Code And Paste it after the above found code
        <!--Start Tabbed Content Box By http://www.allbloggertricks.com-->
        <div class="ABT_Tabs_Wrap">
            <div class="ABT_Index_Tabs_Wrap">
                <div class="ABT_Tabs ABT_active" data-abt_tab="Tab1" id="ABT_Tab1">
                    Popular</div>
                <div class="ABT_Tabs" data-abt_tab="Tab2" id="ABT_Tab2">
                    Labels</div>
                <div class="ABT_Tabs" data-abt_tab="Tab3" id="ABT_Tab3">
                    Archive</div>
            </div>
            <div id="tabsWrap">
                <div class="Tab_content" id="Tab1">

                    <b:section class='ABT_Tabbed_Widget' id='ABT_Tab_1' preferred='yes'></b:section>

                </div>
                <div class="Tab_content ABT_Hide" id="Tab2">


                    <b:section class='ABT_Tabbed_Widget' id='ABT_Tab_2' preferred='yes'></b:section>

                </div>
                <div class="Tab_content ABT_Hide" id="Tab3">

                    <b:section class='ABT_Tabbed_Widget' id='ABT_Tab_3' preferred='yes'></b:section>

                </div>
            </div>
        </div>
        <!--Start Tabbed Content Box By http://www.allbloggertricks.com-->
        <script type="text/javascript">
             
        var ABT_Tabs = document.querySelectorAll(".ABT_Tabs"); var ABT_AllTabs = document.querySelectorAll(".Tab_content"); ABT_Tabs.forEach(function(a){ a.addEventListener("click", showTabs); }); function showTabs(){ for(var num in this.parentElement.children){ this.parentElement.children[num].className = "ABT_Tabs"; console.log(this.parentElement.children[num]); } this.classList.add("ABT_active"); for (var i in ABT_AllTabs){ ABT_AllTabs[i].className = "ABT_Hide";} var getId = this.attributes["data-ABT_Tab"].value; var TheId = document.getElementById(getId); return TheId.className === "ABT_Hide" ? TheId.className = "" :TheId.className = "ABT_Hide"; } 

        </script>
        <!--End Tabbed Content Box By http://www.allbloggertricks.com -->
        STEP 4:  All Done Save the template And Check it in your Blog Layout.


        Customization:


        • The Orange Highlighted Text Represents the Title of the Widget you want to show under this box so change the orange text in all three occurrences with your desired widget title but don't use lengthy title otherwise it will break the widget.

        Conclusion:


        Finally you have added this widget to your desired location . 
        in the blog but if you are facing any difficulty in adding this widget then please comment or contact us we will help you in adding this widget.

        And those who have added successfully without any hurdles congrats to them. and if you want any styling or improvement to this sidebar tabbed widget notify us we will add it for you.


        That's It Thanks For Following our Tutorial '' How to Add a WP Style Flexible Tabbed Sidebar Widget in Blogger? '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.

        Incoming Search Terms:



        Read More >>

        How To Add Open Graph Protocol (OGP) Meta Tags in Blogger Blog?

        Posted On // Leave a Comment

        Guide To Understand Open Graph tags and its importance

        Guide To Understand Open Graph tags and its importance


          Hello Everyone Today After a request from one of our subscriber we are writing this post on How To Add Open Graph Protocol (OGP) Meta Tags in Blogger Blog?

          Basic Questions Regarding Open Graph Meta Tags.

          What is Open Graph Protocol (OGP) Meta Tags?

          Open Graph Protocol (OGP) Meta Tags enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.

          In simple words Open Graph Tags will structure your unstructured data of a page into a structured information so that the page can be defined when shared on Social Sites like Facebook etc they will fetch the featured image, description, title from the shared link. this will help visitors to see what the shared link is about and the chances of clicking on the link increases.

          Why to use Open Graph Meta tags?

          I already explained you above when you add this tags in your template in the header section then your blog will be structured in a proper way when shared on Social Sites. But if those social sites are not able to extract information (i.e., title, image, description, ) from you blog post then you will loose your potential clicks and visitors.

          I will give you an example:

          If your competitor is using Open Graph Meta Tags in his blog and assume you are not using it. and when you wrote an original post on any topic and if he copied your post and both of you share that post on Facebook groups which has a common topic. Imagine when you share the post link and nothing appears/nothing fetched by facebook bots only a plain link which looks ugly appears. 

          And Your Competitor Share his post link in the same group and nice image, title with description shows. 

          Now The Question will arose:

          Where will visitors click? on your original post or your competitor copied post

          Obviously you will say visitors will click on the nice structured post shared by your competitor. because visitors don't know who has copied. They will just see the image, title etc So To make your blog more credible on Social Sites Add this meta tags it is very important.

          Commonly Used Open Graph Properties in Blogs:


          Open Graph Meta tags properties definition
          og:url This property represents the url (link) of your homepage, posts,pages etc
          og:title This property represents the title of the Blog, Posts, Pages etc
          og:type This property represents the type of the page users visit. We use blog/website for the homepage. other that that we use article type for the posts etc
          og:image This property represents the images. For homepage we use Blog logo For other than homepage we use post featured image.
          og:description This property represents the description of your blog homepage, posts etc. this will show when you share on Facebook.
          Open Graph Protocol

          How To Add Open Graph Meta Tags in Blogger Template?

          Lets add the Open  Graph meta tags in blogger. Follow the Below steps:

          First we will add the namespace to the HTML of the template. 

          STEP 1: Log in to your Blogger account and Go to your Blogger Dashboard



          STEP 2: In The Left Side Bar You will find Template Section as highlighted in the image above Click on Template.


          STEP 3: Now Search For <html and Paste The Code inside it in the end as shown in the image below .


           Open Graph tags screenshot


          xmlns:og='http://ogp.me/ns#'

          STEP 3: Now after adding the namespace now its time to add the meta tags .

          STEP 4: Now Search For <head> and copy The Given code Fust Below/After The <head>.
          <!-- Open Graph Meta Tags Start -->
          <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <meta expr:content='data:blog.pageName' property='og:title'/>
          <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
          <meta content='article' property='og:type'/>
          </b:if>
          <meta expr:content='data:blog.title' property='og:site_name'/>
          <b:if cond='data:blog.postImageThumbnailUrl'>
          <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
          <b:else/>
          <meta content='Your_Logo_Url' property='og:image'/>
          </b:if>
          <b:if cond='data:blog.metaDescription != &quot;&quot;'>
          <meta expr:content='data:blog.metaDescription' property='og:description'/>
          </b:if>
          <!--Optional Meta Tags Add if you want-->
          <meta content='App-ID' property='fb:app_id'/>
          <meta content='Facebook-Profile-ID' property='fb:admins'/>
          <!-- Open Graph Meta Tags END -->

          Customization:

          • The Yellow Highlighted text is responsible for your Blog Logo this means you have add URL of the image which you considered as logo of your blog.

          Optional Meta Tags:

          • The Light Blue Highlighted Text is Responsible App Id. Create an app using facebook developers site you just need to write the app title and click on create then you will get your app id.
          • The Orange Highlighted Text is Responsible For Your Facebook Profile Id or your username add it.
          STEP 4:  All Done Save the Template and Check it in  Facebook Debugger.

          Verifying Open Graph Meta Tags in Facebook Debugger:

          STEP 1: Go to Facebook Debugger Tool page 



          STEP 2: Enter your Blog or Post URL and click on Debug


          STEP 3: You will see all the fetch details.


           Open Graph tags screenshot 2


          STEP 4: If you have added the meta tags correctly then you will see the image with description and title as shown in the image above.

          STEP 5: If you have misplaced the tags then you will not see the image you will get warning on the debugger page the image tag is missing.

          Conclusion:

          After Following this guide you should know what Open Graph Tags are? what is its importance? how it should be implemented in the blog? So if you are feeling confused or lost somewhere then feel free to comment or contact us directly we will try to help you as fast as possible.

          Most of the blogger templates are not open graph tags ready means not optimized for open graph tags. so you should do it by yourself or if you are facing any problems in implementing it then feel free to contact us. 

          Now When you share your posts or Blog home page then you should see the beautiful snippet with the featured image and title. if you are facing the wrong image showing problem then you should add the first image before anything in the post. if the problem not solved then we will help you.


          That's It Thanks For Following our Tutorial '' How To Add Open Graph Protocol (OGP) Meta Tags in Blogger Blog? '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.


          Read More >>