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 (http://www.smarttuxedo.com/) 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 (http://www.smarttuxedo.com/) you will find, nice, easy to read and 'crawlable' navigation text links. Go ahead and click on the Tuxedos (http://www.smarttuxedo.com/Tuxedos-1/) link.

Title Tag
So your on the Tuxedos (http://www.smarttuxedo.com/Tuxedos-1/) 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 (http://www.smarttuxedo.com/Tuxedos-1/by-brand/Neil-Allyn-1/) 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 (http://www.smarttuxedo.com/). 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 (http://www.rustybrick.com/seo_articles_9.php) 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? :D

[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! :D

Just as a starter I ran the site through linx viewer (http://www.delorie.com/web/lynxview.html) 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]

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! :D
How ironic. ;)

Just as a starter I ran the site through linx viewer (http://www.delorie.com/web/lynxview.html) 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. :)

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.

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.

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]

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]

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

Thank you, I got it.

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]

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 (http://www.brianapps.net/sizer.html).

[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.
What is the reason for the filenames being what they are? Till what point are keywords in the filename useful?
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.)
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]

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. ;)


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.


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]

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]

(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 (http://diveintoaccessibility.org/day_14_adding_titles_to_links.html) lists who benefits from title attributes.

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

[rustybrick]

I agree, but that might require manual work. It is not easy to do that by hand.

For static sites, its easy. But for pages that are dynamically generated, it can be time consuming.

[pageoneresults]

I agree, but that might require manual work. It is not easy to do that by hand. For static sites, its easy. But for pages that are dynamically generated, it can be time consuming.
Only if advanced planning was not performed in how the content was to be entered into the database and which fields were going to be utilized for the dynamics.

It can be very difficult when acquiring someone else's database development and then trying to scrape usable content for page creation. There may be times where you have to bite the bullet and redo what was originally done (worse case scenario).

But, if you have control of the database from scratch, then developing and implementing a strict set of guidelines as to how titles, descriptions and other pertinent information are entered is of great benefit.

When dealing with dynamic content, the goal would be to make those URIs as short and targeted as possible. One, two, maybe three levels deep depending on the depth of the content and navigation structure. One, maybe two hyphens to separate words but no more than that if it can be avoided.

I've found that if I structure the site in a way where I can easily type URI strings and locate content, then the spiders will be able to locate that content just as easily. Depending on your targeted audience, URI strings can be a benefit, or they can be a detriment. Long URI strings are a detriment, short ones are a benefit. URI strings just for search engines can sometimes be a detriment. Now that user friendliness is the buzzword, you want to make them short and easy to remember. Branding comes into play too.

Instead of using the product description as the URI string, maybe just use the product id. There are so many other areas where you can target your chosen keywords, that you don't need to butcher the URI strings just for the search engines. The W3C even make this point many times in their online documentation.

In reference to my previous reply concerning the title attribute, here is what the W3C have to say about it...

7.4.3 The title attribute (http://www.w3.org/TR/REC-html40/struct/global.html#h-7.4.3)

Here is what the W3C have to say about URI structure...

Choose URIs wisely (http://www.w3.org/QA/Tips/uri-choose)
Managing URIs (http://www.w3.org/QA/Tips/uri-manage)

I think once you've read the above authoritative documentation, you may have a slight change of heart. ;)

[rustybrick]

With all do respect, I agree with all that you have to say. But you must understand that when building this site, we do not only think from the SEO side of things.

My firm is really focused on building sites that are efficient, easy to use and search friendly. To require my client, in this case, on individual, to manage different database fields for the title tag, title attribute, alt tags, the URI, and so on, would be inefficient. I make some sacrifices to ensure efficiency.

In regards to the documents you listed, there are reasons for the recommendations in the document. But for instance, you call me up and your looking for the Tuxedo category on Smart Tuxedo. I tell you to go to http://www.smarttuxedo.com/-1/ or you want a specific product like this one http://www.smarttuxedo.com/-1/-25.html. See those URI strings, I can do it that way as well. I can easily remove the redirect as well, I can do it in a matter of seconds.

My goal is to balance the pros and cons of the Web, not just SEO, not just usability, not just conversions and not just back-office efficiency.

Again, I agree with you. In the perfect world, I would make my client enter in a database field for each one but I made decisions, that I feel, are a good balance. And of course, I can easily change this when needed.

[pageoneresults]

In the perfect world, I would make my client enter in a database field for each one.
You probably don't need to go that far, but, that sure would be the perfect world as you state.

You can easily implement a standard set of guidelines though for the client. A simple one page document that outlines how they should enter their titles, descriptions, file names, image names, etc. is in order as it will be of great benefit in the long run, trust me on this.

If you cannot control certain aspects of the database content, then you have to resort to hacks to piecemeal content from what has already been entered over the years, yuck! We've written scripts to parse the first sentence of descriptions to utilize as meta descriptions. We've also written scripts to pull the first three words of the title and utilize that in other areas.

If you talk to the client and let them know that their input of data directly influences their search engine marketing campaign, they will listen in most instances. Show them examples, give them some training via telcon or other media outlet.

Ask them to limit their titles to 7-9 words. Utilize the primary keyword phrase as the first part of the title. It needs to read well. You may even parse those first few words and utilize them in other areas.

Ask them to limit their initial opening paragraph to 140-160 characters. You can then use this for the meta description and other areas.

Ask them to name their images appropriately. One, two, three word file names, hyphenated.

Ask them to name their pages appropriately, if they have that control. They may want to use the first two, three words from the title as a page name, it is an option. I prefer directory structure naming over page naming when possible.

Just let them know since they are entering the content, that they have considerable control over the resulting output in the SERPs.

[rustybrick]

Education takes time. I agree with everything you said. But this will happen with this site over time. I am taking it in stages.

I really do appreciate all of this, my goal is to implement it all over time.

[Chris Boggs]

Rusty: I'll have that comparison URL soon...we are about to change every page on the site and are a little worried right now since it has such great rankings across the board in a competitive field...


I agree with that.

me too. As one example, many people need to move their JavaScript into a different location simply to provide content closer to the spider's eyes.

A further note about structure: one thing I use for reading pages from the POV of many spiders is the lynx viewer (http://www.delorie.com/web/lynxview.html) found at delorie.com. This has helped me dramatically since I really am only familiar with the META portion of source code. I can ID frames and other glaring structural search engine inhibitors within HTML, but as a non-developer, that tool helps me a lot.

[craigbedard]

Does anyone have a list of recommended SEO friendly shopping carts (e-commerce solutions) that is scalable to 1.5 million+ records. I have checked Forrester and Jupiter for white paper (recommendations) without any luck. Rusty, do you use a custom solution or do you use a pre-built shopping cart?

Thanks,
Craig

[rustybrick]

Rusty, do you use a custom solution or do you use a pre-built shopping cart?

Thanks,
Craig

Hi Craig,

Welcome to the forums! :)

All out e-commerce solutions are custom built. I am not aware of pre-built packages that are search friendly (maybe Monstercommerce?). But please start a new thread to discuss SE Friendly Pre Built Shopping Carts.

Thank you.

[Chris Boggs]

I will post an example as soon as I get clearance from up top, and perhaps we can directly compare then.

This site was just re-done and it maintained top rankings for the term "oriental rugs" and some others. This site (http://www.orientalrugsonline.com/) even ranks for the term "rugs" after the changes (which occured over a month ago).
Does this qualify for "from the ground up?"

[rustybrick]

This site was just re-done and it maintained top rankings for the term "oriental rugs" and some others. This site (http://www.orientalrugsonline.com/) even ranks for the term "rugs" after the changes (which occured over a month ago).
Does this qualify for "from the ground up?"

Looks like a site well done from the SEO side. Nice SEO work, based on a quick look.

[Chris Boggs]

thanks rusty...that means something coming from you. We try :)

Do you think the ecommerce blends well with helping the SEO side?

[rustybrick]

I think the usability and call to actions can be spruced up to increase conversions. But I am sure it does well in the search engines.

[seomike]

Nice site Chris. Very well done. I've just finished an ecommerce site that is very similar in structure using a mod rewrite. A nice PR of 5 on the index and no inner PR until the next upadate lol.

What I'm finding though is that my product pages themselves are nailing terms that I didn't think they would get. My plan was to nail very specific terms at the product level, General and broad terms at the category and home page levels. but in fact the products are nailing rather broad terms. I might have over done it.

I guess a good example would be planning to try and rank for the term oriental carpets through a category in the site called oriental carpets but infact some of the actual carpet product pages are coming up lol.

I swear mods are almost too powerful :D

And since I'm tracking and parsing the referer strings from the se's I can see the terms people are coming in from and the pages they're landing on. Google by far puts more users into the products. Yahoo and MSN are more home page and category oriented. I think a very good conversion booster is to have a target zone in the home page. My thought was at first to put the top selling items there. But as I see traffic come in and out I'm going to customize the home page by putting exactly what they searched for instead. I've written the function to search the database and I'm pretty satisfied with it's acuracy so now it's just down to implementing it!!!

I am impressed though with both G and Inktomi and how quickly the gobbled up new pages. They crawled the entire site on a Friday and it was ranking for the terms on Monday in both G and Y.

[Chris Boggs]

I think the usability and call to actions can be spruced up to increase conversions. But I am sure it does well in the search engines.

I hear that! This is a situation of client preference. There are some pages designed more towards converting PPC visits...

[Chris Boggs]

Nice site Chris. Very well done. I've just finished an ecommerce site that is very similar in structure using a mod rewrite. A nice PR of 5 on the index and no inner PR until the next upadate lol..

I can't take credit for this one...mostly the boss' work. I see a lot of valuable statistics on traffic to this site that shows that it has been well designed with the searcher in mind.


I am impressed though with both G and Inktomi and how quickly the gobbled up new pages. They crawled the entire site on a Friday and it was ranking for the terms on Monday in both G and Y.

Can I take a peek? you can pm me if you don't want it "public."

[rustybrick]

I used to build out all these custom tracking tools. But with all the advanced analytical tools available today, I stopped. Well, I stopped most of my custom tracking, because these advanced tracking methods are built in to the tools.

It is still important for us to tie a specific referral (and everything that goes with it, keyword, source, cost, etc.) to a specific order. But 3rd party tools have come a long way in the past 5 years.

[Marcia]

There have been a number of questions about dynamic/ecommerce sites lately, so it's time to bump up this marvelous thread so that it is easier to find.

[Chris Boggs]

Thanks Marcia for bumping this thread that I had forgotten about...

I think the usability and call to actions can be spruced up to increase conversions. But I am sure it does well in the search engines.

Rusty FYI we did a new landing page for PPC ads that was much more banner-intensive and the ROI from pure e-com sales rose dramatically within ten days! The site is still building more organic rankings (and continuing its paid efforts). The scalability of the SEO seems to be the key...allowing the site owner to include proper Titles, tags, and Attributes when adding more content.

This in my opinion is one of the most important aspects of designing an e-com site. If, in the original site structure planning, you can make it so that the data-inputers have some role in helping the optimization, the site will provide more and more relevant content with each page added. The biggest mistake is to use duplicate META Titles or even none at all...

[rustybrick]

This in my opinion is one of the most important aspects of designing an e-com site. If, in the original site structure planning, you can make it so that the data-inputers have some role in helping the optimization, the site will provide more and more relevant content with each page added.
Can't agree with you more.

And thanks Marcia.