Search Engine Friendly E-Commerce Design From Ground Up

[rustybrick]

One often finds helpful posts in regards to open source programs, to help them quickly put up a search engine friendly forum, blog, CMS and e-commerce site. But I feel one can learn a tremendous amount from understanding how to deploy such a site by building an e-commerce site (or forum, blog, cms) by hand. One thing I personally have a lot of experience with is managing the build of new, search engine friendly sites; which include e-commerce sites, content management systems and more. So in my 1,000th post in this forum, I would like to take you few some of the areas I find to be critical in the development of a search engine friendly, but at the same time, easy to use (i.e. high conversion rates) e-commerce site.

To make this post as useful as possible, I am going to share a site that my company built for a client (this client is one of the few that does not mind me publicly displaying his site). I always find it beneficial to show real life examples. Keep in mind, this site is not perfect, but it covers most of the basics of a search engine friendly site. The site's name is Smart Tuxedos and can be found at http://www.smarttuxedo.com/. Let's begin the site tour.

Navigation
Arguably many e-commerce sites often overlook the most important and fundamental area to any Web site, the navigation. For niche sites that focus on a specific sub-group of product, in our case the tuxedos sub group of apparel, it is preferable to keep the navigation constant throughout every page you want the search engine to visit. So if you visit the homepage you will find, nice, easy to read and 'crawlable' navigation text links. Go ahead and click on the Tuxedos link.

Title Tag
So your on the Tuxedos page now, look up at the top of the browser, the title bar above the URL, it reads "Tuxedos from Smart Tuxedo". How is that done? Look into the data, and pull the category name from the database and insert it into the title tag. Click on the "filter by brand" Neil Allyn Tuxedos link. Hey, that took us about two hours to program and now, the site has landing pages for both natural and paid search. Search engines should rank this site well for Neil Allyn Tuxedos in due time, and in his PPC campaigns, he can send people who search on Neil Allyn Tuxedos to this landing page. Of course, if you had hundreds of brands and categories, the number of landing pages you can make is beautiful.

Same deal with product landing pages, pull product name from the database, insert it in the title tag and presto, a page targeting a specific keyword phrase. When someone searches on a product name, don't you think they are already in buy mode, or close to it? Your natural search traffic, by default, should go to the product page, but also send your PPC traffic to that page, if searched on.

Cascading Style Sheets
On this site, we do not deploy much CSS positioning. On others we try to make sure the content is at the tippy top of the source code. Why make the spider suffer, making them dig deep inside the source to find the content that the web users see anyway? We have deployed many uses of CSS on this site. The H1 tags are reformatted to match the site's color scheme, the links of course are reformatted to match.

But a cool thing we did with CSS can be found on the homepage. You see the pictures side by side, you can mouse over them and the description of the product is displayed in the box on the right of the images. You can also use the arrows on the left and right of the row of images to scroll through some more products. We did this because our client wanted some sort of flash scrolling featured product viewer on the homepage. Instead of flash, we used CSS. Take a look at the code of the page. We dynamically pull "featured products" in the database into the scrolling product viewer and use CSS to make it work. The code is clean and fairly search engine friendly. So now we get the best of both worlds, a cool and fun product scrolling viewer AND the search engines can *see* it as well.

Conclusion
I can go on forever about the little things we implemented to make this site search engine friendly, but there is only so much one can right in a forum post. I have written an article early December named Search Engine Friendly E-Commerce Catalogs which goes into more detail on the search and usability side. Feel free to ask specific questions about search engine friendly e-commerce sites here, even about the Smart Tuxedo site. Again, this site is not perfect, I have a wish list of areas I would like to improve, but of course there is a budget.

[Nacho]

Happy 1,000th Barry!

[Joseph Morin]

Awesome 0-1000 in 4 months.

[rustybrick]

You know what they say, Quantity over Quality. Or is it the other way around?

[Marcia]

It's Q&Q both!

Awesome post, it'll be nice to get some questions and answers going - it's a topic a lot of people are wanting to know more about, especially the navigation part.

[AussieWebmaster]

Yes that was a nice walk thru and we should create a few generic cases that new visitors can look at of various areas... PPC for Google and Overture strategies... come to mind.

[Chris Boggs]

Hi Rusty nice looking site and we can all use help in designing ecommerce sites to be more SE-friendly. As a matter of fact I was going to ask in here if anyone has had success in optimizing Yahoo Store sites. Also I thought it would be appropriate to do my 100th post as an answer to your 1000th!

Just as a starter I ran the site through linx viewer and was somewhat impressed. I like to use that tool as a better idea of "how" many SE's look at the site. I will be interested to track the SEO efforts and see how you do.

I imagine that you have a linking initiative underway? I see you currently have a PR of 4 but did not look into your linking.Of course the SEW link is nice but certainly not industry-relevant.

I am "worried" about the hidden cpu link at the bottom and would caution that someone (or spider) will eventually see that and it will hurt.

I believe that the content could appear closer to the top of the source and that it could be further optimized. I am curious as to why you have a nice simple META description on the home page but a veritable volume in the descriptions on some of the sub pages (I just took a precursory look here.)

Please do not take this as an attack. I am very grateful that you have put this site up for discussion and I am curious as to wether our methods, although slightly different, will create similar results. We have an ecommerce product as well and are working on optimization efforts with some of our clients. I will post an example as soon as I get clearance from up top, and perhaps we can directly compare then.

[rustybrick]

Originally Posted by Chris Boggs

Hi Rusty nice looking site and we can all use help in designing ecommerce sites to be more SE-friendly. As a matter of fact I was going to ask in here if anyone has had success in optimizing Yahoo Store sites. Also I thought it would be appropriate to do my 100th post as an answer to your 1000th!

How ironic.

Originally Posted by Chris Boggs

Just as a starter I ran the site through linx viewer and was somewhat impressed. I like to use that tool as a better idea of "how" many SE's look at the site. I will be interested to track the SEO efforts and see how you do.

I imagine that you have a linking initiative underway? I see you currently have a PR of 4 but did not look into your linking.Of course the SEW link is nice but certainly not industry-relevant.

To be honest, I did close to nothing in the form of link building for this client. All I did was do my best to explain how the client should take on the task of obtaining links. The SEW link will do close to nothing for the client, but I felt the client deserved it, since we are using his site as a case study.

Originally Posted by Chris Boggs

I am "worried" about the hidden cpu link at the bottom and would caution that someone (or spider) will eventually see that and it will hurt.

I made sure not to make it hidden. It is clearly visible, I just don't want it to take over the page, and distract the user. In no way is it meant to be hidden from the user or the spiders.

Originally Posted by Chris Boggs

I believe that the content could appear closer to the top of the source and that it could be further optimized. I am curious as to why you have a nice simple META description on the home page but a veritable volume in the descriptions on some of the sub pages (I just took a precursory look here.)

Most of our newer sites deploy CSS-P to achieve the content at the top optimization tactic. In regards to the META description, those are done dynamically, being pulled from various relevant fields in the database. I can put more effort into making them read better, even thought they are dynamic.

Originally Posted by Chris Boggs

Please do not take this as an attack. I am very grateful that you have put this site up for discussion and I am curious as to wether our methods, although slightly different, will create similar results. We have an ecommerce product as well and are working on optimization efforts with some of our clients. I will post an example as soon as I get clearance from up top, and perhaps we can directly compare then.

I did not take it as a personal attack but thanks for the note, just in case.

I am looking forward to seeing your work.

Thanks!

[gomer]

As noted, a great post thanks.

I have a question that is not directly related to the SEO aspects of the site but rather the design. I noticed that the site was built for a screen resolution of 1024x768.

I use 800x600 resolution and I was under the impression that most computer users used that resolution as well. I found the navigation difficult to use and see since I had to use the horizontal scroll bar at the bottom of the screen.

My question for you is, am I right in thinking that most users have settings of 800x600 resolution? If so, I am curious as to why you chose to design the site for 1024x768.

I hope this question does not divert the thread from its topic but even a quick answer would be appreciated.

Thanks.
-gomer

[AussieWebmaster]

Originally Posted by gomer

As noted, a great post thanks.

I have a question that is not directly related to the SEO aspects of the site but rather the design. I noticed that the site was built for a screen resolution of 1024x768.

I use 800x600 resolution and I was under the impression that most computer users used that resolution as well. I found the navigation difficult to use and see since I had to use the horizontal scroll bar at the bottom of the screen.

My question for you is, am I right in thinking that most users have settings of 800x600 resolution? If so, I am curious as to why you chose to design the site for 1024x768.

I hope this question does not divert the thread from its topic but even a quick answer would be appreciated.

Thanks.
-gomer

use options in the browser recognition and you can have all visitors get right view....

[rustybrick]

Good question.

In fact, about 60% of the visitors are on 1024x768, whereas 28% are on 800x600.

But, I thought we did program an alternative view if you are indeed coming from an 800x600 or smaller screen size.

gomer, can you send me a screen capture at barry AT rustybrick.com, if it wouldn't be too much trouble?

[gomer]

RustyBrick,

I emailed you some screen shots. Let me know if you did not get them.

In fact, about 60% of the visitors are on 1024x768, whereas 28% are on 800x600

Is that for the Smart Tuxedo site or web users in general?

[rustybrick]

Originally Posted by gomer

I emailed you some screen shots. Let me know if you did not get them.

Thank you, I got it.

Originally Posted by gomer

Is that for the Smart Tuxedo site or web users in general?

That is specifically for Smart Tuxedo for the month of October so far.

[sanity]

Originally Posted by rustybrick

Good question.

In fact, about 60% of the visitors are on 1024x768, whereas 28% are on 800x600.

Another point to consider is even if visitors are on 1024x768 they may not be viewing at full screen. I'm on 1152x864 but view at 1024x768.

A handy tool to check your design at different resolutions is Sizer.

[rustybrick]

Just to make sure this post stays on track, this thread is to discuss only the search engine friendly design aspect of the site. Not resolution size, not link building and not why you would or not buy from the site. I appreciate the advice, but I need to make sure this thread stays on topic. "Search engine friendly E-commerce design".

Thanks.

[polarmate]

Thank you for the insights into making sites search engine friendly. I do have some quick questions based on the design. I hope they are considered to be on-topic.

1. What is the reason for the filenames being what they are? Till what point are keywords in the filename useful?
2. There is a lot of text in the the title attribute of the A tag. Is this attribute finally being given weightage by the SEs? (Incidentally, on Firefox all that shows is a single line followed by three dots - so this does not help users with Moz based browsers much, if the objective is to be user-friendly.)
3. How important is document structure / HTML code to being search engine friendly? Or is that relegated to best practices rather than SE friendly?

[rustybrick]

Hi,

Let me answer your questions:

(1) The filenames are created dynamically based on the category name and product name. I do not know if they have any impact on ranking. I do feel that if people see the product name, or query terms, in the SERP, even if in the URL, they are more likely to click. But it was done dynamically.

(2) Well, the title attribute is easy to code for. So why not dynamically place the product name in that attribute? We did not do this in ever place, but it doesnt hurt and only takes a few minutes when programming the site.

(3) I doubt it is very important, how many sites do you know, are 100% perfect?

I can not speak to how much X, Y or Z is worth to the different search engines. You know that.

[pageoneresults]

Originally Posted by polarmate

What is the reason for the filenames being what they are? Till what point are keywords in the filename useful?

I feel strongly that after the second or third hyphen the keywords in the URI string are somewhat negated. Also, from a user standpoint, those are some very unfriendly URIs. Same applies to a maintenance standpoint.

Originally Posted by polarmate

There is a lot of text in the the title attribute of the A tag. Is this attribute finally being given weightage by the SEs? (Incidentally, on Firefox all that shows is a single line followed by three dots - so this does not help users with Moz based browsers much, if the objective is to be user-friendly.)

According to many postings in the search engine community, title attributes are not weighted in the algo. Or, if they are, it is very minimal to say the least. Also, title attributes only display for a short period in IE. Anything beyond a certain number of words is going to be negated by the timed limit on the display of the title attribute. According to the guidelines for the use of title attributes, they should be short and succinct and describe the destination of the link.

Originally Posted by polarmate

How important is document structure / HTML code to being search engine friendly? Or is that relegated to best practices rather than SE friendly?

Document structure is very important in the overall scheme. Relevancy is assigned based on a variety of factors with positioning of content being one of them.

[rustybrick]

Originally Posted by pageoneresults

Document structure is very important in the overall scheme. Relevancy is assigned based on a variety of factors with positioning of content being one of them.

I agree with that.

[polarmate]

Originally Posted by rustybrick

(2) Well, the title attribute is easy to code for. So why not dynamically place the product name in that attribute? We did not do this in ever place, but it doesnt hurt and only takes a few minutes when programming the site.

If the title attribute for links is not of any consequence, then wouldn't it be a good idea to use title attributes for the reason that they were introduced? Mark Pilgrim's Dive Into Accesibility - Adding Titles to links lists who benefits from title attributes.

Sometimes it's a good idea to step back and ask the question 'Why' instead of 'Why not?'