7 Ways Designers & Developers Can Optimize Sites for Search Engines

By / May 18, 2011 / Tips
shares

Web designers and developers have many responsibilities when it comes to building websites. From creating a solid layout for the front-end, to writing clean code so that the site runs bug free – there’s a lot involved. However, one thing that is often neglected and should fall on both the designer and developer is search engine optimization. Here are seven ways designers and developers can practice better SEO.

1. Avoid image heavy designs

It’s no secret that images often lead to heavy designs that can cause longer than desired load times. More and more data points to Google emphasizing page speed in their ranking factors. If you aren’t able to cut back on images, design images so that they can be repeated in CSS. With modern CSS, effects such as gradients and drop shadows can be achieved without using images as required in the past.

2. Don’t design navigation links in images

One of the easiest ways for Google to determine what a page is about is through the anchor text of a link. Navigation does just that, while also adding a medium of organization as well. With tools such as type kit available, the excuse of image based navigation is non-existent anymore.

3. Condense CSS and JS files into one document

As noted above, page speed is becoming a big player in the ranking factors. A quick and easy way to get a small win is by condensing CSS and JS files into one document each. For every document that is listed in the code a new call from the server is required, therefore increasing the load time. By decreasing that to just one call for each file type, you decrease the number of calls, therefore decreasing load time.

4. Keep header tag near top of code

Header tags often indicate the title of a piece of content. Frequently, this is where SEOs place keyword phrases that they are trying to rank for. Theories are that content near the top of an HTML document carries more weight than that of content in areas such as the footer. H1 tags should be used for titles of content.

5. Use CSS Sprites

At Pubcon South 2011, Aaron Shear, the SEO for Zappos talked about the importance of CSS sprites, a savvy way of combining images using CSS to decrease load time. While the concept of doing it manually can be daunting, Google recommends a great tool called SpriteMe, which I’ve seen great results with personally.

6. Keep the tag lines away from the top

One of the first things you want Google to see in your code is the keywords related to that page. Often designers put slogans and tag lines in the header of a design. This isn’t ideal as the first piece of content Google will see on each page is that slogan or tag line which won’t be related to that page. If you aren’t able to migrate this to another part of the site, it’s best to put it in an image.

7. Stop using text-indent:-9999px

Programmers have often used text-indent:-9999px to trick the engines into thinking there is an actual keyword in an image. If you’re forced to use an image instead of text, don’t try to fool the worlds largest and most sophisticated search engine. Use an alt tag. They know people do this and the team at Google has spoken out against this multiple times.

About the Author

Tommy Swanson is in charge of SEO and social media for numerous nationally recognized non-profit organizations. He is also a serial online entrepreneur who has built and sold several large businesses since his early teens. Swanson currently holds the position of CEO at FuseVps, a cheap vps provider.

26 Comments

  1. Zap Media
    May 18, 2011

    The huge increase of SmartPhone & Tablet users connecting to the internet (especially with G3) is a big indicator that site load speed is without doubt going to affect search engine rankings.

    Reply
  2. Johan
    May 18, 2011

    Good post! I would like to read more about what the designer can do to create a more SEO friendly site.

    Reply
  3. freddy
    May 18, 2011

    Pretty rudimentary stuff here but, like they say, oldies but goodies. That’s why I prefer minimalist designs, not that minimalism itself is easier in terms of SEO, simply less clutter IMO.

    Reply
  4. Butch V.
    May 18, 2011

    Number 2 is an eye-opener for me. Thanks for sharing! :)

    Reply
  5. Luke
    May 18, 2011

    I am a little confused – in point #5 you advise us to use CSS Sprites, but then in #7 you cry out that the use of CSS to push text off the page (a common trick used to allow the styling of anchors and performing of rollovers) should never be used.

    Which is the greater good, lesser evil? Personally, I use the text-indent method all the time, allowing me to use the same HTML and multiple CSS stylesheets to customise the layout and presentation of the content dependent on the viewer. If it is such a bad method (and it would be nice to see some of these instances where Google has spoken out about this – I found an article by a Googler, who, in comments regarding the article, softened her stance noticeably), and using a single, standalone, unsprited image is not an option, then what are we to do?

    Reply
  6. Zoots
    May 18, 2011

    “don’t try to fool the worlds largest and most sophisticated search engine”

    Thank you for this. I have to deal SEO hucksters constantly that think they can game the system.

    Reply
  7. Fazreen
    May 18, 2011

    Number 2 and 7 is a new thing for me. Thanks for the post

    Reply
  8. Vera
    May 18, 2011

    Good points, most of them quite logical, but I’m not too sure about number 7.

    On the one hand, if you have something like:
    <tag><img src=’…’ /> some text here </tag>
    in this case it of course makes sense to use an alt attribute (not tag, by the way ;) ) instead of CSS.

    What if you have?
    <tag><some text here </tag>
    and the CSS:
    tag{ background: url(‘…’) 0 0 no-repeat; text-indent: -9999px;}

    I find the above example perfectly legit. Especially since in such cases images have a decorative purpose, so there’s no need to have HTML image tags in the documents.

    Granted, I also use:
    <tag><<span class=”hide”>&ltsome text here </span> </tag>
    with:
    span.hide{ display: none;}

    Isn’t the previous example more efficient though?

    Reply
  9. albert
    May 18, 2011

    text-indent:-9999px is perfectly acceptable if you are using image replacement correctly. your recommendation to not use image elements in navigation and sprites are dead on, text-indent:-9999px goes hand-in-hand with those.
    check out http://mezzoblue.com/tests/revised-image-replacement/

    Reply
  10. Philip
    May 18, 2011

    #7 makes me raise an eyebrow…

    This topic has been beaten to a pulp for a long time now, and as far as I know, the consensus is that if you have a style rule like this:

    h1.ir { “text-indent: -999em; background-image: url(‘philsDonutShop.png’);” }

    you’re doing something sinister and black-listable if your h1 looks like this:

    online donut shop, donut supplier, awesome donuts, really great donuts, best donuts EVAR

    but that it’s just fine and dandy to do something like:

    Phil’s Donut Shop

    since it’s not doing anything deceptive. ESPECIALLY with the HTML5 spec’s outlining algorithm, we’re forced to use image-replaced h1′s so that the outlines don’t look all gross.

    Reply
  11. David
    May 18, 2011

    I will be revisiting my website with a couple new ideas that ran through my head while I was reading this. Great post!

    Reply
  12. Tommy Swanson
    May 18, 2011

    Thank you all for the positive feedback! :)

    For those of you who have expressed some concern about point #7 regarding text-indent, here’s a blog post by Maile Ohye, the Senior Support Engineer at Google. She’s very well respected in the SEO community and has spoke at several of the larger conferences.

    http://maileohye.com/html-text-indent-not-messing-up-your-rankings/

    Reply
  13. Sajjad
    May 19, 2011

    #7 is something strange, people are using effectively and its ok, anyhow more explanation is required. and i do agree to Philip’s point as well.

    Reply
  14. Pragmatic Design
    May 19, 2011

    Thanks for the post. It’s always good to be reminded of these things.

    Page speed should be a major factor anyway- visitors won’t wait for slow websites!

    Reply
  15. Kick Interactive
    May 19, 2011

    Thanks for the article, we’ve just re-tweeted. Sent the tip about SpriteMe to some of our interactive designers.

    I found number 6 particularly interesting as your always told html text is better than images, however your right the text needs to be relevant to the content of the page.

    Thanks

    Ben

    Reply
  16. Kenji
    May 20, 2011

    My opinion: Most of these points are valid and neccessary to keep in mind, of course, when designing a website. However, your #1 priority as a web designer should be to provide the best (whatever that may be) experience for your readers/users – not to make it as Google-friendly as possible at absolutely any price.

    Therefore SEO should always be considered a recommendation, a way to improve where content and design allow it. It should not be a dogmatic guideline that dictates your craft.

    If you are concerned about your page ranking, then offer a lot of original and interesting content/information on your website – that is still the most important factor in that score.

    Reply
  17. Conor Darcy
    May 20, 2011

    Point 7 is not entirely true. You can hide text in some circumstances. Matt Cutts, who is head of Google’s Web Spam team, once wrote:
    “If you’re straight-out using CSS to hide text, don’t be surprised if that is called spam. I’m not saying that mouseovers or DHTML text or have-a-logo-but-also-have-text is spam; I answered that last one at a conference when I said “imagine how it would look to a visitor, a competitor, or someone checking out a spam report. If you show your company’s name and it’s Expo Markers instead of an Expo Markers logo, you should be fine. If the text you decide to show is ‘Expo Markers cheap online discount buy online Expo Markers sale …’ then I would be more cautious, because that can look bad.”

    Reply
  18. Jonathan Weisberg
    May 20, 2011

    excellent tips! I’ll be sure to incorporate a few of these…

    Reply
  19. Vladimir
    May 21, 2011

    These good to know hints for SEO.
    Thanks for sharing them with me :)

    Reply
  20. macem
    May 23, 2011

    Point 7 is new for me, I use image-replacement in content sometimes but not for site navigation.

    Reply
  21. barog
    May 24, 2011

    I have read a lot of tips like this. but this is really different. thanks

    Reply
  22. Gustavo
    May 26, 2011

    Good stuff here but your comment on using text-indent: -9999px; is completely wrong. Google uses this technique on their very own website and many others!

    #6 was confusing what do you mean? Slogans aren’t important to spiders?

    Reply
  23. David Colburn
    June 1, 2011

    I use #7 not to mess with Google but to give the folks using devices like JAWS a chance to hear the company name. They aren’t going to be able to see the logo and know it.

    Reply
  24. aditia
    June 10, 2011

    all have been done except css sprites, still have to learn more about it

    Reply
  25. Micheal Zabloudil
    August 29, 2011

    Saved as a preferred, I genuinely like your blog!

    Reply
  26. Custom IDX Solutions
    January 30, 2012

    We use CSS Sprites all the time and I can tell you load time increases big time and we have seen some SEO bumps from it.

    Reply

Leave a Reply