Does applying CSS to an h1 element affect SEO?

[Paul B]

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:

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

This one prevents it from being displayed:

.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.

 

[Carlos]

FYI, my post wasn't really opinion.

This one here:

The cloaking you refer to is embedding keywords into the bottom (common practice) and deceive visitors from knowing what's with the white space. In this instance; let's say your site is xenforo, and you want a a thousand keywords at the bottom, which means you want a light grey color for your keywords.... This is where Google punishes you.

Correlates with what google says in their cloaking policy:

• Using white text on a white background
• Including text behind an image
• Using CSS to hide text
• Setting the font size to 0

• The link consists of hidden text (for example, the text color and background color are identical).
• CSS has been used to make tiny hyperlinks, as little as one pixel high.
• The link is hidden in a small character - for example, a hyphen in the middle of a paragraph.

Not once, but twice. [bolded]

Even though that they say "link" specifically, you can't do it for text, either. Especially with keywords you want to target.

 

[Xarcell]

Well, I guess that solves it.

 

[robdog]

Guys, Google DOES index "HIDDEN" text. You can apply whatever non-sense CSS you want to text, but Google DOES index your pages and can apply search phrase to the hidden text.

Link:
http://tomaltman.com/does-the-google-bot-index-css-hidden-divs/

Of course, you should be doing this for a reason that is beneficial to the user or you going to get slapped... eventually.

 

[Marcus]

Css would be no problem with the exception of hiding the element (either by display:none or by coloring it to have the same effect). I display the last breadcrumb element within the breadcrumb line with h1 {display:inline}.

 

[Kier]

It is my understanding that Google in particular does now pay attention to styling, and to tricks like moving or hiding elements with CSS or JavaScript. It would appear that the Googlebot is now sufficiently intelligent to compare the source code with the final page output, and to determine the importance of page elements based both on their markup and their final position and appearance on the page.

 

[Floris]

FYI, my post wasn't really opinion.

This one here:

Correlates with what google says in their cloaking policy:

• Using white text on a white background
• Including text behind an image
• Using CSS to hide text
• Setting the font size to 0

• The link consists of hidden text (for example, the text color and background color are identical).
• CSS has been used to make tiny hyperlinks, as little as one pixel high.
• The link is hidden in a small character - for example, a hyphen in the middle of a paragraph.

Not once, but twice. [bolded]

Even though that they say "link" specifically, you can't do it for text, either. Especially with keywords you want to target.

The first bold has this right in front of it:

Text (such as excessive keywords) can be hidden in several ways, including:

The second below has this below it:

Hidden links are links that are intended to be crawled by Googlebot, but are unreadable to humans because:
With directly following: 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.

Which completely changes what they mean to say.

 

[Cezz]

That's my understanding too, I just want to clarify it to put the minds of others to rest.

In my information Google and other more advanced spiders look at the styling of elements too if they are hidden, 0px, text-indent: -99999px; or the same color as containing element then they are ignored...

 

[Paul B]

My tests show so far that the h1 tag isn't being ignored by Google, despite it having display:none applied to it.

 

[HannahP]

It would appear that the Googlebot is now sufficiently intelligent to compare the source code with the final page output, and to determine the importance of page elements based both on their markup and their final position and appearance on the page.

It knows, yes, but it doesn't compare, strictly speaking. It parses CSS and looks for common tactics (such as manipulating H tags to hide or introduce text).

"Tricking" or staying a step ahead of Google has become very difficult. They change their algorithm more than 500 times a year, so if you think you are getting one over on them, odds are, you are not.

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

 

[Jason]

As others have mentioned, Googlebot actually does pay attention to styling. It also parses javascript. It takes into account text that is hidden from view, but mostly for the purpose of determining whether the page is spammy. There are loads of sites using display:none for valid reasons. Simply hiding an h1 tag is not going to lead to your site being penalized unless you're doing something more sinister as well.

Google is pretty good at figuring out what is there for legitimate reasons versus spam.

 

[dutchbb]

The styling can have an effect and result in penalty when abused, I pointed that out. The point was that the crawler will index all content in the source code regardless of its styling, also if your styling is intended for esthetical purposes, you should not receive a penalty.

 

[Jason]

Matt Cutts pretty much sums up Google's position on hidden content nicely...

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

In other words, unless you're intentionally being "sinister," you're most likely fine, though you'll get indexed sub-optimally.

 

[Carlos]

Which completely changes what they mean to say.

Not exactly. They still punish those who hide text on the same color.

I just shared that one example in this thread - I have seen a few websites that put grey text on grey background (same hue, exact same color), and they were banned from Google's rankings.

 

[ibnesayeed]

I have heard that using image logo as background and pushing logo text out of sight using negative text-indent may also be not a good idea when it comes to SEO. So I did it in another way. Creating a very minimal font having just one or two ligatures in it. Not having individual characters but mapping whole logo keyword to a glyph or two. Then the footprint of the compiled font will be about 10KB. Use that that font as CSS3 @font-face declaration. Font file can be hosted somewhere or base64 encoded in the CSS file itself (however is considered to be suitable for caching). Now style the logo text (don't use image) using CSS3 color, stroke, shadow, transform, or any text effect you like on your logo.

 

[account8226]

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:

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

This one prevents it from being displayed:

.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.

I heard google can blacklist you if you hide text to improve ur seo ?

 

[Paul B]

Only if you do it in an attempt to deceive.

 

[mrGTB]

Thanks Floris, we've already discussed Google's cloaking policy.

My understanding is that as it's not "deceptive in intent" then it should be fine.
It's simply done for aesthetic reasons.

Of course Google may see things differently.

Having a quick read of that Google page Floris posted, I think you could be wrong in your thinking.

Hidden links are links that are intended to be crawled by Googlebot, but are unreadable to humans because:

• The link consists of hidden text (for example, the text color and background color are identical).
• CSS has been used to make tiny hyperlinks, as little as one pixel high.
• The link is hidden in a small character - for example, a hyphen in the middle of a paragraph.

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.

While I know your not trying to be deceptive, Google could still see that way. It's a gamble at the very least your taking doing it. Personally, I wouldn't even use H1 Tag for Forum Board Title, instead using <title></title>. Keeping H1, H2, H3 used for threads. H1 for thread title and so on.

 

[Divvens]

Having a quick read of that Google page Floris posted, I think you could be wrong in your thinking.



While I know your not trying to be deceptive, Google could still see that way. It's a gamble at the very least your taking doing it. Personally, I wouldn't even use H1 Tag for Forum Board Title, instead using <title></title>. Keeping H1, H2, H3 used for threads. H1 for thread title and so on.

"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 I don't really consider it a gamble of any sort.

 

[bashy]

I was thinking of doing this too. Reading through, no it won't harm the SEO just by hiding the page title.

Anyone thought about putting some if else statements to display the text normally if it's the Googlebot agent?

 

[Rob]

If you are hiding the entire element then in my experience, your H1 will not be attributing its full weight to SEO.
One alternative, and perhaps a better approach would be to use a background image as your h1 (sometimes a logo is suitable for this) and apply negative text margins.

h1 {
background: url {yourimage.jpg} no-repeat top left;
text-indent: -10000px;
width:blah;
height:blah;
}
 
 
HTML:
<h1>Page Title</h1>

Another approach is to use the page title in the breadcrumb, making the latter element an h1 - you can style it with css and display:inline.

It's always a bad idea imo to completely hide the element.

Just my $0.02