Web Design Tips for Search Engine Optimization | WebReference

Web Design Tips for Search Engine Optimization

By Sukrit Dhandhania


With so many websites being added to the Web all the time, bringing visitors to your website becomes increasingly difficult. SEO, or search engine optimization, is a key technique for making your site appear to as many web users as possible. My previous article explained how to use keywords to help your SEO efforts. In this article, I offer some tips for making the design and code of your website search engine friendly.

Plan Your Design with SEO in Mind

A common mistake among inexperienced web designers is to design and create the website first and then think about SEO as an afterthought. As a result, the SEO often suffers from a compromised implementation. A more effective approach might be to consider what your SEO plans are at design time. This way, neither your design nor the search engine optimization will have to be compromised.

Use Header Tags

Using the right HTML tags is one of the most important styling techniques for making your code search engine friendly. Header tags, such as h1, h2, and h3 are HTML tags that make the words between them stand out as bold, big text. These tags are mostly used for page or paragraph titles. Search engines also use these tags to determine which information is more important. So it's important to use these tags carefully and according to the norms suggested by search engines.

Use these tags in descending order from large (h1) to small (h3). Depending upon how many sections and subsections you have on each page, the way you would implement your header tags would be something like this:

The h1 header tag is the largest font. The h2 tag is smaller than the h1 tag but larger than the h3 tag and so on to h6. So it seems to me a very logical way for search engines to figure out which section of content is more or less important. I strongly urge you to use this method to organize your data.

If you want to take advantage of the SEO benefits that come with using header tags in this order but do not necessarily want to display them in this order, you can use CSS. For example, if you want all your headers to have the same font size, add the following to the CSS for the page: