Inline Styles

Style sheets give webmasters a way of controlling layout and presentation across all the pages in a website with only one file. This is incredibly useful when you have hundreds, thousands, millions of pages to manage. Even small websites of only five to ten pages can take advantage of the benefits of an external style sheet.

The benefits of using an external style sheet include:

  • Content and Design are Separated - By separating the content and design your markup can by clean. No more font tags, and other unnecessary tags. This also means using proper markup to describe your content. Using proper headings, paragraphs, lists and other elements.
  • Simplify Maintenance - Want to make a small change to the headings on your website. Edit your external style sheet and all your pages will reflect the change.
  • Better Search Engine Ranking - It has been my experience that search engines like websites that use styles sheets more than websites that are still using old table based layout. Switching to a style sheet layout might not rocket you to the top of the search engine results pages but it can help to improve your overall rankings. A website using an external style sheet has less code for the search engine spider to go through so it is more likely to index your content faster.
  • Bandwidth -  By moving style and layout information into an external style sheet you save on overall bandwidth for your site. Web browsers will cache the style sheet and use it on all subsequent requests to your website. Your web pages will also be smaller to download from a table based layout saving you even move bandwidth. A great example can be found at A List Apart where they discuss the bandwidth savings of Slashdot moving to a css based layout. They estimated a 14gb of bandwidth savings a day!
  • Website Speed - Overall your website will be faster by using style sheets.

You can link to an external style sheet in two ways. Both codes belong in the head section of your web page.

Using a link statement:

<link rel=stylesheet href="style.css" type="text/css" media=screen>

Notice the media element in the tag. If you are just worried about how the page will be display on a computer monitor use screen. If you don’t want to specify different style sheets for other medium such as print or tv, you can use all.

You can also import a style sheet using a command similar to the following:


<STYLE TYPE="text/css" MEDIA="screen">
<!–
@import url(http://www.yourwebsite.com/style.css);
–>
</STYLE>

or without using the complete url:

<STYLE TYPE="text/css" MEDIA="screen">
<!–
@import url(/style.css);
–>
</STYLE>

Overall using an external style sheet can save you an enormous amount of time with your website or blog and the benefits far out number any downsides that you might encounter. If your website or blog is not using and external style sheet consider switching to one.

Nested tables

Nested tables are often used to improperly control the layout of a web page, and are no longer used in modern web design. All layouts should be controlled by CSS. Furthermore, nested tables can break up the semantic order of a web page, and also unnecessarily increase the page size.

If you have a 3 column site using a table 1 row high and 3 cols wide. Then in the actual HTML, the centre column comes after the left.

If search engines look at the html, it is ofter assumed that the higher up something is in the html the more important. therefore with the table layout above, the left column (which could contain irelevent (sp?) content - ads, nav, junk) would take on more meaning than a centre column which contains all the words, headings and content a SE needs.

1. To eliminate code bloat, reduce page size, which is especially important for dynamic sites with tons of pages. Using nested tables put a lot of useless (from SE stand point) code into page. Using CSS page size can be reduced up to 30-50% since CSS code can be (and should be) put in external file and browser will read it once (unlike situation with tables, when the same code will be read again and again and again). Plus you can arrange content in such way that your content will be higher than different navigation menues, forms, etc., which is bebeficial for your SEO.

2. To have better control over page layout. In many cases you can easily switch from fixed width page layout to expandable depending on amount of the content on the pages.

Page Size

The concept of "page size" is defined as the sum of the file sizes for all the elements that make up a page, including the defining HTML file as well as all embedded objects (e.g., image files with GIF and JPG pictures). It is possible to get away with page designs that have larger page sizes as long as the HTML file is small and is coded to reduce the browser’s rendering time.

Today, the belief that the leading search engines limit the volume of indexed text by the notorious "100 KB" limit is still is still widely held within the SEO community, leaving SEOs’ customers scratching their heads as they try to figure out what to do with the text that extends beyond this limit.

An experiment published on sitepoint established the fact that the leading search engines differ considerably in terms of the the amount of page text they’re able to crawl. For Yahoo!, the limit is 210KB; for Google, 520KB; and for MSN, it’s 1030KB. Pages smaller than these sizes are indexed fully, while any text that extends beyond those limits will not be indexed.

Deprecated Tags

There is a reason why companies pay thousands of pounds to get websites designed by hand, with clean markup. And if you don’t know what’s the markup, it’s all that code that appears when you view the source of a web page.

Most GUI tools are terrible code generators. They create archaic code, and they create lots of it, even at places where no code is required. If you code by hand on the other hand, your markup is cleaner, and you keep away from inserting hundreds of unnecessary as well as deprecated tags. Search engines don’t like this, and there is a reason.

A cleaner markup means extremely light pages and it also means an increase in content-to-markup ratio. Search engines want more content and less code on your web pages. With less code on your page, your main content moves closer to the top and consequently, gets easily crawled. Remember that crawlers read only 150-250 words of your page and you should make sure everything important should be covered there. Pages with unnecessary and incorrectly nested code are difficult to crawl. They are also a hindrance to DOM scripting.

Accessibility is another important thing that gets compromised when you settle for unclean markup. If your web pages are not accessible to the visually impaired, they are not accessible to even the search engine crawlers because after all, a search engine crawler reads your web pages like a visually impaired person.

When you practice writing clean markup, you put things exactly where they should be, and this makes it easier for the search engines to find them. For instance, make proper use of the <h1>, <h2>, <p>, <ul> tags so that the search engine crawlers know what these tags contain

Use valid, semantic, lean, and accessible markup and it will significantly boost your rankings.

Word count and SEO

What is very difficult about search engine marketing is that facts are often combined with truth. And the truth is that a considerable number of pages with a word count between 400-800 words tend to rank. Does that mean that every single Web page should contain 400-800 words? No.

If a page can communicate a full thought or idea with less than 400 words, then I would not purposely try to add words just to hit a word count standard. Plenty of pages rank well that contain less than 400 words. In fact, many SEOs recommend that a page have at least 200 words. Where they came up with this number? I don’t know. I do know that a 200-word Web page usually contains enough content to communicate a full thought.

For example, let’s use a clothing ecommerce site’s product page. On a product page, end users want to see price, availability, sizes, material (what is the shirt made from - cotton, polyester, silk), colors, maybe even a few reviews. That is 100 words, easy. The site owner’s primary call to action is Add to Cart. So that call to action should be featured prominently on the page.

But what if site visitors are not ready to make a purchase? A smart webmaster will have related items available on the page. The related items are usually placed in the right column on a page, but I have seen them placed directly underneath the main product descriptions. These related items are also good for upselling in the event that a shopper does Add to Cart.

The related items are usually a combination of a thumbnail photo and a product name. That adds to the word count. Then add in the headings, breadcrumb links, text links at the bottom of the page, HTML title tags - and voila! A page that contains at least 200 words, is very focused (Add to Cart), and has a back-up plan if shoppers are not ready to take the main call to action.

On the flip side, if a site owner needs to communicate an idea in more than 800 words, I would not necessarily try to shorten the page’s content or split it up into multiple pages if the page is performing well. In terms of search engine optimization, a page that contains over 800 words might not be focused enough. A good SEO specialist can fix that by breaking up the text into more "scannable" units with keyword-rich headlines separating the units.

If you find that a 800+ word Web page is not performing well, even though it is fully optimized? Maybe it might be a good idea to divide the content into multiple pages. Remember, usability is very important. If you find that your target audience prefers the longer pages, then give it to them. If you find that your target audience prefers multiple, shorter pages, then give it to them. But do not obsess over word count. It’s a general guideline, not a Holy Grail of search engine optimization.

Page Structure

This page analyzes the headings structure of a webpage. It does so by searching for and displaying the page’s title and any headings (defined by H1 through H6) in the order they were found in the HTML of the page.

This helps to understand how a search engine spider (also known as a bot or a crawler) sees the page structure.

It also aids in writing effective web pages that make sense. The headings displayed in the output of this SEO tool show the web page’s structure. If the headings on their own do not mean anything, then the web page may need some editing.

The setup and structure of the individual pages of your web site can also have a tremendous impact on the success of your site with the leading search engines. It is therefore essential to conduct a thorough examination of potential bottlenecks.

To achieve the most effective search engine rankings, the most relevant keywords and phrases should not only be included within the body content of each page, but should also appear within other specific html tags: for example ‘alt’, ‘title’ and ‘h1′. Professional page structuring will help minimise potential problems and eliminate search engine restrictions.

Meta data is another important area of structural optimisation that often gets completely overlooked. Found in the head of each page these special tags contain the page descriptions that often appear in search results, important keywords and phrases specific to that page, author information and so on.