Coding a Design: SEO Best Practices and Mistakes to Avoid

For any online business, website has become the foremost important asset. It is really indispensable that it should be designed and developed in a way that it facilitates and boost the business activities and ultimately become the revenue generating medium for the business. For this, it is quite important that the website has to meet all your specific business requirements and latest trends of social media. One of the important factors which adds to the success of the website is its organic rankings. Getting ranked higher on search engines (for certain important business specific keywords) is an important way to find the potential customers of any business.

Coding a Design: SEO Best Practices and Mistakes to Avoid

Making a website is not a single stage phenomenon. But it has different stages. Different aspects of website designing and development contribute to making website a success. PSD to HTML is an important part of web development.

Let’s see how it helps to make a website search engine friendly. Scroll down to see the SEO best practices that can be incorporated in the coding part and mistakes to avoid while coding.

You may be interested in the following related articles as well.

Feel free to join us and you are always welcome to share your thoughts that our readers may find helpful.

Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.

SEO Best Practices

Important Keywords in Title Tag

instantShift - Coding a Design

Title tag is indeed an important factor to rank a website higher on the search engine result pages. You need to place important keywords in the title tag. Even if you don’t want to do just keywords stuffing, you can keep some interesting, business relevant and eye catching caption that can actually grab the attention of the potential customers. But it ought to have few business specific keywords so as to appear in the searches when the searcher type in the particular keyword so as to get the names of all the service providers/ product makers. Even, if you have chosen to keep a unique title tag, you need to search first for that tag in all major searched to check and avoid the replication if it exist. Try to compress all your keywords in the first 60-70 characters of the title tag because Google does not even index after that.

Use Unique Page Titles

instantShift - Coding a Design

All the pages in a website should have a separate title attribute and it has to be unique. If you are keeping the same title attribute for all the pages, and then search engines, by default, make out an assumption that there is same subject in all of the web pages. In order to keep away from this kind of confusion, place different unique titles in all the web pages.

Meta Attributes

instantShift - Coding a Design

Meta description and keywords also play an important role and facilitate search engine optimization. It helps the search engine crawlers to better locate a web page. Meta description is like a mini ad for any website. It briefly describes about what the website is all about! You may add some important keywords and need to describe the website in few words. It will also show up in the SERPs along with the title tag and hence carries huge importance. Also, with this, you need to write meta keywords that also help in search engine optimization of the website.

Images should be tagged too!

instantShift - Coding a Design

If you think that there is no need to tag the images, then my friend, you are at fault. Even images help in the search engine optimization of the website. Make use of alt tag to briefly describe the image. Search engine crawlers can’t see the image, however they can read the tags attached. You may lose significant amount of traffic if you have not done this.

Avoid using Generic Links

Avoid using the generic terms to give links to other web pages. This may lessen the probability of getting clicks. Like if you are giving a hyperlink to “Learn more about SEO”, then it is more recommended than to using simply “Learn more”.

Wise Choice of Anchor Text of Links

instantShift - Coding a Design

We usually build up good number of incoming and outgoing links. It is very important that you make a wise choice of anchor text of links. The anchor text is the text which is kept between <a> tag. It should briefly describe about where the link is taking the visitor to. This is even more important for search engines because it tells its crawlers where the link is going.

Use Ajax Rarely

Ajax has been found to be quite useful to enhance the users experience by generating dynamic pages that are the representations of powerful web apps. The major problem with Ajax sites is that while Googlebot is great at following and understanding the structure of HTML links, it can have a difficult time finding its way around sites which use JavaScript for navigation. Similarly to Flash, Ajax makes it tough for the search engine bots to crawl if it has not been implemented tactfully. While we are working to better understand JavaScript, your best bet for creating a site that’s crawlable by Google and other search engines is to provide HTML links to your content. So Buddy! If you have just started working on a website, it is better to make up its navigation structure using HTML links. Then, once you have the site’s pages, links, and content in place, you can spice up the appearance and interface with Ajax. With this, Googlebots would be happy to see their friendly HTML codes, while your visitors can take out the benefits of designing with Ajax.

Robots.txt File

Creating a robots.txt file is really important for search engines to effectively navigate and index a website. It is said that well written robots.txt files can go a long way in improving the search engine rankings by passing on important information to the search engine bots. It simply tells crawlers what to crawl and what no to. It avoids relating the irrelevant things to the website which let the website to look quite professional and clean in the eyes of search engine crawlers.

Proper use of heading tags

instantShift - Coding a Design

You need to make a proper use of header tags. These play an important role in making a website search engine friendly. Basically, there are six levels for header tags i.e from h1 to h6. The <h1> tag represents the largest font size and thereby the size decreases with each next level header tag. Search engine gives significant importance to these header tags because they define the pathways within the website.

Site Accessibility and Usability

instantShift - Coding a Design

These days, people access Internet through number of devices like smartphones, laptops, mobile phones, iPads, palmtops and so on. So, it is very important to check the accessibility of your websites on all these browsers. For this, you need to ensure the validity of HTML coding, functionality of pages, uptime of server etc. If you are lacking on all these issues, your website may look not as pretty as you want to be, this may annoy your visitors. Remember, an annoyed visitor is a lost visitor. On the similar note, if your website has poor usability, you might lose some of your potential customers.

Mistakes That Need to be Avoided While writing HTML and CSS

Well! It is not only about beginners who commit mistakes while writing HTML, even experts do errors in coding due to carelessness or might be due to lack of knowledge. So, we have enlisted all those mistakes that usually become a part of our project work, but that we need to avoid :

Improper Closing and Nesting of Tags

instantShift - Coding a Design

This error is quite common specially in beginners, but not so less common in experts. There are number of tags that need to be closed, otherwise these can distort your HTML structure and hence can affect the accessibility and usability of the website. Not just this, it is very important to open and close tags in the proper order. The tag which is opened first need to be closed first.

Capitalizing Tags

This happens to be a bad practice, but however it does not affect the validity of HTML coding. But just to sooth the eyes of search crawlers, make it a habit of writing all the tags in lowercase.

Incorrect DOCTYPE!

instantShift - Coding a Design

Since new browsers can handle more complicated things. In order to let your browser know what type of html you’re using, you need to call a specific DOCTYPE. This will make them learn how to display your content. It could be HTML 4.0 or XHTML and that too strict or transitional. The browser cannot make a guess out of it.

No Encoding of Special Characters

instantShift - Coding a Design

You need to be particular about writing the special characters. Just by writing it on MS Word and copying it from there to the website content area will not going to work properly in all the browsers. Doing this, can give up some kind of errors in some browsers.

Using Tables for Layout

It is time to upgrade yourself with the latest trends of the web. Tables were quite in use 10 years back. But now we are not using tables anymore. Using CSS would be a great option instead of tables. It will save on your time and efforts. Harness the power of CSS!

Using Automated Coding Software

instantShift - Coding a Design

In order to increase the efficiency of the work, using automated software seems to be good option. But actually, these are not reliable and cannot match the power of writing the codes manually. The automated coding may not be bug free and may affect the functionality of the website. The codes, thus produced, are sloppy and unprofessional. The probability is quite high that these would not be even able to clear W3C validation.

Mixing Single and Double Quotes (Even Missing it!)

You need to stick either to single quotes or the double quotes. It is a very common practice that developers mix both the quotes that can lead to the errors. Sometimes, we do even miss to close the quotes that can also generate some kind of errors.

Inline Styling

instantShift - Coding a Design

However, it may not distort your HTML structure or produce any error. But to be at ease in the future and allows easy editing, make a habit to add your CSS codes in a separate CSS file.

What About You?

What mistakes have you done while coding out the websites? What best SEO practices you have incorporated in your coding practice? Just write in the comments below and let us know!

Image Credits

Find Something Missing?

While writing this article, it’s always a possibility that we missed some other great tips. Feel free to share it with us.

Like it? Share it.

52 Comments

  1. Great tips and advice! When coding a website I usually make the mistake of “Improper Closing and Nesting of Tags”. Soemtimes I am just writing too fast and forget to close a tag or place it in the wrong order. I know space out everthing and put end comments to all end of divs or classes.

  2. It is robots.txt, not robot.txt file. Please change it fast. ;] Again, great article!

  3. Important tips, great post

  4. Its very useful tips..and correct point on mistakes to avoid..Thanks for share

  5. The main thing I wind up doing is not checking my sites is not checking the H1 tag. One thing I wished was mentioned is that, even though search companies put a lot of weight on title tags, the H1 is just about as important and basically doubles as a title tag.

    ….or so I heard.

  6. Thanx So Much very Helpful post

  7. Nice ! ! !
    That nice article post for build a new website do you that technique.
    This a best tips of build a search engine friendly websites ! ! Really your web site represent a Search engine ranking …

    Thank You for given a important tips.

  8. Thanks for making us a part of your blog!

  9. most of these tips are old news and some don’t even apply any more. also, it wouldn’t have hurt to let someone check the article for correct grammar and spelling. not a very pleasant read…

  10. Nice post and good tips!

    I may add that not only the keyword usage in Title is important but its prominence and closeness to the beginning of the line is essential too.

    Some straightforward guidelines for HTML and CSS creation as well mistakes to avoid in the post [..URL..]

  11. Very nice post. Can you create one more with more details on SEO Practice?

  12. Good SEO Article.. Thanks a lot.

  13. One of the mistakes I often see is use of lots of links at the bottom of the page. The used to work like 6-7 year ago but SE are improved a lot since then.

    If a site functions well and provide valuable information about a certain topic, it will most likely will rank well depending on the competition.

  14. Nice tips. Very useful. Thanks for share this wonderful post. :)

  15. @Luke, @Marcell. I am glad that you liked my post! Thanks for the good words.

  16. These are great tips for helping your sit with search engines. Another thing that I do for clients is add key words/phrases to the footer of their sites as well — also using keyword specific links.

  17. experience is the best, more practice is the best thank lot bro
    for this nice seo tutorial
    byme

  18. Nice post and great tips.

    Wanted to add that not only the keyword usage in Title is important but its prominence and closeness to the beginning as well. Don’t put to many – just the main words

  19. Amazing Topic Thanks Justin

  20. A really helpful article, thank you!

  21. Meta keywords tag? Who is still using that other than as a safety net, Google, Bing and Yahoo dropped that years ago.

    I swear that some SEO advice comes straight out of 2004 and never moves, just stick to the same tried and tested methods, send an invoice.

    “Yeah, get the designer/developer to add all this meta junk to the head of all the files and you’re good to go, good luck!”.

    The rest is good advice if not a little basic. I was brought here via a Twitter link and was hoping for some more tips.

    Just throwing this out there, adding a title=”” tag to your a hrefs is pretty handy advice.

  22. @Byme @Innova @Dselva I am so glad that you liked my post!

  23. I agree with Phil.
    Old tips and a bulky read.

  24. Very nice tips you have mentioned, I like this blog a lot though always read it silently… :)

  25. Good SEO Article.. Thanks a lot.

  26. Meta keywords are obsolete for years. Stop spreading outdated advice.

  27. helping article. thanks

  28. Phil and Joel are right on. Old information available on any seo blog.

    But it got me to your site and made me post. I guess the article did its job.

    One correction:
    “The tag which is opened first need to be closed first.”
    That, of course, is totally wrong.

    First opened is last closed. Basic HTML.

  29. wow, its really wonderful. Your tips is very useful.

  30. Great advice! Although not having started SEO specifically at Creare yet, it’s these sort of specific issues that will crop up. To have somewhere where they are all pointed out so clearly really will help the overall success when I do start.

    I would agree though that some of the info isn’t quite right, and even I know that it isn’t, such as the tagging as stated above, however a good read overall.

  31. Great article. Hopefully all those people that say its not necessary to check code using W3C will read this and figure out why its important.

  32. This is a really helpful article. There are a lot of great resources and good info in here to keep in mind.

  33. thanks for the helpfull information…

  34. its great tips

  35. Nice, thanks i like it so much

  36. Tips dan Tulisan postingannya bermanfaat, saya dalam ide baru dari postingan ini. Terima kasih banyak
    [Translation]: Postingannya Writing Tips and useful, I am in new ideas from this posting. Thank you very much.

  37. it’s very understood that the article important for increase benefit one of website. thanks for your advice.

  38. Many knowledge and information I got from your site, especially about SEO, looks like I have a lot to learn, thanks and greetings of friendship

  39. wow, its really wonderful. Your tips is very useful.

  40. oh the irony….tags in the correct order – you got in the wrong order.
    And google confirm they do not use meta keywords for ranking purposes – this does not mean they don’t use them at all or won’t change their stance in the future. Plus, other sites (directories for example) use them for categorisation, search etc so for the sake of seconds per page what’s the harm

  41. Our goal is to become # 1 on the backlink information providers.
    Here too well and good backlinks in alexa.
    Thank You Friend

  42. wow ! what a nice work!!

  43. i’m a beginner in SEO practice..
    do you have any article/posting that i should read before this one?

    thanks

Leave a Comment Yourself

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>