plusLINK Blog

SEO Tips for Attractive Search Engine Friendly Web Design

Posted on 27. Jun, 2009 by admin in SEO

SEO: time-intensive, ever chang­ing, and highly mis­un­der­stood. Cre­at­ing a web­site design that is appeal­ing, while also search engine friendly, is one of the hard­est parts about SEO web design.

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

A lot of mis­con­cep­tions about SEO still exist in the web design com­mu­nity and many design­ers, who have at least some knowl­edge, are often act­ing with out­dated infor­ma­tion. Once a designer under­stands the value of SEO, there is still the con­cern of how to keep a design attrac­tive, while also being search friendly.

Design­ers love beau­ti­ful web­sites and SEOs love opti­mized con­tent and code, but nei­ther should fool them­selves, because these days, both mat­ter. In that spirit, I’ve put together a list of 9 SEO tips that help keep your stun­ning web­site opti­mized for search engines. Instead of focus­ing on SEO design basics, I’ll be cov­er­ing some design-focused SEO tips, to show how SEO and beau­ti­ful design ele­ments can co-exist.

1. It’s not the same old SEO

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

First, for­get every­thing you’ve learned about key­word meta tags and key­word stuff­ing, because those days are over. This is a great thing for design­ers, because search engines are look­ing for great con­tent, writ­ten in nat­ural lan­guage. Met­rics, like key­word den­sity, which make sites look hideous, are a thing of the past.

If you’ve been a designer for sev­eral years, start fresh and learn search engine opti­miza­tion from a source that keeps up with all things SEO. Don’t let out-of-date SEO prac­tices make you think pages have to be rid­dled with repet­i­tive 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 mat­ter. 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 oppor­tu­nity wasted here, where the designer could link out with the keyword-rich head­ings like “HR solu­tions”. 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 con­nec­tion, and know that this link is about “HR Solu­tions”, but you’re telling search engines it is about “learn more”.

CSS can be used to keep the style, but the site would ben­e­fit from either link­ing the major head­ings, or chang­ing the link text to some­thing like “Learn More about HR Solu­tions”. This would dras­ti­cally improve the site’s inter­nal link­ing, with min­i­mal impact on design.

3. Design is linkbait

This is great news for design­ers. Much of the life of an SEO is focused around bait­ing links from the link-giving por­tion of the web. The amaz­ing thing is that this por­tion of the web loves great look­ing web­sites. Great design improves cred­i­bil­ity and the user experience.

If you design great sites, use ser­vices like The CSS Gallery List to get your site sub­mit­ted to CSS show­cases across the web, or at least do it by hand.

4. Look at search bots as browsers

Ear­lier I men­tioned how using “learn more” leaves a search engine blind. Con­sid­er­ing a search bot as a dis­abled user or another type of browser, is exactly the type of approach needed for search friendly web design.

Search bots are extremely dis­abled and unin­tel­li­gent users who use a dread­fully out­dated browser. This user’s abil­ity to under­stand your site may mean the dif­fer­ence of thou­sands or mil­lions of dol­lars 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 prop­erly nav­i­gate your site, and under­stand its con­tent in a browser like Lynx, then you are on your way to being a great SEO web designer. Other tools, like the Web Devel­oper tool­bar, really help test a site with­out ele­ments like CSS, images, and JavaScript.

Keep up on the Google web­mas­ter guide­lines, so you know the lim­i­ta­tions of this highly impaired user of your site. Focus on cre­at­ing beau­ti­ful designs that grace­fully degrade for this lim­ited web user, “the search bot.” Or, instead of design­ing the site and work­ing back­wards, start with the low­est com­mon denom­i­na­tor (the search engine), and work up.

Let’s Get Tactical

5. Smoke some hash

#

That lit­tle sym­bol, the hash mark or pound sym­bol, is an extremely pow­er­ful SEO tool in the hands of a devel­oper who knows what to do with it. The hash mark cre­ates an ele­ment in the URL that is not con­sid­ered 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 sec­tions where new pages hardly jus­tify hav­ing a unique URL. One exam­ple I’ve seen recently is a “peo­ple” sec­tion where only minor con­tent changes are seen on each page. The designer assigned each employee’s pro­file with “#name”. These mul­ti­ple, near dupli­cate, 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 tech­nolo­gies like JavaScript, you need to tread care­fully. I love Javascript tech­nolo­gies, and all the amaz­ing things we can do with them, but they can cre­ate huge problems.

Tra­di­tion­ally, AJAX is not SEO friendly because calls are made through JavaScript, which can­not be exe­cuted well by search engines. The result is that the con­tent is never ren­dered or indexed by search bots. I like what can be done with jQuery, since you can have html link nav­i­ga­tion in place (for search engines), and still have jQuery effects.

If not done cor­rectly, you can run into prob­lems though. For exam­ple, jTip, which is a nice lit­tle Jquery Tool Tip, can cre­ate some nasty prob­lems. The tooltip is nice and all, but the sta­tic 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 cre­ate mul­ti­ple near dupli­cate ver­sions, which can be indexed in the search engines. This also cre­ates many hang­ing pages on a site. I did an audit on a site recently that used jTip exten­sively. The site had over 80 pages indexed in Google, with only one sen­tence per indexed web page. None had titles, and none linked back to the domain.

Cre­ative design solu­tions can allow a designer to use jQuery while still being search friendly. Check out Jon Raasch’s post about how he used jQuery to Ani­mate his port­fo­lio in a very search friendly way.

7. Flash is OK, sometimes.

Ask your aver­age SEO about flash and you’ll be told how hor­ri­ble it is for SEO. Ask some­one who casu­ally fol­lows SEO news, and they’ll tell you flash can now be crawled. So how should a designer approach flash?

While Google is improv­ing, you should not depend on Google to fig­ure 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 nav­i­ga­tion.
•Do not include impor­tant con­tent in flash.
Search engines are nearly blind to flash, so do not use it for impor­tant page ele­ments. Use of flash for design ele­ments and non-important con­tent 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 con­tent, but styles it, search engines are still able to read the titles. It’s even Google approved.

8. CSS image replacement

CSS image replace­ment is one way to make a site look great, while also being search friendly. There are a cou­ple dif­fer­ent ways to do this, but the biggest con­cern boils down to intent.

Google says:

“If your site is per­ceived to con­tain hid­den text and links that are decep­tive 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 “per­ceived” and “intent”. Dur­ing a man­ual review Google will try to inter­pret your intent; a prac­tice that has come under fire recently when Google pro­filed SEO.

I think CSS is a com­mon tac­tic and a fine solu­tion to SEO web design. If your intent is to improve the visual expe­ri­ence, and you make this intent clear, you should be fine. Do not use this method to stuff key­words or manip­u­late with hid­den content.

9. Have great link­ing with footers

If you have a design that will be com­pro­mised by the inclu­sion of a robust nav­i­ga­tion above the fold, a solid footer is a great solution.

Some­times foot­ers get the job done, like Yelp’s bor­ing, but effect footer. And some­times they high­light con­tent you want to rank, like the footer over at We Build Pages. But, they can also look beau­ti­ful, impres­sive, and creative.

Bonus Tips for Designers!

Three mini bonus tips that are exclu­sively for design­ers to use to pro­mote their business.

Many design­ers drop an attri­bu­tion link in the footer of their designs like so:

“Web­site Designed by Cre­ative Com­pany Name”

Here are 3 Mini SEO Tips

1.Include a key­word in that attri­bu­tion link. Stop link­ing your com­pany name only and at least include the “Web­site Designed” por­tion. Even bet­ter, use some­thing like “Designed by: Com­pany Name – A New York Web Design Com­pany.”
2.Once you design a few sites with your keyword-rich attri­bu­tion link, change the word­ing. It doesn’t need to be dras­ti­cally dif­fer­ent, but cre­ate some vari­a­tion. Do this peri­od­i­cally.
3.Create a pre-sale page on their site that fea­tures a tes­ti­mo­nial and links back to your site. Then, link to this pre-sale page site-wide from the footer of their design. This will help you avoid the neg­a­tives of the run of site links, while get­ting a link from a page with a lot of inter­nal PageR­ank flow­ing to it.
If you’re a designer, I hope these tips help you find some ele­gant design solu­tions to com­mon SEO design prob­lems. If you’re an SEO, I hope these tips are some­thing you can for­ward to your designer.

I’d love to hear any tips or tech­niques you use in your designs to han­dle com­plex design needs in a search engine friendly man­ner. If you have any great SEO tips, ideas, or ques­tions please leave a comment.

Related Posts:

• Be Care­ful in Choos­ing SEO Web Hosting
• SEO Black­mail – When the Web Designer Secretly Mur­ders Your Website
• Search Engine Opti­miza­tion Methods
• Under­stand­ing Search Engine Optimization
• Search Engine Opti­miza­tion Techniques

Tags: ever-changing, highly-misunderstood, search-engine, SEO, website-design