9 SEO Tips for Attractive Search Engine Friendly Web Design

SEO: time-intensive, ever changing, and highly misunderstood. Creating a website design that is appealing, while also search engine friendly, is one of the hardest parts about SEO web design.

If you’re a designer, are your designs really search friendly?

A lot of misconceptions about SEO still exist in the web design community and many designers, who have at least some knowledge, are often acting with outdated information. Once a designer understands the value of SEO, there is still the concern of how to keep a design attractive, while also being search friendly.

Designers love beautiful websites and SEOs love optimized content and code, but neither should fool themselves, because these days, both matter. In that spirit, I’ve put together a list of 9 SEO tips that help keep your stunning website optimized for search engines. Instead of focusing on SEO design basics, I’ll be covering some design-focused SEO tips, to show how SEO and beautiful design elements can co-exist.

1. It’s not the same old SEO

SEO can be hard to keep up with, because it is always changing. Today, SEO doesn’t mean a site has to be ugly.

First, forget everything you’ve learned about keyword meta tags and keyword stuffing, because those days are over. This is a great thing for designers, because search engines are looking for great content, written in natural language. Metrics, like keyword density, which make sites look hideous, are a thing of the past.

If you’ve been a designer for several years, start fresh and learn search engine optimization from a source that keeps up with all things SEO. Don’t let out-of-date SEO practices make you think pages have to be riddled with repetitive keywords.

2. Links talk

Links tell search engines what pages are about. This holds true on-site as well as off-site. The words you use in your designs to link to other pages do matter. The web has matured and no longer needs to be told “click here”.

This is just another form of the dreaded “click here”. There is an opportunity wasted here, where the designer could link out with the keyword-rich headings like “HR solutions”. The “learn more” link is great for users, but leaves search bots blind to what is on the other end of that link. As a human, we make the connection, and know that this link is about “HR Solutions”, but you’re telling search engines it is about “learn more”.

CSS can be used to keep the style, but the site would benefit from either linking the major headings, or changing the link text to something like “Learn More about HR Solutions”. This would drastically improve the site’s internal linking, with minimal impact on design.

3. Design is linkbait

This is great news for designers. Much of the life of an SEO is focused around baiting links from the link-giving portion of the web. The amazing thing is that this portion of the web loves great looking websites. Great design improves credibility and the user experience.

If you design great sites, use services like The CSS Gallery List to get your site submitted to CSS showcases across the web, or at least do it by hand.

4. Look at search bots as browsers

Earlier I mentioned how using “learn more” leaves a search engine blind. Considering a search bot as a disabled user or another type of browser, is exactly the type of approach needed for search friendly web design.

Search bots are extremely disabled and unintelligent users who use a dreadfully outdated browser. This user’s ability to understand your site may mean the difference of thousands or millions of dollars for a business.

One of the best SEO tips I can give a designer is to test as if Lynx was one of the web’s major browsers. If you can properly navigate your site, and understand its content in a browser like Lynx, then you are on your way to being a great SEO web designer. Other tools, like the Web Developer toolbar, really help test a site without elements like CSS, images, and JavaScript.

Keep up on the Google webmaster guidelines, so you know the limitations of this highly impaired user of your site. Focus on creating beautiful designs that gracefully degrade for this limited web user, “the search bot.” Or, instead of designing the site and working backwards, start with the lowest common denominator (the search engine), and work up.

Let’s Get Tactical

5. Smoke some hash

#

That little symbol, the hash mark or pound symbol, is an extremely powerful SEO tool in the hands of a developer who knows what to do with it. The hash mark creates an element in the URL that is not considered unique by the search engines, so it is dropped.

There are a lot of great ways to use this. I’ve seen it used well on sections where new pages hardly justify having a unique URL. One example I’ve seen recently is a “people” section where only minor content changes are seen on each page. The designer assigned each employee’s profile with “#name”. These multiple, near duplicate, pages are all seen as one page by the search engines. There are plenty of other great uses for the hash.

6. Use SEO friendly JavaScript

Any time you touch technologies like JavaScript, you need to tread carefully. I love Javascript technologies, and all the amazing things we can do with them, but they can create huge problems.

Traditionally, AJAX is not SEO friendly because calls are made through JavaScript, which cannot be executed well by search engines. The result is that the content is never rendered or indexed by search bots. I like what can be done with jQuery, since you can have html link navigation in place (for search engines), and still have jQuery effects.

If not done correctly, you can run into problems though. For example, jTip, which is a nice little Jquery Tool Tip, can create some nasty problems. The tooltip is nice and all, but the static html links point to a page that looks like this.

That is the whole page. This page has no title and no link back to the site. This can create multiple near duplicate versions, which can be indexed in the search engines. This also creates many hanging pages on a site. I did an audit on a site recently that used jTip extensively. The site had over 80 pages indexed in Google, with only one sentence per indexed web page. None had titles, and none linked back to the domain.

Creative design solutions can allow a designer to use jQuery while still being search friendly. Check out Jon Raasch’s post about how he used jQuery to Animate his portfolio in a very search friendly way.

7. Flash is OK, sometimes.

Ask your average SEO about flash and you’ll be told how horrible it is for SEO. Ask someone who casually follows SEO news, and they’ll tell you flash can now be crawled. So how should a designer approach flash?

While Google is improving, you should not depend on Google to figure it all out. Here are some basic Flash rules to keep in mind.

* Do not include an entire site on one page.
* Do not use flash as the navigation.
* Do not include important content in flash.

Search engines are nearly blind to flash, so do not use it for important page elements. Use of flash for design elements and non-important content is ok.

Flash can be used in a search engine friendly design. You can enhance web fonts by using slfr. Since the flash does not replace the HTML content, but styles it, search engines are still able to read the titles. It’s even Google approved.

8. CSS image replacement

CSS image replacement is one way to make a site look great, while also being search friendly. There are a couple different ways to do this, but the biggest concern boils down to intent.

Google says:

“If your site is perceived to contain hidden text and links that are deceptive in intent, your site may be removed from the Google index, and will not appear in search results pages.”

The two words to focus in on here are “perceived” and “intent”. During a manual review Google will try to interpret your intent; a practice that has come under fire recently when Google profiled SEO.

I think CSS is a common tactic and a fine solution to SEO web design. If your intent is to improve the visual experience, and you make this intent clear, you should be fine. Do not use this method to stuff keywords or manipulate with hidden content.

9. Have great linking with footers

If you have a design that will be compromised by the inclusion of a robust navigation above the fold, a solid footer is a great solution.

Sometimes footers get the job done, like Yelp’s boring, but effect footer. And sometimes they highlight content you want to rank, like the footer over at We Build Pages. But, they can also look beautiful, impressive, and creative.

By Justin Briggs