A Complete Guide To On-page Optimization – Techniques – Tools & Implementation


Table of Contents

Get in Touch

Set up a free consultation to see how Esferasoft can bring your vision to life.

We all better understand what is on-page optimization and what it can do for our website ranking. Let’s once again dig deeper into the importance of on-page optimization and how it can be done the right way.

All the actions we take on a web page for the improvement of the website comes under the umbrella of on-page optimization. It is important for user experience as well as Google bots that analyze a website first on the basis of on-page factors and position it on the SERP accordingly.

GOOGLE BOTS very keenly look into a website for gathering the information and indexing them in search database that comes back to the users in the form of results.

When you know how Google bots see a website and what are the factors that matter it the most, it becomes easier for you to ranking a website higher in search engine results.

Let’s start with

Meta Tags

This is the first thing captured by a user and the search engine both that describes the summary of a web page. It helps the Google to relate a web page to the query of a user and add that web page to the list of results shown on the search engine result page.

There are certain rules for meta tags that need to be followed for connecting your website to the right query that your consumer expects.

If meta title and meta description are irrelevant, Google will not get the right signal and may connect your web page to the wrong query or the query that best suits your meta title and description. And here your competitor’s website will win the chance of getting a click by the user.

URL (Uniform Resource Locator)

On-page optimization is required for making a web page more search engine friendly and URL structure is another important factor that helps a user to understand what is on the web page before clicking it.

See the flow of a URL structure:

Every URL structure has minimum 4 parts

1. https:// or https://
2. www.business-name
3. Category
4. Page name

structure will make you understand how a url should be.

After reading this url you would understand that this web page is about the benefits of react native and the reader who is looking for this information would click this url.

Now see this below-given url structure which you will find difficult to understand. You wouldn’t know what this page is all about. So neither you nor anyone else is going to click such a url. You must construct a clear and easy to understand url that shouldn’t contain meaningless strings of characters.



When a website opens with two urls that lead to URL canonicalization.

For example:


These both urls are resolved to the same page. If it happens search engine assumes that these two urls are different one but resolved to the same page and mark them as duplicate content and cause to penalties.

How To Perform Canonicalization Test

For example, your actual website url is https://www.domain_name.com/

Step #1

First, enter https://www.domain_name.com/ with www. in the search bar, it should resolve to the same page url that is https://www.domain_name.com/.

Step #2

Now enter https://domain_name.com/, without www. in the search bar and it should also resolve to the same page url that is https://www.domain_name.com/.

If the result page url is the actual website url in both the cases, it means your website has passed this test successfully and doesn’t have any duplicate content.

But if your website doesn’t pass this test, means it has two urls then you must fix the canonicalization. But if you wish to represent the same page with two different urls then you must use the ‘canonical tag’ in order to indicate the search engine and get relief from penalties.

How to use canonical tag?

If you want the same web page to be opened with two different urls then you must use a canonical tag with one of those two urls.

The syntax will be applied as shown below:

<link rel=”canonical” href=”https://domain_name.com/”>

Heading Tags

Heading tags are less for search engine optimization and more for user experience but still giving the added benefits of increased click-through rate. It is the most effective way to communicate to the reader as well as the search engine about what all can be found on the web page.

It helps to categorize a web page into small sections which make it look more meaningful and understandable. Heading tags ranges from h1 to h6 with the top-down hierarchy from <h1> to <h6>but the H1 tag is more important that optimizes the entire web page.

Benefits of heading tags:

  • Search engine gives priority to those keywords that are found with heading tags.
  • A heading confirms the users that they are in the right place and will find what they are looking for.
  • Heading helps to divide the content into scannable blocks that make a web page look better.

How to use heading tags:

Usually, first three heading tags carry the most SEO value. Headings are not the things that can be placed anywhere on the page, it has their own place and value on the web page and has to be aligned properly to see the positive results.

  1. <h1> tag can be used as the second title tag of the page (first is Meta Title) that tells what is most important on the page.
  2. <h2> tag is used as the subheading of the page that supports the <h1> and the overall theme of the page.
  3. <h3> tag is used as the subheading of the page that helps to relate the above two headings with the <h3>.
  4. Heading tags have to be SEO optimized and for that keywords must appear in heading tags.

You may consider <h4>, <h5> and <h6> as well according to the content of the page.

How to check which heading tags your website is using?

  1. Go to the URL of the page you want to check.
  2. Then go to the view source page either by pressing Ctrl+U or by giving a right click on the page then select the option of ‘view source page’.
  3. Go to find option and type <h1> and click Enter button, it will highlight you where the <h1> tag is placed and what text is used for heading.
  4. 4. Click find next button to highlight all of the sections of the page where <h1> tag is used, following this procedure you can find other heading tags as well targeting any page of the website you wish to check.

Image Optimization

Image optimization is important not only for the readers but for Google too. Google can’t recognize an image unless it is optimized with image alt text which tells what the image is all about and helps Google to rank an image.

For instance, a picture of a book with the name “xyzdfd874.jpg” would be more difficult for the search engine to recognize in comparison to the picture name “book.jpg”.

How to check whether an image has been given the alt text or not?

    • Go to the view source page, press Ctrl + F and type alt=

In the above image the space between the inverted commas is blank, it shows that this image is not given the alt text. In the similar way one can check all of the image alt tags and ensure they are properly optimized.
Apart from image alt text, image title and caption are equally important and needed to be defined with targeting keywords to increase the chances of ranking higher in search results.

Image compression

Image compression is another important aspect of image optimization that reduces the size of an image file without degrading the quality of an image. The reduction in the size of an image file allows to store more images in the available memory and also contributes to faster image sending over the internet or downloading from the web pages.

Image compression tools like ‘JPEG Optimizer’ can easily compress and resize an image file according to need.


On the web, content is the only way to describe your product or services. A content is useless if it doesn’t supply a demand, it can be in any form either in video, image, sound or text but it must have two properties: 1. supply a demand 2. must be linkable.

While drafting content your first intent should be for the readers and second for the search engine. The more detailed content increases the chances of getting better rank in search results and also entice the readers to make them stick to the website.

  • A general web page should contain 500 + words with appropriate use of focus keywords.
  • For e-commerce web page 100+ words are suffice.
  • Use 2-3 focus keywords in first few paragraphs.
  • Use bold or italicized formatting to draw attention of readers.
  • From the body content, link to other pages of the website.

Keyword Density

Keyword density is the number of a keyword appears on a page divided by the total number of words found on that page. Generally, keyword density should not exceed the limit of 3% it means if a web page contain 100 words then its keywords can maximum appear three times on that entire page.

Some webmasters exceed the limit of 3%, believing that increased number of a keyword appearance would also increase the chances of its ranking higher in search results, but they seem less aware of to be considered as spammers.

Note: The keywords should appear naturally within the content without impacting the actual meaning of the sentence.

Loading Speed

Today nobody has time to wait for a website to be opened especially when there are number of options available that can solve the same purpose which can do yours.

Research says that half of the users expect a website to open in 2 minutes or less if it doesn’t open, users are more likely to bounce to other website. And despite of having all attributes and features your website will not get the user’s attention just because of slow loading speed.

You must work on improving the loading speed, here are few of techniques which you can easily apply to your website pages.

  • Compression: A heavy web page makes a website slow to download. The right approach is to zip the heavy pages using a tool called Gzip which reduces the bandwidth of the web pages that subsequently reduces the HTTP response time and loads a web page faster.
  • Decrease HTTP requests: When a web page is loaded, browser sends the HTTP request to the server. The number of HTTP requests depends upon the number of components used on the web page. The 80% of loading time is contributed by the loading of HTTP requests so you must reduce the number of components on the website by using CSS instead of images where possible, combining multiple style sheets into one and reducing scripts.
  • Browser Caching: When a web page is visited first time, the elements are stored in a cache so when you visit the same web page again, browser doesn’t need to send HTTP request again to the server which saves lot of time and opens that web page quickly in no time.
  • Optimize Images: Heavy images take longer to load. The oversized images must be cropped to the correct size and if possible remove image comments that unnecessarily slows down the loading speed. And when you are uploading the image, must include the image src attribute (<img src=””>), and put the source in the quotation marks so that the browser does not make a request to the directory for the same.

Let’s supercharge your website with accurate on-page optimization that Google accepts and counts excessively.

Note: All suggested tools and techniques are tested and applied prior mentioning here above in the article.

Edit Content


Plot No. F5-F6 Phase 8, Industrial Area,
Mohali – 160055 Punjab, India
Edit Content
Click on the Edit Content button to edit/add the content.


Have a web or mobile app project in mind? Let us discuss making your project a reality.

Email Sent

Your submission has been received.
we will be in touch and connect you soon