What's worse: hiding text or removing text?

Question

I'm trying to find the right balance here, so I wanted to see if anyone knows which scenario below is better in terms of semantic markup and SEO.

Using this site's logo, Scenario 1:

<div id="hlogo">
    <a href="/">Stack Overflow</a>
</div>

#hlogo a {
    width:250px;
    height:61px;
    display:block;
    background-position:0 0;
    text-indent:-999999em;
    float:left;}

Or is it better to avoid hiding the text and simply use a rel attribute in the anchor tag?

<div id="hlogo">
    <a href="/" rel="Stack Overflow"></a>
</div>

#hlogo a {
    width:250px;
    height:61px;
    display:block;
    background-position:0 0;
    float:left;}

I'm wondering if removing the actual text "Stack Overflow" would be a bigger SEO hit than hiding the text. It seems as though everyone uses the text-indent method even though Google says that's a no no. What's the best way to achieve this for semantic markup and SEO?

Answer 1

I'm just going out on a limb here, but if it is 'hidden', it at least exists for the crawler to find. If you remove it, it just isn't there. To note, you don't have to use that pesky indent method. You can set the item to display: none;

However no one really knows how Google's ranking works. You may be penalized in SEO for hiding it. But the 'indent' method is a bit hacky so it makes it look like you are trying to hide something as opposed to just not showing it.

Answer 2

A rule of thumb: if you're worried about SEO and Google says something is a no no, you probably shouldn't do it.

I think your second option would work just fine for SEO purposes.

One of the main reasons people do the text-shift option is for accessibility. If someone isn't letting their browsers load images, you still get the title, etc.

Answer 3

http://www.seomoz.org/article/search-ranking-factors#negative-ranking-factors

10) Hiding Text with CSS by Offsetting the Pixel display outside the visible page area - low importance

Also, if you wanted to use your second example, I would suggest the title attribute versus the rel attribute. The rel attribute expects a link type, not random data.

Answer 4

You should also bear in mind the screen readers for the visually impaired.. using visibility:hidden and/or display:none can remove the text from both readers and crawlers (though I'm not sure about the latter), so think twice before using them.

I would rather use BOTH the text AND the title attribute (rather than rel). You can hide the text from view using one of the many image replacement techniques available. see http://css-discuss.incutio.com/wiki/Image_Replacement.

If you simply need to hide some text, I personally find this trick quite handy:

.some-element { 
    display: block;
    overflow: hidden;
    height: 0;
}

Answer 5

I would use your first solution every time. It's better for accessibility and infinitely more semantic. The two are on relatively equal footing from an SEO perspective (when using @simplemotives suggestion about using the title attribute rather than rel).

And there's certainly nothing 'hacky' about using text-indent. It's pretty much considered the industry-standard image replacement technique and the only one that factors in accessibility and portability.