SEO friendly HTML code optimization

Posted By : Ravi Kumar | 30-Jun-2014

SEO friendly HTML Code

There are a lot of discussions on web that describe how should we write HTML code that is SEO friendly in an optimized way. I will share some knowledge about why we should write HTML code SEO friendly.

First of all we'll see, what is meant by SEO friendly HTML.

The process of making web documents or web sites "search engine-friendly" - basically known as SEO, probably the most important aspect of web design. It consists several aspects that make easier to search web contents and quick response over the huge traffic on internet.


Correctly formatted HTML code helps ensure that all pages are indexed correctly without any major roadblocks. Legible code and better approach make web site documents to be easily searchable and reduced the internet traffic roadblocks and ranking on internet.



There are some aspects to remember during writing SEO friendly code and legible HTML code are :


  • Title tag
  • Meta description
  • Headings, subheadings and anchor tags
  • breadcrumbs


Points to remember :



Title tags


We should provide unique titles for each web page with unique meta descriptions.

e.g.: 1) <title> category | Page Description</title>
2) <meta name = "description" content="A unique meta text" />


For Dynamic pages with server side code should be modified title dynamically specially for single page applications.


Title should be compact and with distinct keywords for specific pages.


e.g.: 1) <title>HTML5 - Wikipedia, the free encyclopedia</title>
2) <title>The Grails Framework 2.3.11<title>
3) <title>top 10 technology websites</title>


It would be best if avoid to provide only name of company or name of page.


e.g.: 1) <title>Oodles</title>
2) <title>Home Page</title>


A better approach should be used. e.g.: <title>turning technologies into elegant solutions - Oodlestechnologies</title>



What should remember while tags / title tag :


  • Do not use stop keywords because these words mostly ignored by search engines.
    e.g. : "by", "as", "it", "am", "or", "but" etc.
  • High priority keywords are respond quickly.
    e.g. : "top", "most", "highest" etc.
    "Top 10 efficient features - HTML5",
    "Most common mistakes while code - HTML5"
  • Do not put too many words
    This constitutes a practice known as keyword stuffing to attain better search ranking. If we do so this technique affects.
  • Title texts should contain less than 69 characters. Major search engines show only first 69 characters as the title of web pages in their SERPs while yahoo shows 72.
  • Hyphens(-) or pipes(|) both will make it easier for users to scan the content of title tag. SEO perspective hyphens(-) have added advantage that they enable us to rank for different keywords while listing them only once.
  • Key-phrases should be used instead of keywords. It will attain a higher ranking in search engines.
  • Numbers : most prominent and clarify the users what they would find in content.
    e.g. : "Top 10 ranking websites in the world" ,
    "Top 50 excellent tips - HTML5"
  • Avoid commas(,) and special characters.




  • Remember that we are writing code for users not for search engines. Search engines looks for the keywords in particular they would want readers to read quality content. We'll need to make sure that the content is interesting and add value to users.
  • Keywords : Should be used better keyword placement and meta content/description.
  • Paragraph contents should be short and more meaningful. Most of the users hates the long paragraphs and huge text contents.
  • Categorize the page contents with headings. SEO mostly preferred headings, but don't use many <h1> tag on a single page. Subheadings should be preferred.
    e.g.: <h1>Top examples of title tag</h1>
    <h2>Most important aspects</h2>
    <h2>Exactly what does SEO</h2> etc.


Relevant Linking :


Hyperlinks should be always relevant and make sure that we explain the relevancy of that page very clearly. If this not then it would surely annoy users.




Breadcrumbs present an important role to make website more search engine optimized.

  • Compact and easily gettable keywords
  • Categorize pages
  • Help SEO to trail results


Points to remember for breadcrumbs :


  • They are like secondary navigation so never replace primary navigation
  • They should not too large, trail should be less
  • Start with main pages mainly home page
  • Should be used simple links for each level
  • Should be placed top of the page
  • Full page title should be used in trail of breadcrumbs


I hope you got some good information from here.



For more discussion and help, please contact me on :, skype : or Visit :





Ravi Kumar

About Author

Author Image
Ravi Kumar

Ravi is a creative UI designer with experience and capabilities to build compelling UI designs for Web and Mobile Applications. Ravi likes Tech Quizes and playing Football.

Request for Proposal

Name is required

Comment is required

Sending message..