Designing for search engine optimization

When it comes to designing a new web site, most beginning and unaware designers only care about how amazing the site will be.

Often times as designers, we can take off with a crazy idea for a site design and it ends up jam packed with design on top of design on top of design. Unfortunately, some of us don’t always consider one of the most important purposes of the site: to be found so that it can deliver content.

I mean, let’s be honest. How many people are putting up web sites just for the sake of putting up web sites? Not many.

And aside from having some great promotional strategy, the best way to get your web site discovered is through optimizing that site for the big search engines like Yahoo! or Google.

One of the issues with designers and search engine optimization is that we sometimes forget that SEO starts as soon as we begin designing a web page. There are so many things that go into creating a wonderfully ranked page, many of which have less to do with meta tags and descriptions than how we actually go about creating and putting forth our content.

For designers, we’ve got to be prepared and contribute as best we can to exceptional SEO.

What designers can do

Now, as designers, we typically don’t think SEO is for us. We just want to design a really wonderful website and keep it moving. What that’s a wonderful thought, it isn’t always the case, especially when you are designing a site that has to do well in page rankings. There are so many things that designers can do, as far as designing as well as a bit of coding, that can really help the optimization of a page.

Keep in mind we are talking about on-site SEO: all the things that you have control over to make a change in your site rankings. The better your on-site SEO, the easier it is for search engines like Yahoo! and Google to ‘crawl’ and index your pages to determine their relevance for any given search. Below are a couple of things that can help your placement.

Plan accordingly

SEO needs to be and should be taken into consideration as early as the creative process starts. Once you know what you’re designing for, who you are designing for and the purpose of the web site, you’ve got to be on point as a designer in making SEO easy.

Please don’t make a splash page

This is probably the only absolute there needs to be when you are designing a web page. It doesn’t matter if the client is fighting for a splash page or if you just think it would be so totally neat, you have got to nix this idea. Not only is it a super aged technique, but it does not help your SEO at all, especially if it’s just one of those splash pages that is a graphic and a ‘Click Here’ button.

There are some instances when splash pages are ok and make sense, but most times they aren’t. If you’re designing a site dedicated to local entertainment news, it’s definitely unnecessary. The way these search engines work is they typically ‘crawl’ or find most of the information needed from your index page. If your index page is a simple splash page, you are risking your chances at getting someone to visit your site. I know we’ve all searched for something on google and skipped over that site that had a terrible description such as “(Product Name) 2012. Click here to enter.” Don’t be that person.

Design for text

So, as designers, we really want everything to look good. We want it to make sense as well, but we REALLY want it to be aesthetically pleasing. Sometimes, because of that, we make way too many of our site elements graphics. For example, we may want a super sweet, unique menu that uses a decorative font and an obscure shape behind each link. Most times, what we would do is create a graphic and just use an image map when it’s time to code it. Something else designers do is create graphics for headings or headers.

This has got to stop, especially if you are putting a lot of content into your graphics. You have to think about it like this; what are you leaving for the search engines to pick up on? Search engines can’t see what your graphics say. You have to leave something to be said via text on your site. Fortunately for you, there are a ton of advancements in HTML and CSS, as well as plug-ins, that help make this a reality.

Image maps, image roll-overs and images for your navigational links should rarely be used. Again, search engines cannot notice an image and figure out what it says. Avoid using too many graphics for text because your content and all the ‘crawlable’ things are what makes a difference in your page rank. If you don’t have enough content, search engines won’t rank you highly.

Dim the dynamics

Before you even begin designing your web site, you’ve got to think about how you want to implement the features. If you rely too much on technologies such as Flash or Ajax, you may want to rethink your stance. The problem here is basically that the amount of support search engines have for HTML is just not as great as what’s available for more dynamic content.

Don’t get me wrong, I think some implementation is nice and necessary—no one wants to look at a static, unmoving webpage. But if you are creating a full site, it may be best to make sure these dynamics are used sparingly. Don’t use a Flash-based menu; that’s almost like using a graphical menu—just make it text. But do feel free to use a bit of animation via Flash or Ajax elsewhere to add a pop to your site.

File names should make sense

Here’s something you should be doing anyway; naming your files so they make sense. When you have to use an image for something, let’s say the picture for your ‘About’ page, you should try to make as much sense out of the name as possible. Don’t over do it and don’t under do it, but do try to make sense of it. Fortunately, there are some search engines, like Google Images, that can search through pictures. Some people use these searches to help them find, of course, an image that they like or to help them visualize an idea.

Whatever the usage, you have to keep in mind the search engine doesn’t have eyes, so you want to do as much work as possible. If you are creating a site about cupcakes, and on your ‘About’ page you want to use a picture of cupcakes, try not to name your file something like ‘about-page2-img.jpg’ or ‘cake123.jpg.’ Instead try something like ‘about-cupcakes.jpg.’ Keep in mind you don’t want it to be extremely long but you want it to make sense and you want it to relate to the topic of your website. If you’re website is about cupcakes and you name an image of a butter cake cupcake, ‘butter.jpg’, that image is going to come up for a completely different search; so instead, make sure it’s relevant and name it something like ‘butter-cupcake.jpg.’

And we’re up

Perhaps you are coding the site yourself, or perhaps you’re just going to drop it off and let whomever deal with it. Maybe you aren’t coding the whole thing, maybe you are just setting up the HTML and CSS so a more fluent developer can know what everything is and where everything goes. Regardless of what you’re preferred method is, there are some things you can do while putting the site up and once the site is up to ensure some solid SEO.

‘Alt’ tags are important

When you insert an image into a website, you have the option to add an alt tag. An alt tag is an alternate description of your image in the event it doesn’t show up or a viewer decides to turn off their images. Basically, if it can’t be seen, the description that’s in the alt tag will be displayed. The great thing about this feature is, since search engines can’t see and aren’t human they use these alt tags to help them determine the relevance of a website. This is like one of those features you want to utilize to help you increase your search engine rankings.

Not only does it help the relevance of your site, it helps the relevance of image searches. You must keep in mind that when a person searches for an image, the search engine ends up taking the person to the website. If your site remains relevant to that person, there’s a chance the person can start utilizing your site frequently, or they can find something else they are looking for.

Squeaky clean code

Regardless of who codes the website, your site MUST utilize the cleanest of code in order to reap the most benefits of search engine optimization. The reason is because, the better the code, the easier it is for search engines to ‘crawl’ your website and figure out what’s what. You have to remember, these are machines and formulas trying to place your site relatively in front of people, so you want to make it as easy as possible for them to pull up your information.

Of course, in your pre-planning stages, you want to have an idea of what kind of code will be utilized. It’s a bit easier to design knowing how to code and what part of an image or site is going to be a ‘div’ and what is going to be the ‘wrapper’ and things of that nature. The next part to this is knowing the standards of how to actually execute these kinds of features. There is a coding hierarchy that makes understanding easier, as well as there are web development standards and practices that need to be taken into consideration.

Not only does having clean code help with SEO, but it helps with your website’s performance, which should be another top priority.

Relate to those keywords

If you haven’t already, you want to do some keyword research to figure out what gets your audience ticking. You can use some of the free tools to do some research or you can just make educated guesses about topics you should cover or what kinds of things your site should display. And if none of that works, you want to make sure you just ask your audience.

You want to have a central theme to your site, whether you are a blog/magazine or you are just selling a product. Stay relevant to those things—if you’re a product talk about how other similar products can’t compare to the one you’re selling. But don’t talk about how you’re product is qualified because you have such an extensive education—and don’t talk about something totally different either. Staying central helps you to be more relevant to a person’s search in Yahoo! or Google.

Use your keywords, but find a good balance. Try not to over do it because you could end up being labeled as a spam site. Do it just enough to be relevant. It’s not really something to think about—it should really come naturally—but it’s not something you want to avoid all together, either.

Make offsite SEO passive

Everything we discussed above is what we call on-site search engine optimization. Off-site SEO refers to much of the stuff you can’t really handle such as back links and the sheer rewards you get as people share your website. You’ve got to keep everything above in mind while still creating an amazing design and delivering exceptional content. Once you’ve handled both these tasks, off-site SEO should be as passive as people sharing your site and linking to your site.

Conclusion

There’s no guaranteed way to get a great page ranking or a large amount of views–the best way to ensure all these things is to provide great content and awesome products.

Search engine optimization includes tons of other factors (some of which may not be listed), but these are obviously ways to at least put yourself and your site onto the right path. As designers, we cannot continue to try to pass the responsibility of SEO on and we can’t continue to act like it does not exist.

Hopefully, you have learned something new today and you understand the importance and the control you have on a site’s SEO.

What other techniques do you find helpful pairing design and search engine optimization?

Kendra Gaines

Kendra Gaines is a freelance designer from Virginia, USA. Connect with her.