Web Design with SEO in Mind

March 11, 2009 // Author: Jacob Stoops // 134 views // View Comments
Web Design with SEO in Mind
When designing a site, always keep SEO in mind. What's the point in designing something pretty if nobody finds it?!?

I’ve seen it a million times. A beautifully designed website will come across my desk, but the current or prospective client complains, “Why isn’t my site being found in the search engines?”

I’m here to tell you that good design doesn’t necessarily mean good SEO. In fact, most designers and programmers don’t have the slightest clue where to being when it comes to search engine optimization.

Since I double as an SEO Analyst and Web Designer, I’m going to give you some tips for designing a search-friendly website.

1. The Design First, SEO Second Stigma

One of the biggest issues that many firms face is that they go through the whole design process (from “Kick-Off” to “Client Approval” to “Coding”) without involving the SEO team at some point. This is a mistake and will result in many unhappy clients (if you sold them SEO) when they find out that their site isn’t optimized.

Usually, the biggest kick-back here is the misconception that in order for a site to be search-friendly the design has to be ugly. This is quite to the contrary. There are many designs out there that are both beautiful and SEO-friendly.

The key is collaboration…

  • If you’re a designer, collaborate with the SEO team during the process.
  • If you’re an SEO, get involved and make suggestions to the design team.

2. Create a Good Balance of HTML Text & Graphics

One of the biggest issues with many sites is that they lack a balance between their scanable HTML text and the site’s graphics. Many sites have too many graphics and not enough text, and some sites have too much text and no graphics.

In order to make sure that the site’s design is still good and the site is still search friendly, there needs to be a balance between the scanable HTML Text and the site’s graphics.

Common mistakes…

  • Some sites have no scanable HTML text.
  • Some sites embed text into graphics, making the text unscanable.

A Good Tactic…

If you need to use a font that isn’t web-safe, use CSS-Image Replacement to bump the HTML text off the screen and then set a background. Here is how to do it:

#attribute {
background: #FFFFFF url(yourimage.jpg) no-repeat;
width: 300px;
height: 20px;
text-indent: -9999px;
}

3. Utilize Title & META Tags

It’s shocking, but many designers and developers make the mistake either not specifying a title for the site (leaving it “Untitled”) or making the titles for every page the same. In addition, most don’t know how to utilize META Tags and sometimes don’t even know how to place them.

My Tips…

- Create unique titles for every page on your site
- Use keywords in the titles that you wish to be found for
- Write unique META Descriptions for every page of the site
- Add META Keywords to every page on the site
- Don’t use these sections to spam keywords

If you have a dynamic site with dynamic titles, be sure to set those titles up so that they are fundamentally sound from an SEO perspective.

4. Use Heading Tags

I often see designers who do utilize the H1-H7 tags. However, most times they aren’t using good quality keywords in them, instead filling them with meaningless text like “Click Here” or other such jargon. These tags can be used to give weight to certain elements on your page above others.

What I recommend…

H1 – You should have an H1 on every page of your site. It should use good keywords, and should be very relevant to your page’s title tag. Only use this tag once!

H2 – You should use these tags to highlight things such as inventory or other valuable keywords. This tag can be used more than once.

H3-H7 – These tags can be used to specify other valuable things on your site.

5. Alt Tag Your Images

Alt tagging your images is crucial in web design from both a usability and SEO standpoint.

By Alt tagging your site’s images, you make them accessible for visually-impaired users who need a screen reader to view sites. In addition, webcrawlers can’t read images so by Alt tagging them they become indexable in image directories and are no longer viewed as a blank spot on your site.

6. Good Link Structure

Be sure to work on your site’s link structure. Remember, if a webcrawler can’t find your site’s pages they can’t be indexed by the search engines.

Make sure that your entire site is linked together and that all of your site’s pages can be found within your link structure. Try to avoid “orphan pages,” which are pages that aren’t reachable by webcrawlers because they have no links pointing to them.

In addition, be sure to use quality anchor text on your site’s links. This will be another way to provide search engines with information about your site.

7. URL Structure

If it is at all possible, try to include keywords in your root domain, or within your URL extensions. Many site’s use dynamic URL strands that are full of lots of letter, numbers and other crap.

Many people use a mod-rewrite to correct these nasty URLs and some of us are lucky enough to have complete control over the URLs we display (props to WordPress).

8. JavaScript

Ahh, javascript! This coding language is not well-supported by search engine webcrawlers. Although Google and other search engines are making improvements to help them read javascript on a daily basis, it still acts as a natural barrier to webcrawlers.

Why is this important? I often see a site’s navigational menu and/or text enclosed within javascript. This is done to make the menus do pretty drop-down effects or other cool design stuff.

I’m not saying you need to avoid using javascript in your design, but just take into consideration the ramifications that it may have on your SEO.

9. Using Flash

Many SEOs will tell you that Flash is the devil! I’m not going to tell you that. Fact is, I love Flash and I think that it adds a ton of value to the design. I will say though, that currently Flash isn’t scanable by search engines, thus making any content you have embedded there useless.

What I recommend…

  • Avoid putting Flash pieces where text needs to go.
  • If you need to mix Flash with text, plan to overlay HTML text using CSS.
  • If your site is entirely Flash-based, use noscript to supplement it with content.

Photo Credit: k on Flickr

Like This Post? Why Not Share it.

Related Posts

If you like this post, then you might like these as well!

  • I think, it's true what you say
  • Wonderful ! very good info. keep it up.
  • Great post. Without optimization, excellent web design is also useless.
  • Hi..
    Indeed a very good post, thanks for posting.
    I have gone through some great good looking design sites but there site is not able to generate any traffic and not found in search engines.So for this one should choose a design agency in such a way which also do SEO related works and this would cost less as if hire a SEO agency after the site is been designed then it would cost more.
    Thanks..
    John..
blog comments powered by Disqus