Please note that since this article was written, the content Google adds to a page has changed a great deal and the details of this post should now be considered outdated, although the principle remains sound.

Google's search results usually have, just underneath them, a link that says "Cached". This links to a copy of the web page listed - a snapshot taken the last time Googlebot visited the page.

In many ways these snapshots are extremely useful, especially because when you view them the keywords you searched for are highlighted within the page you are viewing.

Because of this, more and more people are using the "Cached" link to view web pages, and this is a problem. It reduces page views, makes it harder for you to track usage of your site, and can even hurt revenue on advertising-based websites. Pages styled using CSS viewed through the cache often look wrong as well, due to the code added to the top of the page.

There are ways around this problem. One is to add a piec of JavaScript to your site to redirect people if they are viewing the cache. Another is to prevent Google from making the cache available, using this META tag:

1. <meta name="robots" content="noarchive">

These methods will both prevent people from viewing your pages in the Google cache. However, if you want to continue to allow people to view your pages in the Google cache, you might consider adding a little style to the listing while you are at it.

Design is fast moving away from tables, and more and more people are using CSS for style. Google, though, carefully adds a completely invalid piece of completely unnecessary table-based code to the top of every cached copy it serves:

1. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
2. <BASE HREF="http://www.juno.co.uk/"><table border=1 width=100%><tr><td><table border=1 bgcolor=#ffffff cellpadding=10 cellspacing=0 width=100% color=#ffffff><tr><td><font face=arial,sans-serif color=black size=-1>This is <b><font color=#0039b6>G</font> <font color=#c41200>o</font> <font color=#f3c518>o</font> <font color=#0039b6>g</font> <font color=#30a72f>l</font> <font color=#c41200>e</font></b>'s <a href="http://www.google.com/help/features.html#cached"><font color=blue>cache</font></a> of <A HREF="http://www.juno.co.uk/"><font color=blue>http://www.juno.co.uk/</font></a>.<br>
3. <b><font color=#0039b6>G</font> <font color=#c41200>o</font> <font color=#f3c518>o</font> <font color=#0039b6>g</font> <font color=#30a72f>l</font> <font color=#c41200>e</font></b>'s cache is the snapshot that we took of the page as we crawled the web.<br>
4. The page may have changed since that time. Click here for the <A HREF="http://www.juno.co.uk/"><font color=blue>current page</font></a> without highlighting.<br>
5. This cached page may reference images which are no longer available. Click here for the <A HREF="http://www.google.co.uk/search?q=cache:pYNkmJTkSQMJ:www.juno.co.uk/+juno&hl=en&lr=&ie=UTF-8&strip=1"><font color=blue>cached text</font></a> only.<br>To link to or bookmark this page, use the following url: <code>http://www.google.com/search?q=cache:pYNkmJTkSQMJ:www.juno.co.uk/+juno&hl=en</code></font><br><br><center><font size=-2><i>Google is not affiliated with the authors of this page nor responsible for its content.</i></font></center></td></tr>
6. <tr><td>
7. <table border=0 cellpadding=0 cellspacing=0><tr><td><font face=arial,sans-serif color=black size=-1>These search terms have been highlighted: </font></td><td bgcolor=#ffff66><B><font face=arial,sans-serif color=black size=-1>juno </font></B></td></tr></table>
8. </td></tr></table></td></tr></table>
9. <hr>

For the record, it could just as easily serve valid, semantically correct code and achieve virtually the same effect. It could also (indeed, should) serve that code after the body tag, so as not to break sites served through the cache. It could even go as far as to spend a second identifying the language of the page and serve valid code. An example of code they could use (removing the colouring from the word Google along the way):

1. <div style="width:100%;border:0;margin:0;padding:1em;border-bottom:1px solid #000;color:#000;">
2. This is Google's <a href="http://www.google.com/help/features.html#cached">cache</a> of <a href="http://www.addedbytes.com/">http://www.addedbytes.com/</a>.<br />
3. Google's cache is the snapshot that we took of the page as we crawled the web.<br />
4. The page may have changed since that time. Click here for the <a href="http://www.addedbytes.com/">current page</a> without highlighting.<br />
5. This cached page may reference images which are no longer available. Click here for the <a href="http://www.google.co.uk/search?q=cache:X3GuszbKqvwJ:www.addedbytes.com/+addedbytes&hl=en&lr=&ie=UTF-8&strip=1">cached text</a> only.<br />
6. To link to or bookmark this page, use the following url: <code>http://www.google.com/search?q=cache:X3GuszbKqvwJ:www.addedbytes.com/+addedbytes&hl=en</code><br />
7. <div style="margin:1em;font-style:italic;text-align:center;">Google is not affiliated with the authors of this page nor responsible for its content.</div>
8. <div style="">These search terms have been highlighted:
9. <span style="background:#ff6;font-weight:bold;">addedbytes</span>
10. </div>
11. </div>

The chances of Google going down this route are slim. Perhaps sooner or later they will move to valid code, properly styled, but it is unlikely as it has little bearing on their bottom line. What it means for those of us that wish to allow Google to keep serving cached copies of our pages is that those copies appear broken. Ideally, we would prefer them to not appear broken - we want our visitors to keep using our sites, perhaps even to buy something.

However, all is not lost. Few designers who stick to modern principles use tables or hr tags for layout. For this reason, and as long as you are careful, you can easily add style to the content added to the top of a page by Google. A sample of one possible style is here:

1. <style type="text/css">
2.  
3. /* Nice divider. */
4. hr {
5. border: none;
6. border-top: 1px dotted #000;
7. height: 1px;
8. margin: 0;
9. padding: 0;
10. font-size: 1px;
11. background: #fff;
12. }
13.  
14. /* No borders. */
15. table {
16. border: none;
17. border-collapse: collapse;
18. margin: 0;
19. padding: 0;
20. }
21.  
22. /* Nice text. */
23. table font, table code {
24. font-size: 0.9em;
25. font-weight: normal;
26. font-family: verdana;
27. }
28.  
29. /* Makes links look and behave the same as the rest of the document. */
30. table a font {
31. color: inherit;
32. }
33.  
34. /* Re-adds bold. */
35. table b font {
36. font-weight: bold;
37. }
38.  
39. </style>

You could add the above to the HTML of your pages, or to an external syle sheet. It will affect all tables and <hr> tags, but this can be worked around easily enough through the use of nesting, classes or ids.

This process could be made even easier by Google. If they were to add a simple "id" attribute to their table, eg "<table id="google-cache-top-bar">" (and remove the <hr> tag altogether) we would find it much easier to style the cache notice.

Please note that since this article was written, the content Google adds to a page has changed a great deal and the details of this post should now be considered outdated, although the principle remains sound.