Here’s a little trick that can help a lot with the SEO of your website by pushing all the important content right into Google’s hungry mouth.

It’s a CSS ‘trick’ which is completely ethical as all it does is rearrange the order of the content that Google sees into a more useful order. It will also actually help users on smaller screens (like mobiles), or visually impaired people using screen readers.

Separating out your content in your HTML file, and the styling & layout into CSS is a good thing. It makes your pages load faster, makes it easier to update for new uses like mobile devices and print, and allows you to do tricks like the following:

Hiphouses is a mock-up site built on Cubecart, a low cost eCommerce solution. I particularly like it over the more common osCommerce as it’s a lot easier to create bespoke designs for and has a lot less junk and extra code on each page. The site only took a couple of days to get set up and taking orders with a limited set of quite basic products.

Looking at the site here and reading from top to bottom and left-right we can see a lot of different items on the page before we get to our product information:

• Header image
• Login
• Mini shopping cart
• Menu
• Search box
• Bestsellers
• Mailing list

However, what Google sees is quite different. To get an idea, useingFirefox as your browser go to View > Page Style > No Style and you should see something like this:

Our product detail is now right at the top of the page, where it should be in terms of its logical or ’semantic’ importance. We’ve also put the product name in a heading tag to reinforce its importance.

A few SEO’s have indoicated that the first 1024 characters of your page content are the most important, so getting the information right to the top of the page really helps.

This article is the first link in to that site so let’s see how it does!

If any Cubecart users fancy using the theme for one of their own sites, the theme files are included here in the SEO Cubecart Theme. Just unzip the contents to your themes folder and then go to Store Config > General Settings > Styles & Misc > Store Skin to choose your new Skin.