11 Must Use SEO Tips for Web Designers

By / Nov 10, 2008 / Tips
shares

Today most web designers do more than just design the look and feel of a web site. They often play a major part in writing the front end code. This means that a big part of the SEO or Search Engine Optimization responsibilities should fall on the designer. However, there is a large number of web designers that don’t understand this subject well enough to create a site that is fully optimized for search engines.

This article is here to provide some important tips that will aid the average and even above average web designer in improving their SEO skills.

1. Make the code prettier than the design

When building the front end of your site, make sure to use semantic code. By using descriptive tags to structure your pages, search engines will be able to read and have a better understanding of your content. This will also make the process of styling your site much easier and cleaner.

2. Use but don’t abuse your keywords

Keywords are the words that describe your content. It’s important to have them appear in strategic places throughout your page, such as: URL, title tag, and main heading tags. It’s also important to have it appear often in the body of the content, but not too often, which might cause your content to be penalized for keyword stuffing.

3. Avoid using Flash for navigation

As tempting as it is to whip out some nice looking drop down effects for your site’s navigation using flash, don’t do it. Search engines have trouble reading flash files, which means the links used in the navigation can’t be followed.

4. Use unique page titles

Each page on your web site should have a title attribute, and each title should be unique. If you use the same title for every page, search engines will think that every page on your site is about the same subject.

5. Don’t forget about images

Make use of the alt attribute of an image to properly describe it. As smart as search engines are, they can’t see what an image looks like. Failing to this can cost you substantial traffic from image searches.

6. Don’t use generic links

Search engines place a high importance on links. So when linking to relevant content, be sure to use a word that describes the content. For example, if you were giving your reader a link to learn more about Photosop, use something like “Learn more about Photoshop” as opposed to just “Learn More”.

7. Don’t use images to replace text

As designers, we always want to make things look as good as possible. This means sometimes replacing ugly browser rendered heading text with a nice smooth image. Try to avoid doing this. Again, search engines can’t see the contents of an image, and this is where you should be putting your keywords.

Edit: Looks like I misspoke(or mistyped) on this one. There are valid ways to accomplish this, such as FIR.

8. Use AJAX sparingly

Ajax is great for enhancing the user experience, but try not to over do it. Content generated with ajax can’t be linked to. A good rule of thumb is: if what you are loading with AJAX can be an individual page, then avoid using it.

9. Get indexed quickly

To get your site indexed in search engines in a timely manner, try getting it linked to by a popular site in a related niche. Submitting it to Google also works, but sometimes it can take several days if not weeks.

10. Build incoming links

The number and quality of incoming links plays a big role in the placement of your site in search results. Having quality and unique content is a good way to get people to link to your site. Another way is to be generous with your own links.

11. Use a consistent URL

When you build a site, decide from the beginning if you want to use or drop the “www”. Once you decide, stick with it. Search engines, for example, see www.webdesignledger and webdesignledger.com as two different sites and as duplicate content, which they do not like.

Do you have any additional SEO tips? Let us know.

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

25 Comments

  1. Andrzej
    November 10, 2008

    I can’t agree with point No 7 Don’t use images to replace text.

    I’d rather say: Do use images to replace text but use them wisely. There’s a lot of techniques designers can utilise to use images instead of text if they really need to.

    From Google view website will be semantically correct, from end-user point of view will be esthetically pleasant.

    Also designers should use alt tag to describe images they are using.

    Greets from Ireland!

    Reply
  2. ICU
    November 10, 2008

    Yes, that’s the only point that sticks out as incomplete. With FIR http://en.wikipedia.org/wiki/Fahrner_Image_Replacement and similar techniques you can feed text to search engines and screen readers while keeping things pretty.

    Primer on basic SEO coding techniques: http://www.designicu.com/blog/kill-your-seo-consultant/

    Reply
  3. Chris Porter
    November 10, 2008

    I also agree that No. 7 can be ruled out. You can do:

    Title of Header

    and then

    h1 {
    text-indent: -1000px;
    overflow: hidden;
    display: block;
    width: ###px; /* this can be 100% depending on design */
    }

    h1.class {
    height: ##px;
    background: url(image.jpg) no-repeat;
    }

    If you want to make images headers SEO friendly, requires some work, but if you do stuff right, you can get it done.

    Reply
  4. Henry
    November 10, 2008

    Thanks for the feedback. I made an edit on #7 to clarify.

    Reply
  5. Swim University
    November 10, 2008

    Flash is nice and if you still want to use it that’s fine. Most designers use flash for navigation, just make sure at the footer of all your webpages you add text links as well so Google and other search engines will have an easier time reading them.

    Reply
  6. Dario Gutierrez
    November 12, 2008

    Interesting feedback, and I agree with #7. Good tips!! Maybe you can write incoming links tips. Regards!!

    Reply
  7. Ryan Bollenbach
    November 14, 2008

    I’m on the fence about the points made regarding Flash.I believe it depends on the context in which flash is being used.

    For example: http://www.beatport.com uses an interface entirely based on flash. It’s soul purpose is to provide users with electronic MP3′s.

    As long as someone can enter “beatport” into a browser they aren’t going to run into any problems. (they find the site, go to the site and get songs)

    But for an article based site like http://www.30sleeps.com/blog it’s important to reference as much as possible in the articles, so the user can find stuff on related enquirers not just the site.

    Reply
  8. Lenz
    November 17, 2008

    I really don´t agree with point 3!!!

    Flash is the best thing on the web.

    Reply
  9. Peyet
    November 19, 2008

    It seems everyone is in agreement about #7 but I was very surprised that no one mentioned sIFR http://www.mikeindustries.com/blog/sifr/, it changed my entire way of designing having the ability to utilise more fonts in headlines/navigation etc.

    Reply
  10. Nathan Beck
    November 20, 2008

    Jerry Low has recently written a guest post on Redswish covering very similar bases:

    http://www.redswish.co.uk/10-seo-elements-all-websites-should-have/

    Not pimping – I just think it might be relevant!

    Reply
  11. Kỹ sư xây dựng
    November 24, 2008

    a Awesome tutorial

    Reply
  12. Jess Hammer
    January 21, 2009

    I disagree that most web designers use flash for navigation. I haven’t met one in years who does.
    Flash has too many usability restrictions (plugins, mobile, etc) and is so cumbersome to change and edit, should the site evolve (which it should)

    Some lovely suckerfish on ‘roids dropdowns are all you need!

    Also, as an SEO tip: match title tags, URL and the h1 to the pages content. This gives the page a clear theme and thus more relevance.

    Reply
  13. Webhosting
    March 10, 2009

    @ jess hammer

    i see new flash websites daily.
    For websites like interior design etc i think this is the best choice.

    Reply
  14. Chaney
    April 9, 2009

    Flash can be a great design tool for the site but don’t forget this is an article about SEO. Currently search engines can’t read with in a flash file. So what you do in flash won’t be crawled.

    Reply
  15. dan
    April 11, 2009

    very useful il have to start using FIR in my sites as am always using images for headers !!

    Reply
  16. anton
    June 3, 2009

    i think not all point i’am agree but thats all not must have in SEO, i think!

    Reply
  17. Jason The Designer
    June 30, 2009

    Using Flash is fine if you have a developer who knows how to use it in conjunction with SEO. I do not think the standard Flash designer would know all the techniques required.

    For instance, XML can be used to get around SEO for Flash nav.

    The nav should be built dynamically from the start, so if the site does evolve, all you need to edit is an XML file.

    Also deep linking can be done for use with FWD/BACK and bookmarking Flash.

    If it were so bad, car sites would not use it at all, yet there are car site entirely made in Flash. Don’t tell me they completely avoid SEO.

    I do agree that Flash becomes an issue for mobile, but then again I also believe that if youw ant people to use your content while mobile, a separate site should be served containing content that is more useful while mobile.

    It is a toolbox… use the appropriate tools from the start to best fit your needs, plan for SEO from the start, and you should be fine whether you use CSS or Flash.

    Reply
  18. How To Business Cards
    August 4, 2009

    12. Create a sitemap, especially on big sites, which allow search engines to crawl your website easily.

    Reply
  19. fahad
    August 23, 2009

    My site was no where in the search engines, but by following the basics like these, I am now very much visible on search engines like google, bing, and yahoo. I really like to appreciate your contribution.

    Reply
  20. Dietmar
    September 9, 2009

    Put your main keywords at the top of your website because searchengines judge words at the beginning of a website more relevant than words in the center or at the bottom of a webpage

    Reply
  21. Linda Mirano
    November 20, 2009

    Thank you so much for another great article. Where else could anyone get that sort of information in such a perfect way of writing? I’m having a presentation next week, and I am on the look for such information.

    Reply
  22. baltimore seo
    June 2, 2010

    You might have heard of “Google bombing”, where many people link to a certain page using certain text and boost that page to the top of the search engines, even though that page might be on a completely different subject. This is because search engines use the words in your link text (otherwise known as “anchor text”) to figure out the nature of the page you’re linking to. This can be used to your advantage in your on-page SEO efforts, giving your pages a little boost for your keywords.

    Reply
  23. Avenir
    April 11, 2011

    I use the Firefox Web Developer tool bar for this, which is very useful for quickly checking new pages and CSS. It’s a great idea to bring designers into the SEO equation.

    Reply
  24. Andrew Taran
    July 18, 2011

    I agree that #7 shd be used wisely. Especially when you have a stunning design that doesn’t come along with SEO guidelines. And its perfect that you can put that slogan/reference/subheading stuff and pure content separately.

    Reply
  25. Dan
    October 2, 2013

    Nice post. Images are often overlooked in SEO, and can truly be beneficial.

    Reply

Leave a Reply