CSS Content-First Layouts

Search engine optimised layouts using CSS can make the content the first thing the search engines see in your source code while presenting more visually appealing content to your visitors.

CSS Content-First Layouts

In order to create a webpage where the content comes first we need to mark up the areas of the page. We use div tags and the id attribute to define containers. If you wish to define more than one of a particular container then you should use a class. IDs are used only where they appear once in the source code. CSS classes can have multiple instances.

It is also a good idea to use standard names for your layout and then it is easy to interchange CSS files. In fact I wonder why there isn’t a standard for naming the different parts of a website then style sheets could be interchanged with only minor modifications.

Defining CSS Layout

I always start by defining the most general CSS selectors first. So we define the ‘anything’ selector * and body with the most general properties that we would like to be applied as a default.

This is a good base to work from, you know if you know that if you define any classes or ids, they will have 0 margin and 0 padding. Next we define a wrapper id which will be the main container for the other elements of the page such as the content, navigation, header and footer.

This defines a container called wrapper with a width of 990px which is horizontally centred on the screen. We also set a background colour to make it easy to see where the container is on the screen.

Next we would like a content container, in which the useful content of the web page will be placed.

This creates a container that is 2/3rds of the width of the wrapper width. We float the container to the right and set it have a minimum height of 400px. This is so we can get some idea about the size of this container as it might appear on the page without filling it with content. To create a gap for the header we use padding-top to push the content down by 120 pixels.

Now we define containers for the left navigation bar, header and footer:

The import parts of the CSS are that a space for the header has been created by using padding-top to push down the navigation and content containers. Absolute positioning is then used to place the header in the empty space.

CSS File

Putting everything together, the code for the CSS is:

HTML Page Source

Creating a simple page we can see how the content appears as the first content the search engine will see.

Screenshot

The image below shows how the page will appear in the browser.

While this design is not going to win any awards, the background colours give you get the idea where the different divs are and how they fit together.

SEO Discussion

The technique can be adapted for sites that need to contain lots of images, such as e-commerce sites. Content explaining the site can be placed at the top of the source code so it will be indexed by the search engines but it can be positioned on the screen in an unobtrusive position. Perhaps below the fold. All that exquisitely honed text content will be yummed-up and indexed by the search engine but users will see appealing images.