How a designer can ruin your rankings

SEO Optimization recommends you WordZe. Advanced web based keyword research tool that gives you detailed results on which keywords work for your business.

This post is kinda ironic since I am offering website design and coding services and the mistake was done by me. But I believe exposing my accidental mistakes might put aware many others to not make this same mistake (because it can really be made accidentally).

All this happened recently when I redesigned and published the new design of my xhtml/css coding services website which is based on WordPress. I would not like to discuss the design process or the look of the layout in this post, but rather the coding process which got my site penalized on the SERPs of Google even for its own name.

I mainly believe that this was the reason of penalization because I did notice the bug and fixed it, but its too late, and since there is no other reason I would see valid for penalization. Also would like to note that this innocent mistake effected in penalization only on the SERPs of Google but still ranking just great in Yahoo search engine and MSN search engine.

The Coding Mistake

The whole layout is using 2 background images for the body of the design (the header image which also extends lower to the body and the footer image). As the whole design layout is based on two colors also the content and links was based on two colors (and this is where horror starts).

Even tho viewing the layout from web browser everything is visible, text colors, background, links etc for search engines (mainly for Googlebot) the site had included hidden links and hidden text.

Via CSS the body had a background image which covered the header of the layout and extended to the content container due to the shading effect that it holds. To keep the container background color extend as the content will extend it was indeed used the background color for body via CSS. This body background color also effects the as background of every single element of the layout, which includes the header.

The link and text color of the header was the same as the body background color, but since for the body was also used a background image the text was visible. The mistake is that the header had no body color and this would result as hidden text and links to search engines.

This bug (or rather mistake) was easily fixed by setting a background color for header and changing slightly into darker (or lighter) color the text and link color for the header elements. But what remains unfixed is the SERPs of Google even tho the Google spider bot regularly crawls the content.

The Moral

The moral is simple and plain, mistakes like this can really happen and not be aware of it especially if the coders are in rush to finish the project because of the short deadline. My advice would be to give coders and designers the needed time that they believe it is required to finish the project and make the whole tests. While for the coders and designers I would advice to take really a close look on the current design the client has (in case your project is to redesign the site) and run all the necessary tests to check performance. As for these kind of mistakes, you can simple track them down by checking your CSS validation through URL of the site and not direct path to the CSS file.

Hope you enjoyed reading this article here at learn seo blog. If you want to follow up with the next posts in this blog subscribe to my RSS feed or have the posts delivered via email in your inbox.

Sharing is caring!