The Basics of a Search Engine Friendly Website

There’s more to building a website then just slapping some graphics together in an HTML document and saying, “Here ya go!” Believe it or not, there are a lot of web designers out there that do just that. While many are fine graphic artists, they lack the understanding of search engine marketing and how code plays an important part in determining rankings. Building a website that is search engine friendly is extremely vital if you ever expect your website to become visible in search engines like Google, Yahoo, and Bing.

How to Build a Search Engine Friendly Website

One of the easiest ways to build a search engine friendly (SEF) website is to hire a professional web designer. If that’s not in your budget, then you might want to follow some of these key points:

Include Page Titles

One of the most annoyingly simple mistakes I often see are webpages without titles. Titles are super easy and every page should have one. They should also be descriptive to the content of the page and shouldn’t be used as a means of keyword stuffing (although you should definitely include some keywords). On a static HTML webpage, the page title will be placed between the head tags.

Include Meta Tags

The importance of meta tags has been topic of speculation and disagreement for many years. There are several types of meta tags, but for the purpose of this blog post, I’m only going to discuss two: description and keyword meta tags. Meta tags appear in between the head tags.

The description meta tag is a few lines of descriptive text that helps explain the contents of a particular webpage. Don’t go overboard with the description meta tag – keep it simple and to the point – don’t put the bulk of your content in a meta tag. A couple of sentences should suffice. In my opinion, the description meta tag is the more important of the two. If written well, this is the text that will appear in Google search results (Google reserves the right to change the text that appears in their search results). It should contain a few relevant keywords related to the webpage – but don’t try to stuff keywords in here! If you do, you’ll be penalized.

The keyword meta tag is less valuable than it used to be. Google has said that they completely ignore the text in the keywords meta tag. This is because a lot of people abuse this meta tag to stuff irrelevant keywords into a webpage. Even so, I still use keyword meta tags and use them properly. I list various keywords and key phrases that help describe the content of the page. Keep keywords to a minimum and you should be fine.

Clean HTML Code

Keeping your website’s HTML code clean is very important. A website must be able to be as easily read by a search engine spider as it should human eyes. Many websites now use strictly CSS designs to help improve load times and create a consistent look. Clean code can help make your website search engine friendly by eliminating lots of the garbage normally associated with old design techniques. Search engines can’t read javascript, so making drop-down menus with CSS is the preferred method. W3C compliant code is always good, but isn’t necessarily a requirement. Most browsers will still read a webpage even if the code is broken (although the end results may not be what you had expected). I use the Firefox Web Developer Toolbar Add-on to check most of the websites I design. I’m always looking for three green checks – passing Standards Compliance Mode, No CSS Errors, and No Javascript Errors. Of course, utilizing a program such a Dreamweaver will help eliminate many errors before you ever publish your website. Clean code also helps eliminate cross-browser errors, which are those that only appear when using specific browsers. For example, I test the websites I design in Firefox, Internet Explorer, Opera, Safari, and Google Chrome. I also test my websites using multiple computers with different operating systems. Of course you could also use a service like BrowserShots to perform a similar task.

Search Engine Friendly URL’s

Like title tags, making search engine friendly URL’s is a pretty simple task when designing static webpages. A URL (Uniform Resource Locator) is the “address” for your webpage on the internet. SEF URL’s should be easily read by both humans and computers. For example, a webpage named page1.html isn’t as descriptive as a one named search-engine-friendly.html. I like to call search engine friendly URL’s by another name – pretty URL’s. Whenever possible, URL’s should be created so that they match the content of the webpage. When using multiple words in a URL, I always prefer to use a dash (-) in between the words. Several years ago, the underscore (_) was a popular way of separating words, but this method has given way to the dash.

When saving documents for use on the internet, especially webpages, avoid using document names that include spaces or include special characters. These special characters get converted into ISO URL encoding strings. So if I were to name an HTML document search engine friendly.html without the dashes, it would appear in the address bar of the browser as search%20engine%20friendly.html. It’s not as pretty as a simple dash and can be harder for people to read. Again, it is very important that the name of the document match the content of the page! If you name a page “computers.htm” and the page talks about car repair, then you’ve missed the boat as far as search engines are concerned.

If you’re using a content management system (CMS) or ecommerce software, it may be a little more difficult to manage your URL’s. However, most dynamic website software now includes functionality to implement search engine friendly URL’s. While this may not come standard with the software, there are usually add-ons or features you can add to improve the readability of your URL’s.

Add ALT Tags to Images

Search engine spiders can’t “read” images in the traditional sense. What our eyes see on the screen isn’t always what a search engine sees. Search engines can’t read text that has been included in an image, so its important to use text whenever you can. But, you have to make your website look good by using images. Where do you draw the line? I can remember when the internet didn’t have images – everything was black and white and was only text. Honestly, those old websites can still teach us something about the importance of text. I love the Web Developer Toolbar Add-on for Firefox. It allows me to disable all of the CSS styles on a page and hide the images. When you do that, you get to basically see the content of a webpage the way a search engine sees it. If a page is made up of all graphics, guess what? The search engine probably isn’t going to see much at all – which could really hurt you.

A good designer can achieve a balance between graphics and text to give your website an optimal appearance. Whenever an image is used on a webpage, it should always include an ALT tag. I prefer to call it a tag, really even though it is an attribute for an element in an HTML document. An ALT tag is alternative text for an element on a page. Every image should include an ALT tag. The ALT tag should accurately describe the image as a short word or phrase and should never be used to stuff keywords onto a page.

While we’re on the subject of images, make sure that your images are named accordingly as well. For example, an image named fish.gif is much more descriptive than an image named gr3.gif. While I’m not quite sure if this has any bearing on SEO or SEF preferences just yet, it is handy to name images appropriately. I would imagine that properly named graphics could only help and can never hurt.

Appropriate Use of Header Tags

Header tags (H1, H2, H3, H4, etc.) are the tags titling important sections on a webpage. Every webpage should include one (and only one) H1 tag. This should be the first header tag on the page and all other header tags should follow below it using a common outline method. For example:

  • Header 1
    • Header 2
      • Header 3
      • Header 3
    • Header 2
      • Header 3
      • Header 3
    • Header 2
      • Header 3
      • Header 3
        • Header 4
        • Header 4
      • Header 3

Now, you don’t have to go crazy and include dozens of header tags on a page, the example above just gives you a rough idea of how header tags should be utilized and the appropriate structure they should maintain. A header should be descriptive about the content it is heading. For example, at the top of this section on header tags, I’ve included an H3 tag called Appropriate Use of Header Tags. Include one or two keywords when writing a header tag, but never try to stuff keywords in a header tag.

Good Linking Techniques

One way to really shoot yourself in the foot is to always say “Click Here!” or “Read More” or something along those lines. While sometimes the phrase “click here” can be appropriate, its not very descriptive to search engines. When I’m talking about good linking techniques, what I’m really referring to is the text you use to wrap an href HTML tag around. For example, if I wanted to link to a webpage that talks about affordable website design, then I should make sure that the text at the heart of the link leading to that page reads “affordable website design” or something similar. It doesn’t have to be an exact match, but it should be appropriate and it is much more descriptive than simply saying “click here.”

In addition, every webpage on your website should be linked from at least one static link somewhere on the internet (preferably from your own website). If you design a webpage and nobody knows how to get to the page, then there’s no point in designing the page and putting up on your server – nobody will ever be able to find it! One of the easiest ways of making sure every webpage on your website can be found is to include your pages in a sitemap. The only exception to this rule would be for marketing purposes, such as a specific landing page designed for use with Google AdWords or something along those lines.

Final Thoughts on SEF

While these guidelines for building a search engine friendly website are a start towards search engine optimization, it is by no means a complete guide to SEO. Search engine optimization is a vast and complex subject that could fill volumes of text with various techniques, tools, and tricks. Making something search engine friendly helps build a strong foundation upon which SEO can be performed. Apheus can help build your search engine friendly website, just call us at 1-800-946-3079 and we’ll be more than happy to assist with all of your SEF website design needs.

Bob Barcus
View all posts by Bob Barcus
Bobs website
Bob Barcus is a website design and computer repair guru with more than 15 years of hands-on experience. He lives and works in Argos, Indiana and is the founder of Apheus Solutions, LLC.
  • Share/Bookmark

Leave a Reply