Essential Guide to Creating SEO Friendly Website Design	Visited: 4071 4.7/5.0 (25 votes total) Rate: Select 1 - Terrible 2 - Poor 3 - Average 4 - Good 5 - Outstanding
by Matthew Jurmann October 08, 2007

Assembling an SEO friendly website design is not rocket science, but there is a methodical way to go about doing it. We've compiled a list of the most important things that a SEO friendly website design needs in order to have a solid foundation for its search engine optimization campaign. Whether you're an amateur web designer attempting to integrate SEO into your website or a professional web designer looking to refine your approach to creating SEO friendly website design, this guide has something for everyone.

The process of creating a successful search engine optimization campaign can be compared to the construction of a new building - without a solid foundation (SEO friendly website design), the building (your website) won't be sturdy or safe to occupy. Ultimately, the risk of the building collapsing (your website SEO campaign failing) significantly increases because of a poorly constructed foundation.

Note: For the sake of sounding redundant and unoriginal, we have omitted the inclusion of 'meta' tags (except for the andlt;titleandgt; tag) from our list since everyone and their mother talks about the importance of meta tags. If you need information about meta tags and how they relate to SEO, please visit SearchEngineWatch.com.

The SEO Friendly Website Design List

The following list, organized by importance - from most important to least important (but still important), covers all of the basic (and some of the more advanced) methods to effectively and efficiently optimize your website design for SEO:

• don't use Flash (and how to survive if you absolutely must use it)
• don't use frames (and how to survive if you absolutely must use them)
• the foundation of the foundation: keyword research
• researched keywords in andlt;titleandgt; tag
• researched keywords in URL (filenames and folders)
• CSS drop down navigation (no Javascript or Flash); CSS stylesheets
• density of researched keywords in document text; don't hide text
• researched keywords in anchor text (the text that contains a hyperlink)
• researched keywords in headings andlt;H1andgt;, andlt;H2andgt;, andlt;H3andgt; etc.
• images (including researched keywords in 'alt' tags, no text in images)

1. Don't use Flash

There is a reason why we have two things NOT to do at the very top of our list: Integrating Flash and frames into a website design that requires SEO is like using gasoline to try to put out a fire: its just plain stupid. We know that you're not stupid, so don't use Flash - heres why:

Search Engine Spiders Don't Index Flash

All of that juicy textual content that you want people to find and eventually read is worthless to Search Engine Spiders. When the spiders crawl your website, any Flash files that the spiders stumble upon will be ignored - including all of the content inside. If your entire website is built using Flash, then you're committing what is commonly referred to as 'SEO suicide'. Using Flash (especially for your entire website) is the worst thing that you can do and should be avoided at all costs.

'But I Absolutely Need Flash'

There is a great deal of web technology available that allows you to accomplish a lot of what you may need done in Flash; however, if you absolutely must use Flash, make sure to include an alternative textual description for your Flash file. Do not, under any circumstances, create an entire website using Flash. The only way to avoid destroying your website's SEO campaign when creating an entire website using Flash is to include, inside of your website, a link to view the website in Flash. This link should, again, be included inside of your website and not as an option to 'View site in Flash' on the index page of your website. If you do this, then be sure that all of the content included inside of the Flash website is included in your regular XHTML website.

Trying to maintain a Flash website and a regular website is going to be a lot more work in comparison to only having to maintain a regular website using XHTML. However, if you're going to go down this road, then it is absolutely imperative that you create a separate website with content outside of Flash if you want people to be able to locate your website in the search engine results pages (SERPs).

This topic is debatable. Some people may disagree with us completely and instead advise you to avoid producing anything in Flash - especially an entire website. Although we advise against creating an entire website in Flash, if you must do so, then using this solution that we have provided is required if you want to have a SEO friendly website design and content that is indexable by the Search Engine Spiders.

2. Don't Use Frames

Search Engine Spiders have a difficult time crawling through a website that uses frames. Many Search Engine Spiders will receive the following message when visiting a website designed using frames:

'Sorry! You need a frames-browser to view this site.'

If you can't already tell, using frames can be just as bad as building a website using Flash. None of the content inside of your frames is indexable by the Search Engine Spiders - all they see is that error message. Unless you're optimizing your website design for 'Sorry! You need a frames-browser to view this site.' you will not rank well in search engines that do not support frames.

'But I Absolutely Need Frames'

Although we believe that trying to justify the usage of frames for your website design is even more difficult than trying to justify the usage of Flash, if you absolutely must use frames, then use the andlt;NOFRAMESandgt; tag. Using the andlt;NOFRAMESandgt; tag is a simple solution that can be used so that the search engine spiders can index at least some of your content.

For a more in depth analysis of why using frames is bad for SEO and how to implement the andlt;NOFRAMESandgt; solution into your website design visit SearchEngineWatch.com.

3. The Foundation of the Foundation: Keyword Research

When optimizing your website design for the search engines, keyword research is an integral step. If you're optimizing your website for the wrong keywords, then your target audience will not find you in the search engines which means your SEO campaign will not be very effective.

There are a number of ways to research the keywords that your target audience is searching for - we've included two:

• Wordtracker
• Overture

Wordtracker

Wordtracker is a popular and effective keyword research tool used by some of the most respected engine optimization professionals in the business today. Wordtracker offers a very large 340 million + keyword database from which you can discover what your target audience is entering into search engines and how many times each keyword has been entered. There are many beneficial features that a Wordtracker membership includes (yes, it costs money, but it is worth every penny). Some of these features include:

• Competition search: Allows you to find the keywords with the least number of competing websites; the less websites competing against your keywords, the easier it will be for your website to rank higher for them.
• Misspelling search: As the name implies, Wordtracker allows you to search for common misspellings of your targeted keywords so that you can optimize a few pages of your website and obtain the extra traffic from the misspelled words.

As great as it is, we don't want to plug Wordtracker too much; however, we will say this: If you're interested in obtaining the best keyword research and don't mind paying a daily, monthly, or annual fee, then Wordtracker is the only choice for you.

Overture

Overture is the free solution to keyword research. Although not as efficient as Wordtracker, Overture still is an invaluable keyword research tool when used correctly. Many will argue about whether the results from Overture are accurate, but since the tool is free, it is better than nothing.

How to Research Keywords

Researching keywords can be a complicated task. Unfortunately, the topic of keyword research is too detailed for us to effectively cover in this article. However, if you're looking for more information regarding the process of keyword research, then take a look at improvetheweb.com's keyword research article. They have successfully broken down the keyword research process so that it is straightforward and easy to understand.

4. Researched Keywords in andlt;titleandgt; Tag

The andlt;titleandgt; tag of a website is one of the most important places to have your researched keyword included. The andlt;titleandgt; tag is the primary text that is visible in the search engine results pages (SERPs) for your website. When creating your andlt;titleandgt; tag, make an effort to keep it as short as possible (between 6 - 8 words). Also, make sure you include the researched keyword(s) at or near the beginning of the tag. The fewer the words and the closer your researched keyword is to the beginning of the tag, the more weight it will carry when the search engines determine the keywords that your website should be indexed for.

Note: Avoid 'stuffing' the same keyword in your andlt;titleandgt; tag; only use the keyword once, or at the most, twice. This will guarantee that the search engine spiders will not look at your andlt;titleandgt; tag and think that you're trying to spam or manipulate the search engine results pages by stuffing the same keyword in the tag multiple times.

5. Researched Keywords in URL

Including researched keywords in the URL of web pages as well as your website's directories/folders is also very important. If you have multiple words that must go in your filename or folders, then use dashes '-' to properly separate the keywords.

For example: If you have a web page that describes your website design company's professional web design services, then the following optimized filename would be used:

'yourwebsite.com/professional-web-design-services.php'

As you can see, the researched keyword 'professional web design services' is included in the filename of the web page with each word separated by a dash '-'.

If you plan on optimizing the content of the web page with the keyword included in the URL, then using researched keywords in the URL is an important step in optimizing your web page. However, if you don't plan on optimizing the web page's content, then you can't solely rely on having them in your URL.

6. CSS Navigation / CSS Stylesheets

Another very important website design practice for SEO is to use a CSS (cascading style sheet) navigational menu. By using CSS navigation, your navigational text will be crawl-able and indexable by the Search Engine Spiders. This is not the case when using Flash or Javascript for your navigational menu. Search Engine Spiders are unable to index nor follow the links in your Flash or Javascript navigation. Not only will the Search Engine Spiders not be able to parse the information used in the navigational menu, but they also will not be able to follow the hyperlinks to other pages of your website. Unless you have a single page in your website (which then would make having a navigational menu pointless), you're going to want the Search Engine Spiders to be able to index and follow the hyperlinks in your navigational menu.

The Low Down on the CSS Drop Down

Even better than including a CSS navigational menu in your website design is to include a multi-level CSS drop down navigational menu. By using a multi-level CSS drop down navigational menu, you will be able to include practically every page on your website inside of your navigational menu. How cool is that? Well, if you don't know how cool it is, then you don't know the real benefits to SEO of using this form of a CSS navigational menu - and in case you don't, here are a few:

• Less clicks to get to any web page: Some of the most important pages of a website often take three, four, five or more clicks before they are able to be reached. Not only is this poor usability for your visitors, but it is also terrible for Search Engine Spiders. As the spiders are traveling from link to link, they can become confused as to which keywords are most important. Web pages deeper in the clicking hierarchy may be deemed as less important than those near the top. For this reason, CSS down down navigational menus are far superior to regular CSS menus. Most of the web pages in your website will only be one or two clicks away. This means that the Search Engine Spiders don't have to look as hard for web pages and your visitors don't have to work as hard to find buried web pages.
• Instant sitemaps: To the visitor, the CSS drop down navigational menus will appear compact and will only show the top level/primary links (until they are rolled over with the mouse cursor). However, to the Search Engine Spiders, the CSS drop down navigational menu's contents (links and link anchor text) will appear on every page that the menu appears on. Its like having direct access to any page of your website at any time. If the Search Engine Spiders come to your website from a web page that is buried deep inside of your website's directory structure, then they will have no problem finding their way to any other area of your website. It literally does not matter which web page the visitor or the Search Engine Spider is on - as long as the CSS drop down navigational menu appears on the page, then they have a sitemap of all of the links in your menu available to them. Usability personified.

CSS navigational menus are good, but CSS drop down navigational menus are better. For tutorials and examples of CSS drop down navigational menus, visit DynamicDrive.com. They have some fantastic examples and provide the code to you, free of charge. To see a working example of a multi-level CSS drop down navigational menu, visit our professional web design website. We have modified the Chrome Script found at DynamicDrive.com to include multi-level navigation which allows us to list all of the links on our website inside of our navigational menu in an organized hierarchy.

Say 'Yes' to CSS Stylesheets

Although not necessary, CSS stylesheets do a number of things better than website designs that use tables and bloated markup. If your website already uses tables, don't panic - it is not necessary to recode with CSS. As long as you follow all of the steps in this article, your SEO friendly website design should not be compromised due to table usage. However, if you're at the beginning of the web design process, then be sure to use CSS external stylesheets to design the layout of your website.

CSS stylesheets can significantly decrease the amount of code on your web pages, which means quicker load times. A quicker loading web page is good for humans as well as Search Engine Spiders since it allows them to respectively surf and crawl through your website at a faster pace.

CSS stylesheets also allow you to control the style and placement of all of the elements in a website design such as the heading tags (andlt;h1andgt;, andlt;h2andgt;, andlt;h3andgt; etc.), paragraphs andlt;pandgt;, divs, navigation, images, links, and more by making simple changes to the elements in the stylesheet. Changes that would take you hours using tables will now take you minutes using CSS stylesheets.

For a more in depth analysis of CSS stylesheets and why you should use them for your next website design visit Wikipedia.com.

7. Density of Researched Keywords in Document Text

Using the researched keywords in your document's body that are included in your andlt;titleandgt; tag, andlt;metaandgt; tags, URL file and folder names is another great way to boost the chance for success of your SEO friendly website design. When integrating the researched keywords into your document's body, be sure not to 'stuff' the keywords by using them too many times. Doing so will make the body text unreadable and seem nonsensical. More importantly, the Search Engine Spiders could penalize you for stuffing keywords in your web pages.

To make sure that you're not abusing the repetition of the researched keywords, use a keyword density analyzer tool. Enter in a keyword or keywords phrase that you are optimizing a web page for, enter in the URL of the page, and submit. This tool will not only scan the body text of your document, but it will also scan the andlt;titleandgt; tag, andlt;metaandgt; tags, URL, and more. If the keyword is reported as being used more than 7% in the body text, then go back and edit the body text of that web page so that the keyword density of the researched keyword is between 3% - 7%.

Note: Be sure that your body text is not the same color (or close to the same color) as its background text. Commonly referred to as 'hidden text' by the search engines, this could result in your website being penalized or even banned from the search engine results pages altogether.

8. Researched Keywords in Anchor Text

Using researched keywords in the anchor text of your hyperlinks is another crucial step in creating a SEO friendly website design. If an optimized web page is about blue fighter jets, then be sure to make the hyperlink anchor text read:

'Blue Fighter Jets'

Not only does including descriptive, researched keywords in your hyperlinks make it easier for visitors to know what they should expect to find when following a certain hyperlink, but it also tells the Search Engine Spiders what a web page is about. Using researched keywords in your anchor text is even more important when another website links to your web page. This carries a great deal of weight for search engines in determining how 'important' a web page is and ultimately how high it should be ranked in the search engine results pages.

9. Researched Keywords in Heading Tags andlt;h1andgt;, andlt;h2andgt;, etc.

It is also important to include researched keywords in the heading tags of your web pages. No matter if its a andlt;h1andgt;, andlt;h2andgt;, andlt;h3andgt;, andlt;h4andgt;, or andlt;h5andgt; tag, try to include the researched keywords in your heading tags as frequently as possible. Doing so will assist in increasing the importance of the researched keywords on the optimized web pages which will ultimately help your web pages rank better in the search engine results pages - the purpose of SEO.

The rule for keyword stuffing also applies to heading tags: don't repeat the same keywords multiple times in the same heading tag - you could risk the penalization of your website from the search engines.

10. Images: 'Alt' tags, No Text in Images

Finally, the last two things to remember when creating a SEO friendly website design is to use 'Alt' tags for images and also to keep textual information out of images.

'Alt' tags

A Search Engine Spider is not smart enough to determine what an image is about. To help the spiders by providing additional information from your website that they can index, include an 'alt' tag for each image that you use. Additionally, if possible, use the researched keywords in the alt tags.

Keep Text Out of Images

Aside from your logo, text should not be included inside of an image. Not only does it increase the size of the image (which means longer download times), but it also makes all of the text inside of the image useless from an SEO perspective. Instead, use CSS layers (the z-index attribute) in your CSS stylesheet to position text on top of the image. Although you don't have as many font choices, your image will download more quickly and the text on top of the image will be crawl-able and indexable by the Search Engine Spiders.

The Ultimate Example

When followed, this Essential Guide to Creating SEO Friendly Website Design will assist you in creating a solid search engine optimization foundation for your website. For a live example of a website that implements all of the items included in this article, visit professional web design company Chromatic Sites website.