4

I just noticed that my website, www.dupure.com, just shows a blank screen when I look at the cached information on both Bing and Google. Here's two links:

Because I'm using CSS throughout, could there be something in there? I was thinking an issue in robots.txt, but I don't even see that file.

  • Use Google's fetch tool instead since pages not rendering on the cache doesn't reflect on your rankings. – Simon Hayter Oct 6 '16 at 17:56
  • It is somehow related to the CSS. If I view the source code of the Google cache, your content is there. If I click the "Text-only version" link on the Google cache, it shows your content. – Stephen Ostermiller Oct 6 '16 at 19:46
6

I narrowed it down to a simple test case:

<div style="position:relative;">
<script src="http://www.dupure.com/scripts/plugins/modernizr.min.js"></script>
HELLO WORLD

The div with the relative position is inserted by Google cache and ends up enclosing both the modernizr script and the page contents. The modernizr script does something that prevents all the sibling content from displaying when in this container. Other people have encountered this same issue: Google Cache snapshot Issue #1086

You appear to be using modernizr version 2.5.3. Upgrading to the latest version of modernizr fixes the problem. "Hello World" shows up on the page in this case:

<div style="position:relative;">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
HELLO WORLD
| improve this answer | |
2

I speculate that this is a markup issue within your HTML and HEAD, since Google's and Bing's cache are more sensitive to markup issues due to the fact they will scrape your <html> and <head> and inject their own markup.

Browsers correct invalid markup successfully, well most times...

If your code has issues within these fields the browser has a harder time correcting the issue. You see invalid markup doesn't normally create a huge issue because nowadays browsers are so much better at correcting the issue, however when Bing and Google get involved, it makes a issue, worse.

Caching not a SEO factor

The good news is that Google and Bing do not use the cache as a ranking factor and is purely designed for users wanting to see a cache version of the page, should it be updated or because the website is down.

However...

While SEO and the fact that most browsers will correct the errors, this doesn't mean all browsers will, older browser are more likely going to be effected. If you take a look at the source of the Google cache you will see this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<base href="http://www.dupure.com/"><style type="text/css">body { margin-left:0;margin-right:0;margin-top:0; }#google-cache-hdr {background:#f5f5f5 !important;font:13px arial,sans-serif !important;text-align:left !important;color:#202020 !important;border:0 !important;margin:0 !important;border-bottom:1px solid #cecece !important;line-height:16px !important ;padding:16px 28px 24px 28px !important;}#google-cache-hdr * {display:inline !important;font:inherit !important;text-align:inherit !important;color:inherit !important;line-height:inherit !important;background:none !important;border:0 !important;margin:0 !important;padding:0 !important;letter-spacing:0 !important;}#google-cache-hdr a {text-decoration:none !important;color:#1a0dab !important;}#google-cache-hdr a:hover { text-decoration:underline !important; }#google-cache-hdr a:visited { color:#609 !important; }#google-cache-hdr div { display:block !important;margin-top:4px !important; }#google-cache-hdr b {font-weight:bold !important;display:inline-block !important;direction:ltr !important;}</style><div id="google-cache-hdr"  dir=ltr><div>This is Google&#39;s cache of <a href="http://www.dupure.com/" dir="ltr">http://www.dupure.com/</a>. It is a snapshot of the page as it appeared on 13 Sep 2016 14:32:44 GMT. </div><div>The <a href="http://www.dupure.com/" dir="ltr">current page</a> could have changed in the meantime. <a href="http://support.google.com/websearch/bin/answer.py?hl=en&amp;p=cached&amp;answer=1687222">Learn more</a></div><div></div><div><span style="display:inline-block !important;margin-top:8px !important;margin-right:104px !important;white-space:nowrap !important;"><span style="margin-right:28px !important;"><span style="font-weight:bold !important;">Full version</span></span><span style="margin-right:28px !important;"><a href="http://webcache.googleusercontent.com/search?q=cache:NbRB3_vqfTYJ:www.dupure.com/&amp;num=1&amp;client=firefox-b&amp;hl=en&amp;gl=uk&strip=1&vwsrc=0">Text-only version</a></span><span style="margin-right:28px !important;"><a href="http://webcache.googleusercontent.com/search?q=cache:NbRB3_vqfTYJ:www.dupure.com/&amp;num=1&amp;client=firefox-b&amp;hl=en&amp;gl=uk&strip=0&vwsrc=1">View source</a></span></span><span style="display:inline-block !important;margin-top:8px !important;color:#717171 !important;">Tip: To quickly find your search term on this page, press <b>Ctrl+F</b> or <b>⌘-F</b> (Mac) and use the find bar.</span></div></div><div style="position:relative;">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Take notice of the 2x <!DOCTYPE> this will bound to cause issues with a lot of browsers. Currently the front page has 36 Errors, 2 warning(s) reported by W3C Validation. Browsers are not correcting the markup as shown in the screenshots below... take notice to the invisible fields (empty white space), these shouldn't exist.

Invalid Markup Bing Cache

Invalid Markup Google Cache

Summary

Not all the 36 errors will be causing this issue, however its more likely going to be those outside of the body, but you should attempt to fix all to rule those out.

| improve this answer | |
  • 1
    The double doctype is caused by Google. They keep the doctype from the original and insert their own before it. The issue is is with the <div style="position:relative;"> that Google inserts and incompatibility with the modernizr JavaScript. – Stephen Ostermiller Oct 6 '16 at 20:12
  • Not true I checked that with my own view-source:webcache.googleusercontent.com/… before I posted this. The fact is both BING and GOOGLE reports an invisible space within Firebug, this is generally caused by incorrect markup. It's not a styling issue as most CACHING issues are, if you look through his code in firebug, none of his actual content is listed in the HTML, only view source, again this is post-processing, pre-processing the data is their, which would indiciate a markup issue. – Simon Hayter Oct 6 '16 at 20:21
  • That's not a doctype through? – Simon Hayter Oct 6 '16 at 20:24
  • Yes, there are bad tags, but I think they are all caused by Google. It appears to be modernizr that is making text invisible somehow. – Stephen Ostermiller Oct 6 '16 at 20:24
  • 1
    But then again... if you disable JS... it doesn't render either... surely disabling JS would fix the issue completely? since no elements are being hidden and no data is actually there when rending with a browser.. EDIT: Actually.... your completely and utterly right... renders perfectly without JS enabled! I swear this was the first thing I check doh! what a waste of my time lol – Simon Hayter Oct 6 '16 at 20:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.