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.



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?

  • Jovy @ Web Outsourcing Gateway

    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. 

    This is actually the most realistic scenarion in the web. Too often, SEO is being forgotten or simply not taken much consideration in designing a website. It is so much better to just focus on the Off-site SEO when the on-site SEO is already handled well. This is then a never-ending process as far as SEO is concern because no one can be too sure of his/her website’s page rank.

    • web design india

      Hey Jovy! Can you please suggest me some effective off-page optimization technique that can give a instant boost to my website…??

      • Jovy @ Web Outsourcing Gateway

        Hi. Well I don’t intend to sound as if I’m an SEO expert already because I still have lots of things to learn. Effective off-site/off-page optimization techniques however, start from building a good back link for your site/blog through a good community of backlinks, etc,. the stuff we hear/read most of the time when we are searching SEO in the net. Also, one great rule to remember is to still be careful about everything that you are writing about, because your comments, posts, blogs, etc can make or break your SEO campaign.

        I hope I am correct with this,. I haven’t been so active this past few weeks that’s why I only answered your question now.

  • Duncan MacDonald

    ” Most times, what we would do is create a graphic and just use an image map when it’s time to code it. ”
    No, what we would do is indent the link text by a huge amount, then use a background image in the css, meaning it’s still accessible, for both screen readers, basic browsers, and SEO purposes. If you want to complain about design /dev practices on the web, maybe you should actually bother to learn some, because reading through this article, it strikes me that you don’t have a clue what you’re talking about.

    • Anonymous

      While I would have said it a bit more tactfully than Duncan, I kind of have to agree – your article is sufficient for a brand spankin’ new web designer, but for the rest of us it’s actually a bit of an over simplification. Perhaps that’s the audience you’re writing to?

      Also, Duncan’s indenting text technique is the same that I use every day – especially if I need to use images in my navigation. It’s a pretty standard one in most front end web dev environments.

      All that being said, I didn’t read your article as a complaint at all (not sure where Duncan is getting that), but merely a starting point for some folks to reset their way of doing things. Would advise Duncan to maybe be a little less of a troll?

      • Kendra Gaines

        So you’re saying not to write to brand spanking new designers? I don’t use either technique but have used image maps in my earlier days and I’ve seen people still use them. 

        But the point is not to get hung up on the ‘examples’ but the principles here. 

      • Anonymous

        Not at all – was more providing a counter point to Duncan’s astringent comment (trying to point out that you were writing about the basics for starters, instead of jaded guys like him). 

        Your principles are sound, for sure. No need to take offense.

  • SBP Romania

    I agree with Jovy, a

    • Sergio

      Completely I support! People don’t need to forget about that sites should be before for people. Otherwise shortly the Internet will turn to garbage.

  • Designely

    One thing I’ve always wondered about when it comes to designing for SEO  is – would it be possible to make an image header as “” in a page? Would the search engines count it as “” which is one of the most important things on a page?

    I’m thinking about adding an image, giving it “alt” text and putting it into “” tags… I hope that would work out.

  • Anonymous

    I have always understood that using text indent can actually harm SEO since positioning content off screen is frowned upon by Google.

  • Mobile Application Development

    Some people start directly with off page activities and forget the important points in on page like designing and content.

  • seo services

    Absolutely agree on the point of view “design for text”.We mustn’t forget to create the website for the search engines as well.Otherwise, it may hurt the rankings and traffic.

  • Web Designer Edinburgh

    off-site passive ? do not think that it will happen, now a days off-site needs to go along with on-site SEO

  • Kendra Gaines

    I like that, especially for web design. But I’d make designing for the user like 1.5 instead of 2 lol.

  • tydesign

    Good general tips to keep in mind. Not really sure it’s ‘designing for seo’ though.

  • Anonymous

    Great article!  Been putting a lot more thought into SEO but definitely want to keep our sites looking good!

  • Gustavs Jurisons

    Useful information, however, to fully understand how SEO works and then applying those rules to code, the whole process takes A LOT of time and patience. The success will mainly depend on how fast you can adapt and apply changes.