Table and Div tricks for better Search Engine Optimization and Accessibility

Let the search engines see your content first for better Search Engine Optimization and Accessibility

By using the correct doctype, some CSS and either a table or divs, we can trick the search engines into reading your content first rather than your menu. Of course the same can be achieved by using a Javascript menu with bottom text links, but that’s not always user friendly. For the header you would use a style background in your CSS file, so there is no actual content. Accessibility wise, this is better for those using screen readers so they get to the content first and don’t have to plow through a menu.

Table Trick

This code Table Trick (.txt download) ignores Netcape 4 which requires that the cell not be empty, you can use a 1×1 pixel .gif but do we really need to cater nowadays for that old an browser? If that’s what you want add in a 1×1 .gif to the empty cell. Open the .txt file in notepad and right click and Select All, right click again and press Copy, go to Expression Web and open a blank new page right click in Code View and press Select All, Right click again and press Paste, position the cursor in Design View to update the page and you will see the layout. If you want to use padding on the header and footer you will need to move them out of the wrapper div.

Div Trick

This code Div Trick (.txt download) is the Holy Grail of the Div Trick written by Alistapart in 2006. Nowadays we are just about to move into Internet Explorer 8 and we have Firefox 3, time to drop those version 5 type browsers that we don’t really want to use anyway because of security issues. Most people using IE are using either IE6 or IE7.

Conclusion: To be completely safe the Table Trick with 1×1 .gif is the way to go if you want to use this. I think I prefer a JavaScript menu with text links at the bottom and a skip link myself on balance. One has to weigh up which direction one want’s to support.

Test Table and Div Tricks by turning off CSS in the browser

To test both of these tricks save the page and View in a browser that allows you turn off CSS Styles or has an addon to do so,

  1. FireFox:  View – Page Style - No Style
  2. Opera:  View  – Style – User Mode
  3. Internet Explorer: IE7 – It’s easier to use an addon such as AIS Web Accessibility Toolbar and use the CSS Tab – Disable CSS

To add: I was getting fed up of IE crashing, so after ten years I made FireFox (I hate the bookmarks) my default browser to save me grief when I merely click a link. So of course I was viewing the Holy Grail Div Trick in FireFox 3 where it works. It does not appear to work IE7, but does work in Opera. Perhaps a conditional of some sort?

Thoughts and comments?

29 Responses to “Table and Div tricks for better Search Engine Optimization and Accessibility”

  1. WP Themes says:

    I think your blog need a new wordpress template. Downalod it from http://genericwpthemes.com . The site has nice and unique wordpress templates.

    • Tina says:

      Seems I missed answering a couple of questions here. I am using the generic template (tweaked to black) because I want to make my own and till I can do that its staying generic to encourage me to get to it:)

      Tina

  2. Arizona SEO says:

    Thanks for the post. The most frustrating element is not knowing what trick works in which browser! This is good stuff!!

  3. Triad Search Marketing says:

    CSS is great for this kind of thing. I love using it in my websites. Thanks for the post, good information there.

  4. Detoxseo says:

    im just a beginner in Search Engine Optimization and i am still doing quite a lot of research about basic SEO.

  5. Marvin says:

    im a newbie in Search Engine Optimization and i still need to study more on internal linking. Currently, what i do to optimize my website is just make as many backlinks as possible.

  6. Arizona Search Engine Optimization says:

    Oh wow! It is nice to learn new tricks to help optimize online. Thanks for the tips.

  7. SEO says:

    Just wanted to thank you for the valuable info regarding search engine optimization.

  8. Las Vegas says:

    Big thanks for the seo tips. Anything that can help boost rankings is a + in my book

  9. niche keywords says:

    What an awesome notice about search engine optimization. I’m honestly incredibly dumbstruck that this has not really been articulated before to such a great length.

  10. sam says:

    Big Thanks Your are a star

  11. Free Super Laptops says:

    I have been lost for quite A while now, I think this could give me a breakthrough, so thanks alot!!!

  12. Jus Mate says:

    There a lot of seo information on the net but i’m still could’nt get my site to the top of se..is there any specific info that anyone didn’t share?

  13. Neeshu Dholakia says:

    The only thing I know is that the content is the king ,other things like back links etc , comes later ,when you have unique content and you are able to satisfy your visitors ,google automatically index higher . After the content we can use SEO and SEF techniques to upgrade our website to index on front page and among first search results in different search engines.

  14. Dery Pratama says:

    I was confused with the purpose of the table. Can you include pictures to make this explanation?

  15. Cal says:

    Great information! Now google caffeine is requiring Speed a major factor in pr.

  16. Ken Cleveland says:

    the most important thing when doing search engine optimization is get a good amount of backlinks first. when you have a sufficient amount of backlinks, then you can start optimizing in page links, keyword density and other factors which affects your ranking.

  17. When trying to optimize your website, you will need to gather all the information about the few visitors that you now have. This will help you make improvements to your site and increase your traffic.

  18. Dog Trainers Charlotte says:

    Yeah I agree with your insight. The content must be the first thing to do before optimizing because Google will see to it if that content are copied that’s why they said that your content must be unique.

  19. ghd says:

    CSS is great for this kind of thing. I love using it in my websites. Thanks for the post, good information there.

  20. mkv to avi says:

    I have been lost for quite A while now, I think this could give me a breakthrough, so thanks alot!!!

  21. Security Products says:

    I am a seo newbie and these are some great tips. Very useful. Thank You.

  22. Gaurav Akrani says:

    Better practical tip for a person new to the field of search engine optimization. Interesting post.

  23. driveway cleaning manchester says:

    I love the Div trick, its an old post this but I just wahnted to say it has really helped me with tables

  24. Virginia SEO says:

    This trick may not be relevant due to the age of this post, so use it at your own caution.

  25. Mombasa Web Designer says:

    I was using this sometime back and it worked incredibly well.

  26. zencart says:

    This has worked for some of my projects. Interesting post.

Leave a Reply