: My Fetch and Rendered page versions ary very different from my actual page - any ideas why? I have made significant changes in my site's structure - both html and CSS. I've tested it on both

Posted in: #FetchAsGoogle #GooglePagespeed #GoogleSearchConsole #Seo

I have made significant changes in my site's structure - both html and CSS. I've tested it on both localhost, live, and on mobile - with and without caching. It is responsive and works perfectly.

But when I fetch and render it in Webmaster Console, or in Pagespeed Insights (mobile and desktop version) all images of my site are screwed up.

I use flexbox design to build the pages, and CSS media queries to make it responsive.

I know that I'm supposed to make pages for the visitors and not for Google, but if googlebot sees my site as screwed up in the "How visitors will see it" part, I don't think that is good.

Any ideas what can be the reason, or how can I reproduce the Google version to debug and find the problem (if there is any)?

EDIT: Unfortunately I can't share the URL as it is a work in progress. I've built the site according to this: philipwalton.github.io/solved-by-flexbox/demos/holy-grail/ using the linked source: github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/holy-grail.css
It works as expected, but in the webconsole preview the flex boxes are in a row, instead of a column layout.

10% popularity Vote Up Vote Down