“display:none”  in CSS can be very easily misused as a black hat SEO tactic. I am going to show you how to use this CSS trick to increase your web page’s user experience using white hat SEO.

Before:

This table is in a webpage that I made for the salary information for computer programmers. HTML tables are not always the prettiest way to represent information so I created an image to take it’s place.

After:

The image is better looking than the HTML table but web crawlers cannot read the information on the image.

Code:

If you look at the code below you will see how I put the style=”display:none;”   *inline eith the HTML. The image code is placed right above the invisible table code. Now your users have a better looking page and the web crawlers can still read the content in your HTML table page.

 

*It is better to make an external style sheet and reference all of your CSS from it. Inline CSS can slow down your page load speed if you do it often.
<!–Example of style=’display:none;”–>

<img src=’ Computer-Programers-Salary.jpg’ />

<table border=’1′ style=’display:none;’>

<tbody>
<!– table information left out for this example–>
</tbody>
</table>

 

Free information deserves a share!