SEO and CSS: The Beauty, the Beast, and the Overweight

beautybeastpicLooks can be deceiving. Have you ever seen a movie with a beautiful woman who turns out to be a less than beautiful on the inside? Something can look gorgeous on the surface, but underneath lies a complete mess. Websites are no different. How many websites visually display a superficial Hollywood makeover, but hide an absolute train wreck of code on the inside?

As a coder first and foremost, and now when considering SEO, I’ve come across many websites with great outward design and breathtaking visuals, and then cringe when I view the beastly page code. Flashy menus and buttons, unnecessary inline styling, abhorrent tables, and line after line of irrelevant code create a tangled disaster. Some might be tempted to think as long as the website looks good, why does it matter what goes on under the hood? Why should internal code design matter to SEO? A few simple ideas will help improve the inner SEO beauty of your site and address why CSS is important in your efforts. Perhaps we can first discuss what we call a little bit of a “weight problem.”

Clean Up Your Pages and Lose Some Weight

Statistics show that about 65% of Americans are overweight, and in terms of code diet, I fear that many of our websites are guilty of the same lifestyle. Website health suffers when gorged with unnecessary and insignificant code, saving the relevant content as a last priority. Well it’s time to lose some of that weight and clean up your act.

Remember, web crawlers and spiders crawl code and not pretty visuals. Imagine trying to climb a mountain by cutting through all the shrubbery, rock, and dense foliage instead of simply taking the trail. It would take much longer to reach your destination. Likewise, search engine spiders can do their job more efficiently when you establish a clean code path to your important content.

Think light

Clean up your web pages by using only pure html for content and moving all presentation related code to CSS. After all isn’t that what CSS is for?  Not only will the pages load faster, but light, clean code is easier for web spiders to crawl. After losing some pounds in code weight, what about the placement of content? CSS allows us to structure SEO friendly code without sacrificing presentation.

Content First

Unfortunately, in all the glim and glam of modern websites, actual, relevant content often takes the back seat to presentation within page code. We tend to place fancy menus and numerous other lines of code first and then finally get to the content. For example, take a look at the image displaying a nice standard page layout and then note what the code probably looks like underneath. The main content does not even show up until line 423. What does this say to Spiders about its importance? It must traverse numerous lines just to get there. Tables, in particular, can be a pain for web crawlers and take longer to search due to their structure. I’m an advocate of simply avoiding table use altogether.

code1

Place the important content first within your code. Web crawlers scan pages left to right, top to bottom. Content placed closer to the beginning of code will be given a greater importance than content placed further down in the code. I know many are now thinking, “But if I change the order of my code, my nice web page will be out of order and look horrible!” Fortunately, CSS enables us to position our content and presentation wherever we want on the page. For example, say that we want our main, SEO rich content to show up near the bottom of our page, but we also want it to remain near the beginning of our code. We could simply place the content within a tag, and our CSS could position the element accordingly at the bottom.

CSS is an invaluable tool for both web design and SEO efforts. Through the proper use of html in cooperation with CSS, one can enjoy the best of both worlds, and maintain the surface beauty of a well designed site, whilst trimming the fat under the hood for optimal performance. Stay away from the superficial and give your website the “real” makeover it needs. Like the pretty girl in the movies, she and your website might be good to look at first, but the beast underneath can make your SEO life very unpleasant.

Get Internet Marketing Insight For Your Company - SEO.com

3 Comments

  1. Anne says

    Great article! Couldn’t agree more. I used to place the content tag before the side-bar tags when designing standard sites … not quite sure why I stopped that practice, but your article reminded me of the importance of placing the most important content at the top of any web page, and it should be reflected not only visually, but also “under the hood” in the page code. Thanks!

    I’m also in the habit of checking website code when I come across a beautifully (visually) designed website. 98% of the time these sites fail dismally in standards compliant usability, accessibility and search optimization.

  2. Moses says

    I like reading an article that will make people think.
    Also, many thanks for permitting me to comment!

Leave a Reply