Does applying CSS to an h1 element affect SEO?

Paul B

XenForo moderator
Staff member
An interesting question has arisen in relation to SEO; well, as interesting as SEO can be...

On the forum home page there is an h1 element which contains the forum name; in the case of XenForo.com it's XenForo Community.

Quite a few people have asked how this can be removed, but only on the forum home page.

This can be achieved several ways using CSS applied to EXTRA.css.

This one sets the font size to 0px:
Code:
.forum_list .titleBar h1 {
font-size: 0px;
}

This one prevents it from being displayed:
Code:
.forum_list .titleBar {
display: none;
}

I pay very little attention to SEO so will either of those affect it?

In both cases the h1 element is still present in the page source, it's just not visible.
 
"If your site is perceived to contain hidden text and links that are deceptive in intent your site may be removed from the Google index, and will not appear in search results pages."

Now, I'm sure smart people work at google, and they'll realize that the board title and the url matches. We aren't hiding keywords or a big list of words to improve our search ranking, only hiding a line of text that is the title of our board (in maximum 2 pages if using the portal add-on), which is mostly commonly just the same as the domain name. I'm sure google just won't see it that way without a valid reason :p I don't really consider it a gamble of any sort.


Make your own mind up reading this by Google themselves that you quoted, in which they make it pretty clear on the "very first line" really, that it's not such a good idea.

Link: http://support.google.com/webmasters/bin/answer.py?hl=en&answer=66353

Hiding text or links in your content can cause your site to be perceived as untrustworthy

If you think that gamble is worth taking, fair enough. But it IS a gamble, one best avoided. That's my 2 cents worth on it and why gamble at all, just playing things safe would be the common sense thing to do?
 
I have a very long board title and didnt want it to be so large so I just made it like this:

Code:
.forum_list .titleBar h1 {
font-size: 10px;
}

I am trying to change the email phrases now though so it wont send those super long titles to everyones email box tho :/
 
Top Bottom