Effective SEO Campaigns With XHTML/CSS

Any Internet marketing professional will tell you that an effective Search Engine Optimization campaign will do far more to generate traffic to your website than the most expensive banner-ad program or time consuming pay-per-click method.


This article will quickly go over how your website’s XHTML/CSS can be made more SEO friendly by way of improved code readability for search engine spiders, good content-to-code ratios that don’t exceed file size and word-count limits as well as how to mimic common image effects using CSS.


Clear and Readable Code

Much like the human eye, search engine spiders need your code to be as clear and readable as possible so they can quickly scan through and identify which category your page is relevant for. XHTML/CSS code that contains too much “junk text” with poor structural organization will confuse the spiders, and your website will fail to show up in search results.


Let's take a small example of right and wrong:

The reader sees a bold 32px red title at the top of the page. However, if you don’t have your markup implemented well enough, a search engine spider will not.


The wrong way:

HTML:
<strong><font color="red" size="32px">Page Title</font></strong>

The right way:

XHTML: 
<h1>Page Title</h1>

CSS:
h1 {
    color: red;
    font-size: 32px;
    font-weight: bold; }


Using Images Wisely

Many search engines place an emphasis on H1 tags placed directly after <body> tags, particularly if one or two of your keywords are included. Occasionally, though, it causes problems in your masthead image placement. We can sometimes get around that problem by using CSS to place the masthead logo as a background.


The following code goes to the CSS file:

CSS:
body {
    background: url(images/logo.png) fixed no-repeat top left; }


If you'll embed the logo as a background image instead of placing an <img> tag in to the markup can achieve that goal nicely. – But only if your layout requires placing the logo before the h1 element of course.


SEO Friendly Rollovers

For an example watching an email link that rotates every time you place your mouse over it is kind of a thrill, but image based rollovers are useless for search engine optimization purposes. Using CSS instead not only allows for lower file size but also provides you more textual content for the spiders to “read”. You can increase this small SEO advantage by making that textual link one of your keywords.


The Big Picture

When trying to increase your website’s search engine positioning, there are different paths you can take – some of them incredibly effective - others unethical and offensive. The best thing you can do aid your search category domination campaign is to make your website as SEO friendly as possibly by employing standards compliant XHTML/CSS coding methods.


Leave a Comment

Leave a Comment
- Why ask? To confirm you’re a person