5 Simple SEO Web Design Hacks

Sometimes we face major trade-offs between function and design..

Good website design often means better usability. That is, the user has plenty of visual elements and cues they can use to intuitively navigate their way through the site and content.

Where there can be a trade-off between design and performance, however, is in SEO. Often design elements do nothing for SEO, or can even harm SEO efforts.

In this article, we'll give you 5 tips for designers who want to make sure that their sites look great - and also have a chance of ranking well in the search engines.

Guest Post by CT Moore

1. Page Load Times

Recently, Google (and other search engines) have started factoring a page's load-times into how well that page will rank. Essentially, search engines are out to provide the highest quality results possible and their users are human beings who don't like to wait for your page to load. So if you have load-time problems, your site won't be seen as relevant to users.

There are a few things you can do to improve load-times.

First, you can optimize all our images so that they're not too heavy.

Second, you might consider a file hosting service. Essentially, you host all your images and media with them, they spread them throughout a global network of servers, and the server closest to the user's location is the one that loads the media on your site, meaning that the fields load quicker.

Third, you should optimize you CSS. For starters, you might want to look at ways to clean up and shorten your CSS so that there is less for browsers to process. However, you might also want to reconsider how many stylesheets you have layered over one another, and see if you can consolidate any of them.

Finally, you want to make sure that if you're running any widgets or javascript, that they load after the main content area loads. This way, you don't have to worry about third-party javascript not loading and taking your whole site down with you.

* * * * * * * * * *

2. HTML 5

There are two main SEO benefits to HTML 5. The first is load-times. For instance, HTML 5 offers an alternative to Flash, meaning that you can have rich media on your site that doesn't weigh a ton.

On another note, HTML 5 provides a number of tags above and beyond a < div >. These allow you to better organize and structure your content so that search engines can understand it. Some of these tags include < article >, < section >, < header >, < footer >, etc.

Each of these tags offers an opportunity to send yet another signal to search engines that a page, or specific part of a page, is relevant to a certain set of keywords. For instance, you might use the < article > tag instead of a < div > to let Google know that that part of the page is the main focus of the page, and therefore keyword there count for more than keywords elsewhere on the page.

Of course, Google has admitted that they haven't yet decided on how they will factor HTML 5 tags into ranking factors. But this much is clear: while it might not help your rankings, HTML 5 can still factor largely into SEO in the future, and it definitely won't hurt your rankings in the meantime.

* * * * * * * * * *

3. Optimizing Images

The manner in which you embed images on a page can affect SEO in a number of ways. Essentially, embed images can have up to 3 elements that can help support your SEO efforts.

First, there is the filename. Simply put, all your image files should be named something that describes the keywords they're relevant to. You should also use dashes to separate words instead of underscores.

For example, instead of naming your logo "coporate_logo.gif", you might consider "Company-Name-software-solutions.gif".

Second, there are alt attributes. These are what provide descriptive text when you hover over an image, and were originally conceived to help the vision-impaired navigate a page. But now, search engines use them to index what keywords an image is relevant for.

Alt attributes represent an opportunity to send one more signal to the search engines that a certain page or domain is relevant to a certain set of keywords. By writing a descriptive attribute, you can fit in a couple extra keyword variants to help that page rank better.

Finally, if the image is a hyperlink that links internally, you can also use the title attribute within the link. You see, a title attribute lets you indicate to search engines that link (and its landing page) are all about.

Of course, anchor text is a more common way to do this, but with image links, anchor text isn't really an option. So by slipping a title tag into the link portion of image link HTML, you can give search engines an additional indication as to what's waiting for users on the other side of that link.

* * * * * * * * * *

4. Copy Elements

They say that content is king for a number of reasons.

One of those reasons is the user: if there's not content, there's no reason for users to visit the page. But another reason is SEO: search engines use the keywords to determine what the page is all about.

So what does this have to do with design? Well, there are some HTML elements that you can use to both affect how your copy appears and boost your page's SEO.

What we're talking about here are header tags (H1, H2, etc.). These are great for sectioning off content on a page, and providing visual cues that help pull users through the content by making it more scanable.

But something else headers tags can do is send clear signals to search engines what a page is about. While the keywords that appear in your page copy are important for how a page ranks, the headers that break up that content can be even more important.

So start off a page off with an H1 (a "title" of the article), and then if you have more than 250 words on a page, consider how you can break that content up using H2 and H3 tags. This will make your content more scanable for users, but it will also provide another valuable place to input the keywords that you're trying to rank for.

* * * * * * * * * *

5. Flash Hacks

Of course, Flash isn't as popular as it used to be, and it's less and less common for new, flash-based websites to be launched these days. However, that doesn't mean that you might not have an existing flash site or a site with flash based elements on it. There are two general ways to get the most SEO juice out of your flash sites.

First, if you're dealing with a site that driven mostly by Flash, you'll want to create an HTML shell for the site that has page titles, meta descriptions, text links, and perhaps some descriptive content that reflects the flash content. Then use javascript to detect whether a browser can view Flash, and when it can't (such as a search engine bot), serve up the HTML shell version of the site.

Secondly, you can optimize individual Flash elements on a page. This applies to either a site that's entirely Flash-based, or an HTML that has some Flash elements.

Optimizing Flash elements is much like optimizing image. Simply name your Flash files with descriptive keywords, and use dashed to separate those keywords. By doing so, you'll add that many more signals to your pages to tell search engines what your content is all about, and that, in turn, will help you rank.

* * * * * * * * * *

Designed to Perform

When it comes to SEO, there doesn't necessarily have to be a trade-off between design and performance. Rather, much like with user-interfaces, good design can actually drive performance.

From HTML 5 to actual copy elements, there are a number of actions you can take to either SEO your existing design, or enhance your design for both SEO and usability.

Of course, sometimes we'll face unavoidable trade-offs between usability and SEO. In these cases, you should always build/design for users and not search engines.

After all, search engines are out to give users search results that are relevant to actual human beings, not bots. And if you always design for bots, no one will link to or visit your content, and you'll have no chance of ranking at all.

* * * * * * * * * *

About the Author: CT Moore (@gypsybandito) is a strategist, writer, and speaker who specializes in SEO and social content strategy. He's consulted for both start-ups and major brands, such as American Apparel, Yellow Pages Group, and Microsoft Canada. When he's not helping brands leverage digital media to reach their business goals online, he tries to find time to blog and/or write about things that have nothing to do with the internet.