How To Use Display None CSS Style for SEO

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


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.

display none example html table


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

css display none example image


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;’>

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


Free information deserves a share!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>