Missing css style makes Googlebot render a site falsely with heavy consequences for ranking

[reinhardmohr]

Hi, I had submitted this same bug on ampproject/amphtml (#16538) but was advised by some John Pettitt to file the bug again here – so I repeat it here. Thanks for helping!

Starts here:
I had made a new AMP site for a customer. It did not rank well after a while with Google. So I looked into it. In Google Search Console (GSC) there is a feature "fetch as Google" where you can see how Googlebot renders (!!!!!!!) a site compared to a browser. Googlebot there rendered the pages after the navigation bar completely white and wthout content.
This obviously was punished by Google as cloaking.
I went into it and found that the ampstart component "Navigation – Responsive Menubar" did not have a css height in units. This caused only the Googlebot (not the browsers) to cover the page content with the menubar's white background color – thus hiding the content and in letting assume Googlebot an attempted cloaking.
See screenshots from GSC while I was working on the bug and after having fixed it.

How do we reproduce the issue?

Run the fetch-as-Google-feature in Google Search Console on a standard responsive menubar from ampstart.

What browsers are affected?

No browsers – but only Googlebot when rendering (!!!!) a page.

Which AMP version is affected?

Powered by AMP ⚡ HTML – Version 1530567757224 https://www.physiomuenchen.de/

[ericlindley-g]

/cc @pbakaus

[camelburrito]

@reinhardmohr thanks for filing the bug , could you share what exactly was the fix ?

[reinhardmohr]

Hi, camelburrito,
I added
.ampstart-headerbar { height: 4rem; }
to the styles in the head of the page of
https://www.physiomuenchen.de
There you can see the page or the code. This seems to have fixed it. As now the headerbar for Googlebot does not cover the complete page with its white background any more. And Googlebot now renders the page correctly.