Keywords and CSS, A Trick of the Trade [Archive] - Search Engine Roundtable Forums

PDA

View Full Version : Keywords and CSS, A Trick of the Trade



Randal Manthei
04-12-2006, 04:23 PM
While everyone knows that you code is much cleaner with a CSS, having all the style attributes tucked away in a single file as opposed to littered across your site, people have not taken the next step. Here it is:

Use SEM savvy keywords in the naming of classes in your CSS (Cascading Style Sheet).

When you begin to generate your CSS, you should also consider using valuable keywords to your business or products as the name of your classes.

For example, say you ran a chain of hotels in México. Instead of using a more tradition naming method to define your fonts in the CSS, use ones that are search engine marketing savvy.

Here is an example of a generically named CSS class:

.black12 {
font: 12px Helvetica, sans-serif;
text-decoration : none;
color: #000000;
}

Say this class defines the base font for all your pages throughout your site. It will appear in the <span> and <td> tags repeatedly in your code. Since it will be read by meta spiders indexing your page, you should rename the class to:

.hotels-mexico-b12 {
font: 12px Helvetica, sans-serif;
text-decoration : none;
color: #990000;
}

If you are just major resort, like in Cancun, you can be even more specific in your class naming scheme. This will help drive more qualified traffic to your website, as Mexico has resorts everywhere.

Here is an example of regional and business keyword phrase being used in the CSS:

.cancun-resort-b12 {
font: 12px Helvetica, sans-serif;
text-decoration : none;
color: #990000;
}

This little trick will help your site achieve a higher level of search engine optimization and help out in your organic search rankings. This is also a good way to include low tail keywords in your existing design. Since the greatest concern about this is keeping up with the naming scheme you employ, here is how I do it:

.cancun-resort-b12 {
font: 12px Helvetica, sans-serif;
text-decoration : none;
color: #990000;
}

The b stands for black and 12 stands for 12px. Say you had a header font which was red and 18px. Then the naming scheme would be:

.cancun-resort-r18 {

And to take it a step farther, each new class I attribute to the style of my page, I switch up the keywords. So I would use:

.cancun-hotel-r18 {

I am usually able to add in several keyword strings that I could not place anywhere else in the design without forcing it. Now, there is no reason to stop just at font and table styles. The same kind of dual naming scheme: keyword phrase+internal naming, can also be applied to Div and other type of classes.

And if you are using a spacer.gif as a design element, then I would highly suggest renaming spacer to your most valuable keyword string. In the example above, resort-in-cancun.gif would be the obvious choice.

St0n3y
04-12-2006, 04:51 PM
Looks like a spam technique to me.

Randal Manthei
04-12-2006, 05:05 PM
One of the keys of search engine optimization, as a whole, is to bring the most relevant web pages to the forefront. By adding in this detail information, which is currently junk in everyone's code, the crawlers are able to better define the content of your site based on the css classes you used. By using your definition of spam, every web designer is currently spamming generic css class names to the spiders, which is just not true.

You are using existing assets within your design, not creating frivilous code to generate spam.

Also, by your definition of spam, every sub-level page for every site on the entire internet would need to be using the exact same naming schema.

Example:

www.mynewspaper.com/mayor-impeachment.html

would have to be:

www.mynewspaer.com/article1.html

The same goes for the title tag and countless other assets.

St0n3y
04-12-2006, 05:33 PM
There is nothing wrong in using keywords where it makes sense to do this. Using keywords in URLs makes sense but it can also be a form of spam if you do it where it simply does not make sens. Creating keywords specific styles simply does not make sense. Nor does naming your styles as .style1, .style2, .style3 etc, but at least that's not keywords stuffing.

Heck, why not name your styles

.cancun-hotel-resort-mexico-vacation-package-destination-villa-r18?

If you're gonna stuff keywords, go for the gold!

Randal Manthei
04-12-2006, 06:16 PM
See, I was thinking in moderation. 15 characters at the most.

I can see where a misuse of this system could easily occur.

dazzlindonna
04-12-2006, 06:24 PM
It's a good point! Back when I was using a ColdFusion blog system (before I changed over to WordPress), it used the word "blog" in nearly all the css classes. Hence, i ended up getting tons of blog-related adsense ads. I changed those classes to use my keywords instead, and boom!, i got related adsense ads.

adrienne
05-02-2006, 12:01 PM
I think that is a brilliant idea Randal, and I am going to use it. I have just built a new home page (http://www.homebusinessadvisers.com) and I am fed up with seeing the style names so this is a great reason to change them. Could use one keyword per style.

St0n3y
05-02-2006, 12:37 PM
That's interesting that the adsense spider would be reading that. If done in moderation I suppose it makes sense, especially if it produces better adsense results. I really wouldn't recommend doing it for standard optimization. Honestly, its probably not worth the extra few seconds of thought it would take to create a keyword named style, let alone remembering what each keyword named style is supposed to do.

Jade456
05-03-2006, 05:08 PM
I agree. I think the key here would be moderation. You could definitely go overboard quite easily.

BoSolaris
01-24-2007, 09:49 AM
Great idea for Keywords! What about your density though? If you are use a certain style too much on a page couldn't it put your density through the roof, no matter how moderate you are with the style names?

Aren't you wanting to have 2-5&#37; density?

Zhoog
01-26-2007, 09:52 AM
Are spiders really reading <font><td><table> tags. I always thought they just stripped those tags. This totally new to me and if I can believe dazzlindonna it has been tested.

Any other examples of this technique working?

torpengkute
01-29-2007, 03:07 PM
This ideas Done before... Now Google reads all CSS Style sheets. And its a Kind
of Grey hat Techniques... For me instead put my key word in CSS I'll go on put my keywords in Content. Either what Density is...:)

TitanEnterprises
06-05-2007, 12:14 PM
that really is an interesting concept. I would like to see if there is any data supporting it... or plain and simple does it really work?

web_designer
01-19-2011, 01:44 AM
I also agree with you...

gravic
02-03-2011, 05:38 AM
While everyone knows that you code is much cleaner with a CSS, having all the style attributes tucked away in a single file as opposed to littered across your site, people have not taken the next step. Here it is:

Use SEM savvy keywords in the naming of classes in your CSS (Cascading Style Sheet).

When you begin to generate your CSS, you should also consider using valuable keywords to your business or products as the name of your classes.

For example, say you ran a chain of hotels in México. Instead of using a more tradition naming method to define your fonts in the CSS, use ones that are search engine marketing savvy.

Here is an example of a generically named CSS class:

.black12 {
font: 12px Helvetica, sans-serif;
text-decoration : none;
color: #000000;
}

Say this class defines the base font for all your pages throughout your site. It will appear in the <span> and <td> tags repeatedly in your code. Since it will be read by meta spiders indexing your page, you should rename the class to:

.hotels-mexico-b12 {
font: 12px Helvetica, sans-serif;
text-decoration : none;
color: #990000;
}

If you are just major resort, like in Cancun, you can be even more specific in your class naming scheme. This will help drive more qualified traffic to your website, as Mexico has resorts everywhere.

Here is an example of regional and business keyword phrase being used in the CSS:

.cancun-resort-b12 {
font: 12px Helvetica, sans-serif;
text-decoration : none;
color: #990000;
}

This little trick will help your site achieve a higher level of search engine optimization and help out in your organic search rankings. This is also a good way to include low tail keywords in your existing design. Since the greatest concern about this is keeping up with the naming scheme you employ, here is how I do it:

.cancun-resort-b12 {
font: 12px Helvetica, sans-serif;
text-decoration : none;
color: #990000;
}

The b stands for black and 12 stands for 12px. Say you had a header font which was red and 18px. Then the naming scheme would be:

.cancun-resort-r18 {

And to take it a step farther, each new class I attribute to the style of my page, I switch up the keywords. So I would use:

.cancun-hotel-r18 {

I am usually able to add in several keyword strings that I could not place anywhere else in the design without forcing it. Now, there is no reason to stop just at font and table styles. The same kind of dual naming scheme: keyword phrase+internal naming, can also be applied to Div and other type of classes.

And if you are using a spacer.gif as a design element, then I would highly suggest renaming spacer to your most valuable keyword string. In the example above, resort-in-cancun.gif would be the obvious choice.

I think its old now.. do something unique and different.