Beginner's guide to Search Engine Optimization (SEO) - SEO Technics and Technical Recommendations

SEO stands for "Search Engine Optimization",  SEO is the process of taking steps to help a website or content rank higher on search engines. It means the process of improving your website to increase its visibility/interaction when people search for products, articles or services related to your requested in Google, Bing, Yahoo and other search engines. The better visibility your pages have in search results.

Search engines provide results for any user requested content or query when enters. So they check and understand the vast network of websites that make up the web. They run a sophisticated algorithm that determines what results to display for each search query.

Below are the SEO Recommendations and start working on Technical SEO

• Find and Fix Broken Images
• Find and Fix Broken Links
• Find and Fix Duplicate H1 Heading
• Find and Fix CSS Error
• Find and Fix JavaScript Error
• Find and Fix HTML Error
• Find and Fix Theme UI/UX
• Find and Fix Mobile Friendly Error
• Use Schema
• Set Sitemap
• Set Robots.txt
• Set Analytics
• Set Google Search Console
• Set Canonical Tag
• Index Issue
• Find and Fix 404 Pages
• Set Redirect Pages
• Set Metadata Box
• Set Site Menu
• Set Site Structure
• Set Permalinks
• Find and Fix Orphan Pages
• Find and Fix thin Content Pages
• Speed Up Your Website
• Use Twitter Card
• Use OG Tag
• Images ALT tags

Onpage SEO

• Use Keywords In The Right Places
• Keep Users On Your Site Longer
• Find "Suggest" Keywords
• Delete Zombie Pages
• Do An Industry Study
• Add Related Keywords to Your Content
• Add Text to Infographics, Podcasts, and Videos
• Update Old Pages
• Keep Users On Your Site Longer
• Create Content Around Shoulder Niches
• Rank In The Featured Snippets
• Improve Your Organic CTR
• Focus on Onpage Content
• Find Long Till Keywords
• Use LSI Keywords
• Create Branded Keywords
• Writing Clickable Post Title
• Writing Readable Meta Title
• Writing compelling Meta descriptions
• Use Internal Link and External Link
• Find Rank Pages for Internal link
• Add “What is X” Definitions to Blog Content
• Use FAQs at the end of Content
• Create a Strategy That Supports Your Business Goals
• Competitor analysis
• Write Content for Home Page, Category Pages, Sub Category Pages, City Pages, Sub City pages, Areas Pages
• If you needed then Write Products Details Descriptions

Off-page SEO

• Get Backlinks From Your Visual Assets
• Find More Outreach Websites
• Getting Content backlinks and inbound links
• Use Sponsor Guest Post
• Social Bookmarking
• Business Profile Links
• Blog Comments
• Question and Ans Websites
• Web 2.o
• Niche Editing
• Create Social Media Profiles
• Update Social Platform
• Slide Share
• Infographic
• Press Release

Local SEO

• Verify Google My Business
• Optimize Google My Business
• Up-to-date Google My Business
• Post content on Google my Business
• Post Products on Google Business
• Post on Business Directory
• Post Images
• Update Events
• Update Offers
• Update Videos

Hope this article is useful for you. If you like please share. If still you have any queries please comment below.

Thankyou

Continue Reading →

How to create simple vertical timeline using HTML and CSS

In this post, we will learn how to build a simple vertical timeline using HTML and CSS from scratch. First, we will create the basic structure with minimal markup and the power of CSS pseudo-elements. We implemented this example without using Javascript and jQuery etc. Please follow the steps to create a basic vertical timeline

Following are the steps to creating HTML and CSS code.

Step 1 : ( Create HTML )

<div class="timeline-wrapper"> 

<ul class="StepProgress">

        <li class="StepProgress-item is-done">

            <div class="bold time">10:00 Am</div> 

            <div class="bold">Step 1</div>

        </li>

        <li class="StepProgress-item is-done">

            <div class="bold time">11:00 Am</div> 

            <div class="bold">Step 2</div>

            <div>Post a contest</div>

        </li>

        <li class="StepProgress-item current">

            <div class="bold time">12:00 Pm</div> 

            <div class="bold">Step 3</div>

        </li>

        <li class="StepProgress-item">

            <div class="bold time">01:00 Pm</div> 

            <div class="bold">Step 4</div>

        </li>

        <li class="StepProgress-item">

            <div class="bold time">02:00 Pm</div> 

            <div class="bold">Step 5</div>

        </li>

    </ul>

</div>

Step 2 : ( Apply CSS Styles to HTML )

<style> 

.bold{font-weight:bold;}

.time{position:absolute; left:-110px;}

.timeline-wrapper {

padding-left:80px;

min-width: 400px;

font-family: 'Helvetica';

font-size: 14px;

/*border: 1px solid #CCC;*/

}

.StepProgress {

position: relative;

padding-left: 45px;

list-style: none;

}

.StepProgress::before {

display: inline-block;

content: '';

position: absolute;

top: 0;

left: 15px;

width: 10px;

height: 100%;

border-left: 2px solid #CCC;

}

.StepProgress-item {

position: relative;

counter-increment: list;

}

.StepProgress-item:not(:last-child) {

padding-bottom: 20px;

}

.StepProgress-item::before {

display: inline-block;

content: '';

position: absolute;

left: -30px;

height: 100%;

width: 10px;

}

.StepProgress-item::after {

content: '';

display: inline-block;

position: absolute;

top: 0;

left: -37px;

width: 12px;

height: 12px;

border: 2px solid #CCC;

border-radius: 50%;

background-color: #FFF;

}

.StepProgress-item.is-done::before {

border-left: 2px solid green;

}

.StepProgress-item.is-done::after {

/*content: "?";*/

font-size: 10px;

color: #FFF;

text-align: center;

border: 2px solid green;

background-color: green;

}

/*.StepProgress-item.current::before { 

border-left: 2px solid green;

}

.StepProgress-item.current::after {

content: counter(list);

padding-top: 1px;

width: 19px;

height: 18px;

top: -4px;

left: -40px;

font-size: 14px;

text-align: center;

color: green;

border: 2px solid green;

background-color: white;

}*/

.StepProgress strong {

display: block;

}

</style>

I hope you like this article very much & Please don't forget to share.

Thank you.

Continue Reading →

How to Create Text Animation Using CSS

In this post I will explain how to create text animation using css. To achieving this we need to use css @keyframes property for animating the text.  so we need to add -webkit, -moz, -ms, -o in front of keyframes property to avoiding browser related issues. 

For Example see bolow:
@-webkit-keyframes NAME-YOUR-ANIMATION {} @-moz-keyframes NAME-YOUR-ANIMATION {} @-o-keyframes NAME-YOUR-ANIMATION {} @keyframes NAME-YOUR-ANIMATION {}

#box { -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */ }

Following are the steps to creating HTML and CSS  text animations. 

Step 1 : ( Create HTML )

    <p>I'm a</p>

    <b>
      <span>
        web developer<br /> 
        css cowboy<br />
        self-facilitating media node<br />
        box inside a box<br />
        part of the problem
        </span>
    </b>

Step 2 : ( Apply CSS Styles to HTML )

        body {
          padding: 2em 5em;
          font: normal 40px/50px Arial, sans-serif;
          color: #999;
        }
        p {
          height: 50px;
          float: left;
          margin-right: 0.3em;
        }
        b {
          float: left;
          overflow: hidden;
          position: relative;
          height: 50px;
        }
        span {
          display: inline-block;
          color: #FF6633;
          position: relative;
          white-space: nowrap;
          top: 0;
          left: 0;
          -webkit-animation: move 5s;
          -webkit-animation-iteration-count: infinite;
          -webkit-animation-delay: 1s;
        }
        
        @keyframes move {
            0%  { top: 0px; }
           20% { top: -50px; }
           40% { top: -100px; }
           60% { top: -150px; }
           80% { top: -200px; }

        }

I hope you like this article very much & Please don't forget to share.

Thank you.

Continue Reading →

Form Processing Steps Design Using HTML & CSS

In this post I will explain how to create form processing steps design using HTML and CSS. You can directly copy and paste the below code in your working code. And in this post I am not using any Javascript or Jquery related validations. Just giving an idea about design perspective. In next post I will provide validations too.  To implementing this design please follow the below steps.

Step 1 : ( Create HTML List )

<ul>

    <li class="flag">

      Item Details

    </li>

    <li class="flag">

      Shipping Address

    </li>

    <li class="flag">

      Payment

    </li>

    <li class="flag">

      Conformation

    </li>

</ul>

Step 2 : ( Apply CSS Styles to HTML List )

* {
  box-sizing: border-box;
}
ul{margin-top:100px;}

li{
  float:left;
}
.flag {
  width: 200px;
  height: 50px;
  margin: 0 auto;
  padding-top: 18px;
  position: relative; 
  background: #f36633;
  color: white;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  list-style:none;
}
.flag:before {
  content: ' ';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 25px solid white;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
}
.flag:after {
  content: ' ';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-top: 25px solid white;
  border-left: 25px solid transparent;
  border-bottom: 25px solid white;

}

I hope you like this article very much & Please don't forget to share.

Thank you.

Continue Reading →

Back to top page scroll using Jquery, CSS, HTML5

Hi, Today i will explain about how to scroll page to top from bottom.

This "Back to top" link allows users to smoothly scroll back to the top of the page. It's a little detail which enhances navigation experience on website with long pages.

This resource is suitable for website with lots of page content. The link fades in on the right-hand side of the content area, after the browser window has been scrolled beyond a certain point, and remains fixed during scrolling.

If users keeps on scrolling, the button nicely reduces its opacity to be less distracting during navigation.

Below is the working code you can directly copy and paste ,

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
      $('body').append('<div id="toTop" class="btn btn-info"><span class="glyphicon glyphicon-chevron-up"></span> Back to Top</div>');
    $(window).scroll(function () {
if ($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
    $('#toTop').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
});
</script>
  <style>
 #toTop{
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
display: none;
}
  </style>
</head>
<body>
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

</p>

</div>
</div>

</body>
</html>

I hope you like this article very much & Please don't forget to share.

Thankyou.

Continue Reading →

Animated “x” icon for the Bootstrap navbar-toggle using CSS (Or) Hamburger icon animation using Bootstrap and CSS

There are lots of posts online about that trendy (and awesome) transition from the hamburger icon (when the menu is collapsed) to that “x” (when the mobile menu has been expanded). This should be pulled off by CSS3 animations, of course.
Below is the code , you can copy and paste ,run directly..

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .navbar-toggle {
  border: none;
  background: transparent !important;
}
.navbar-toggle:hover {
  background: transparent !important;
}
.navbar-toggle .icon-bar {
  width: 22px;
  transition: all 0.2s;
}
.navbar-toggle .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
  opacity: 0;
}
.navbar-toggle .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
  transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
  opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
  transform: rotate(0);
}

  </style>
</head>
<body>

<div class="container">
  <!-- Static navbar -->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar top-bar"></span>
          <span class="icon-bar middle-bar"></span>
          <span class="icon-bar bottom-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
          <li><a href="../navbar-static-top/">Static top</a></li>
          <li><a href="../navbar-fixed-top/">Fixed top</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
  </nav>

  <!-- Main component for a primary marketing message or call to action -->
  <div class="jumbotron">
    <h1>Navbar example</h1>
    <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
    <p>
      <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
    </p>
  </div>
</div> <!-- /container -->

</body>
</html>

I hope you like this article very much & Please don't forget to share.

Thankyou.

Continue Reading →

How to apply styles on a HTML input type "file" in Pure CSS

Bootstrap doesn’t have a designated component for a file upload button. In IE you will face cross browser issues,  To avoiding cross browser issues  i have found a solution. A simple and elegant solution using only HTML and CSS can be achieved with the following sample code,

Before write your html code you need to add required jQuery and bootstrap files in your <head> section.

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Here is your HTML Code,

For ( IE 9+ )
For  this you can use this Modern Approach. Let's start by keep a button inside a <label>, adding the appropriate button classes to style it as we need,

<label class="btn btn-default btn-choose-file">
      Choose file from your PC <input type="file" style="display: none;">
</label>

For ( IE 8 and its below)
For this you can use this legacy approach. If you need support for old IE (below 8), Instead of a <label>, Keep your button in a <span>:

<span class="btn btn-default btn-choose-file">
           Choose file from your PC <input type="file">
</span>

And then apply the following CSS. you can use this CSS code for both methods.

.btn-choose-file {
    position: relative;
    overflow: hidden;
}
.btn-choose-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 20px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: #DF474B
    color:#ffffff;
    cursor: inherit;
    display: block;
}

I hope you like this article very much & Please don't forget to share.

Thankyou.

Continue Reading →

How to display thumbnail preview link on whatsapp

Hai Folks,

In this article i will explain how to display thumbnail preview link on whatsapp with simple steps. and i ll add example screens in soon. In previous article How to share content on whatsapp using jQuery ( Title, Link,  Thumbnail etc.. ) we can see how to share content like Title, Description, Any links etc using whatsapp.

For this there is a concept meta tags in html. By using this meta tags we can easily add title, thumb, description, site name etc. you need to add these meta tags in side of <head> </head> section. After you have changed your meta tags, you might need to wait a while for possible caches to update.

The following meta tags are used for solve the problem:

<meta property="og:site_name" content="Site-Name-Here">
<meta property="og:title" content="Site-Title-Here" />

<meta property="og:description" content="Site-Description-Here" />
<meta property="og:image" itemprop="image" content="Image_url here">
<meta property="og:type" content="website" />
<meta property="og:updated_time" content="1440432930" />

The meta tag property og:image is enough for getting thumbnail.

If you still facing problem after adding above tags you can add following two kind of code in your page.

First, Add meta tag og:image inside of <head> </head> section.

<meta property="og:image" content="url_image">

Second, Thumbnail schema from schema.org inside <body> section

<link itemprop="thumbnailUrl" href="Image_url here"> 

<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject"> 
      <link itemprop="url" href="Image_url here"> 
</span>

I hope you like this article very much & Please don't forget to share.

Thankyou.

Continue Reading →

How to share content on whatsapp using jQuery ( Title, Link, Thumbnail etc.. )

Hai my dear blog readers,

In this tutorial I will help you to share web content on whatsapp using jQuery. Most of the Smartphone users using whatsapp, so using this script you can implement whatsapp share button with your article, which will be very helpful to share article with your friends, colleague etc.

We are using HTML5 attributes data-text for article text and data-link for article URL. Once we click on share button, using jQuery and encodeURIComponent function we created the full message and share on whatsapp.

Here is the code regarding this please copy and paste code as it is.

Here we need to add jQuery CDN from google. If you have this file in your local you can load from there with latest one. You can add this file  <head> </head> section (or) bottom of page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

HTML Code:

<a data-text="How to share content on whatsapp using jQuery.." data-link="http://tekinfotree.blogspot.in/" class="whatsapp whatsapp-btn btn-large">Share on Whatsapp</a>

CSS Style:
.whatsapp-btn {
            background-image: url('');
            border: 1px solid rgba(0, 0, 0, 0.1);
            display: inline-block !important;
            position: relative;
            font-family: Arial,sans-serif;
            letter-spacing: .4px;
            cursor: pointer;
            font-weight: 400;
            text-transform: none;
            color: #fff;
            border-radius: 2px;
            background-color: #5cbe4a;
            background-repeat: no-repeat;
            line-height: 1.2;
            text-decoration: none;
            text-align: left;
        }
        .btn-small {
            font-size: 12px;
            background-size: 16px;
            background-position: 5px 2px;
            padding: 3px 6px 3px 25px;
        }
        .btn-medium {
            font-size: 16px;
            background-size: 20px;
            background-position: 4px 2px;
            padding: 4px 6px 4px 30px;
        }
        .btn-large {
            font-size: 16px;
            background-size: 20px;
            background-position: 5px 5px;
            padding: 8px 6px 8px 30px;
            color: #fff;
        }
        a.whatsapp { color: #fff;}

jQuery Code:
$(document).ready(function() {
    $(document).on("click",'.whatsapp',function() {
        if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {   
            var text = $(this).attr("data-text");
            var url = $(this).attr("data-link");
            var message = encodeURIComponent(text)+" - "+encodeURIComponent(url);
            var whatsapp_url = "whatsapp://send?text="+message;
            window.location.href= whatsapp_url;
        } 
        else {
              alert("Oh Sorry! Please share this content in mobile device");
           } 
    });
});

The encodeURIComponent() function encodes a URI component. This function encodes special characters. In addition, it encodes the following characters: , / ? : @ & = + $ #

The IF statement is used to identify the mobile device because In desktop, whatsapp share will not work.


I hope you like this article very much & Please don't forget to share .

Thankyou

Continue Reading →