Hiding Text with CSS for SEO

Posted on Jan 7, 2010
Anytime the word hiding is used in context with search engine optimization, I cringe, especially if I’m working with a client who has been hiding text on their website from the view of user specifically to trick the search engines into thinking they have great structured content. An example of how this technique is used would be a webmaster who built a website that has is heavy in design and doesn’t accommodate much room for text, is told to apply search engine optimization best practices. Since their aren’t any global SEO standards recorded, the webmaster proactively decides that adding text and using an organized page structure is a good idea. The site owner thinks the text takes away from the design and disapproves the change. Being that the webmaster was charges with being responsible for the SEO, he decides to keep the text on the page and put a script in place that still renders the text in the browser, but is not visible by the user. Here is a sample of the code used:

<style type="text/css">
#hiddentext
{
display:none;
}
</style>
<div id="hiddentext">
All my great content goes here, but is not being displayed to the user because
the div is set to display:none.
</div>
<div id="coolsite">
My visible content goes here.
</div>
<div id="coolsite">
My visible content goes here.
</div>
According to Google’s Webmaster Guidelines, this is not an acceptable strategy to increase ranking in the search results. In fact, in the Advanced SEO Community (those of us who live and breathe SEO), hiding text specifically for ranking is considered to be a Black Hat technique that’s frowned on by nearly all of us.
Hiding text or links in your content can cause your site to be perceived as untrustworthy since it presents information to search engines differently than to visitors. Text (such as excessive keywords) can be hidden in several ways, including:
  • Using white text on a white background
  • Including text behind an image
  • Using CSS to hide text
  • Setting the font size to 0
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. When evaluating your site to see if it includes hidden text or links, look for anything that’s not easily viewable by visitors of your site. Are any text or links there solely for search engines rather than visitors?
Here is the link to the Google Webmaster Central page referenced above: http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=66353 Google also states that,
If your site has been removed from our search results, review our webmaster guidelines for more information. Once you’ve made your changes and are confident that your site no longer violates our guidelines, submit your site for reconsideration.

When is Hiding Text with CSS Acceptable?

When looking at the guidelines from Google, the simplest answer is “just don’t do it.” However, there is always a website hand-built by some great web developer that isn’t using industry standard programming or building off an industry standard platform; and only he/she can make updates to the framework. If you have one of those web developers on your team and there is absolutely no other choice but to hide text, here are some common scenarios and solutions:

You Have a Print Only View Version of Your Web Page

In your print-only version of a page, you do not want the navigation, heading or footer added. There is a way to hide the text, where you are less likely to get flagged. This technique can be found on Mike Fitz’s blog if you want all the details; here’s the overview:
  1. Create and link to a unique style sheet specifically for printing
  2. Include an “@media print” section in the existing style sheet
  3. Create an in-line style in the HTML
Example of how to link to the additional style sheet:
<link rel="stylesheet" href="http://brisgeek.com/mike/wp-content/themes/mikefitz/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://brisgeek.com/mike/wp-content/themes/mikefitz/styleprint.css" type="text/css" media="print" />
Example of how to include an “@media print” section in the existing style sheet:

/* **** SCREEN Section */
/* Top Banner (incorporating Logo) on main Portal Pages */
.ms-bannerframe {
    background-color: #000066;
    border-bottom:1px #000066 solid;
    }
    /* other screen styles go here */

/* **** PRINT Section */
@media print {
    table.ms-bannerframe {
        display : none;
        }
    #SPSWC_NavBar {  /* Top nav bar on Portal pages*/
        display : none;
        }
        /* other print styles go here */

    }
Example of how to include the in-line style in the HTML:
<style media="print">
#leftnav, #bottomNav {
display: none;
}
</style>

Got Any Other Examples Where You Would Need to Hide Text?

Share your scenario and solution below.

No related posts.