H1 or all H tags formatting question

[art4x]

Hi,
I know the importance of using H1 tags for titles on a web page. But does anyone know if I can use some code like this to tone down the size of the text?

<h1><span class>text</span></h1>

Where the class would be a css attribute that would make the text size fit with the rest of the smaller text on the page?

Thanks for any insight, or feedback.

~Mike

[pixelcop]

Hi,
it is best to use an external style sheet and link it to each page like

<link href="styles.css" rel="stylesheet" type="text/css" />

You can style the H1 tag like this:

h1 {
font-size: 110%;
}

or

h1 {
font-size: 14px;
}

or

h1 {
font-size: 1.1 em;
}

[pixelcop]

You just style the H1 tag, you don't need any <span> tags, just leave the markup like
<h1>Heading</h1>

[detlev]

Hello everyone,

FYI: It isn't a good idea to have more than one H1 in a page. Also, when resizing fonts with CSS styles, it is considered a bad practice to make tiny text with CSS fooling the robot about H1. I would recommend that any mods you make are only slight variants of what would be normally displayed without CSS. The engineer that checks you out will make a judgement against you if you are styling for the purpose of hiding text or minimizing the normal display of H1 headings.

Hope this helps,
-detlev

[seomike]

it is considered a bad practice to make tiny text with CSS fooling the robot about H1.

Since when?? By whom?? and for how long??

I've dropped my h1 tags to look like body text and never had a problem at all. To tell ya the truth I don't even think SE's gives a crap if you have them or not. I think they've been depreciated like meta tags have been and good ridence :D

[detlev]

Hello SEOMike,

Since when??

Since ~2000.

By whom?? and for how long??

Altavista and they now are at Yahoo! I was there around year 2000 and brought the subject up with AV at SES San Francisco. Altavista was keenly interested to hear that CSS styles could do this and later they went as far as retrieving a sampling of CSS documents associated with HTML that refers to them using src=.

My comment was about styling H1 to look like tiny text, and I rightly said it is considered a bad practice. Ordinary text could also come under the same scrutiny because H1 is not intended to look like ordinary text. What all this is really dependent upon today is if your pages achieve an unfair ranking which spoils the search user experience. I would not make suggestions that could raise an eyebrow if the source code were closely looked at by a search engine though.

With H1 not being a silver bullet, like you said, that technique alone isn't worth that much for rankings. Unless you achieve top rankings for a competitive term and had a competitor ask an engineer to look at your source code for spam, of course you will get away with it until forever. It isn't something that is easily detected automatically even inline with the code. With CSS, you can use virtually whatever word you want for the label. I think that Altavista ultimately found it too difficult to detect because the practice of retrieving CSS docs went away as fast as it had appeared.

For more see Altavista get request on css files (http://www.webmasterworld.com/forum1/1394.htm?highlight=altavista+css)

Hope this helps.

*cheers*
-detlev

[creativecraig]

Engineers have better things to be doing with their time I would hope!

What all this is really dependent upon today is if your pages achieve an unfair ranking which spoils the search user experience. I would not make suggestions that could raise an eyebrow if the source code were closely looked at by a search engine though.

How would that be unfair, and who is to say that a site that resizes their H1 tags in CSS would not be a good user experience - things have moved on a little since 2000.

[detlev]

Hi CreativeCraig,

Engineers have better things to be doing with their time I would hope!

Yeah, they do. They improve their search engine. If they decide to look at why a particular site is ranking well in their engine, they will zip into the source code to see what is going on. That is one way they can quality test their algorithm and it happens all the time. If they detect a little SEO, they probably wouldn't care much especially if it is a site that they think deserves the positioning and the SEO isn't totally obnoxious.

If, however, they start to see things like whole paragraphs in H1 at the top of the code resized with CSS to tiny text meant to display at the bottom of the page, then that will raise their eyebrow and may be cause for further consideration. Text like this can contain spammy words having nothing to do with the page that weigh as much as ordinary text in the algorithm. I've seen this and I would call it spam.

Google has confirmed at SES that tiny text is not weighted very highly in their algorithm. That's kind of obvious and most engines do that. For this reason, H1 resized to tiny text is what I've said may cause you a problem if you do this. This is because you are tricking the engines into thinking the text is normally sized (even larger with H1) when it isn't actually displayed that way to most users.

CSS rendering H1 a little smoother (even a little smaller) is probably okay if you use H1 properly. H1 was designed to be a Heading container for the page, not a paragraph container to be used throughout the page. To go overboard with any SEO technique is a spammy thing to do that can get you in trouble with the search engines, including acting on old SEO information like CSS rendering H1 to look normal.

CSS is just one of those things the search engines are aware about. Just because the technique is old doesn't mean they've stopped checking it out. Cloaking has been around for ages and they still try to detect it. One guy at WebmsterWorld mentions that CSS can be used to "pseudo cloak." It's true, so use it sparingly in case your source code gets looked at. Browse your page without CSS to make sure that it passes the smell test before you publish H1 with CSS modifying the font size.

If you show one thing to search engines, and something else to the search user, you are degrading the search user experience. That is the possible outcome with CSS used to optimize your pages (especially with H1) and I wanted to explain that.

Hope this helps,
-detlev

[art4x]

Awesome discussion. Thank you so much for all your replies.

[seomike]

So AV doesn't like css biiiiiig whoop. Look where they're at now. Soo anyways back to the real point. Will changing your hx font size or colors in css hurt your site? NOPE.

[detlev]

Seomike is right, changing H1 font size and color with css isn't that big a deal. The W3C will even suggest it. (http://www.w3.org/QA/Tips/Use_h1_for_Title) Just don't go overboard. CSS can be used to spam. Although they went through a brain drain period, many AV folks are now at Yahoo!

Making AV sound like a "has been" kinda hurts even if it is nearly true. I used to love AV. They invented many things that we take for granted these days in a search engine. They were the best at several points during the history of search and yes they liked H1s (maybe a little too much,) it's true.

At one point AV powered MSN and at that same time even provided text based advertising which looked like the top search listings surrounded by a thin yellow border. It was unique and new at the time. They got heavily flamed for it and dropped the program!

Best,
-detlev

[Chris_D]

Will changing your hx font size or colors in css hurt your site?

As long as you have used the hx tags in a semantically correct manner, there is no issue. As Detlev said, the W3C, and standards based web design, advocates that html/xhtml be used for content, and CSS is used for presentation

Whilst the current situation is that search engines don't read CSS files - human review of a site probably will (for example, I have a toolbar which allows me to switch CSS off/ on). So using CSS to hide text at the top of a page or using CSS to make entire pages appear as paragraph text whilst using hx tags will probably cause grief if a human reviewed the site.

Using hx tags in a semantically correct manner is the key. If you are restyling fonts from a 'presentation' perspective - but using the hx tags in a correct semantic fashion - it shouldn't be an issue.

But if you are using CSS to e.g. hide text, wrap the whole page content in hx tags, position text off the page, i.e. to distort the semantic meaning or deliver diffferent on page content - thats your call - because a hand review will easily expose the tactic within seconds. It always remminds me of that line from the Clint Eastwood Dirty Harry movie - '....feeling lucky punk?'

:)