Google Search Console Fetch & Render Tool Vertical Height Bug Fix

As many SEO’s and Web Developers may be aware, the Google Search Console fetch and render tool is great for identifying issues with render blocking elements on page. It allows allows you to get an instant snapshot of the code and rendered page that Googlebot sees when crawling the specified page on a given web site.

Take Me To The Fix

What is the Fetch as Google Tool

The ‘Fetch as Google’ tool within Search Console essentially requests the page entered to be fetched by either the Desktop or Mobile version of Googlebot (which ever you specify) and returns a small report on the page which is split in to ‘fetching’ and ‘rendering’.

The ‘fetching’ report generated returns the pages response code, downloaded HTTP response including with the markup of the page and the download time.

The ‘rendering’ report returns more of a visual representation of the page. Two iframes display the visual representation of the rendered page for “how Googlebot saw the page” and “how a visitor to your website would have seen the page”. There is also a list of resources that Googlebot could not render listed in a table under the heading “Googlebot couldn’t get all resources for this page. Here’s a list:”.

Pay careful attention to the resources listed within the table to “get optimal indexing of your content: make sure Googlebot can access any embedded resource that meaningfully contributes to your site’s visible content, or to its layout”.

The same attention needs to be paid to the visual renders of the pages content. The visual render for both how the user and Googlebot, especially Googlebot see the page is imperative for identifying any potential issues that Googlebot has rendering your page. This tool is how the CSS v height bug has been identified by webmasters, along with identifying other elements that may cause blockages whilst the page is being rendered.

You may be asking why Googlebot having a render issue is a problem when the site renders as desired within the end users browser. Well, from an SEO perspective it would be a huge hindrance if the Googlebot visual renderer could not render, crawl and read all of a pages content.

What is the Bug with CSS Vertical Height Attributes?

A bug within the Search Console visual render tool has been identified by a handful of webmasters on Google Product Forum threads and a StackOverflow question:

https://productforums.google.com/forum/#!topic/webmasters/jXqRcnWN8Ng

https://productforums.google.com/forum/#!topic/webmasters/8ZuoXjg-Cf4

https://stackoverflow.com/questions/38103636/fetch-as-google-googlebot-desktop-not-rendering-page-correctly

The bug is encountered when an element has a CSS vertical height (vh) value on a height property. This happens due to the element with the vertical height (vh) value fills the renderers viewport height.

It appears and is speculated that the renderer views the page within a 1024×768 viewport, checks how tall the window.scrollHeight is, then resizes it’s virtual browser to be the same height as the window.scrollHeight. A screenshot of the result is taken and displayed on the report within Search Console showing the first element with a vertical height value, filling the remainder of the page and not displaying any further elements below it within the pages markup.

Within the first Google Product Forum thread listed above, this bug appears to stop Googlebot crawling all of the pages content and causing poor performance of the opage within the SERP’s.

The user Lukeg4 states that implementing a fix for the vh bug he saw a huge difference in rankings:

“It made a huge difference.

The webpage has gone from being rated like junk to being rated far, far better. It’s still not where I’d like it to be, but that’s another issue for another time.

Anyway, after the changes the SERP location of the page has improved massively – over 300 positions – and levelled out, where before it’s performance was extremely poor and highly erratic.”

His results from implementing a fix would appear that “google penalises any content that is not seen in it’s render” so rectifying this bug on any site that encounters it is a must.

The Fix

The fix that we have found along with others who have encountered this issue, is to add a css max-height: value in pixels to the element that has a height: specified using a vh value. This should rectify the issue within Googlebot’s visual renderer filling the entire tools window with a single element and blocking further elements being rendered.

An example element with both CSS height and max-height values is shown below.

.my-element {
    height: 100vh;
    max-height: 1080px;
}

You may wish to set a max-height value in px that meets your requirement per element, the value in the example above is not detrimental to the fix, however it needs to be high enough so that Googlebot renders the element with enough height to view the content contained within it.

Testing Page Renders in Screaming Frog SEO

Rather than constantly wait for Google Search Console to fetch your desired URL and render it to test your implemented fixes, the render feature within Screaming Frog SEO tool.

This tool is outlined here: https://www.screamingfrog.co.uk/seo-spider/user-guide/tabs/#rendered-page.

To utilise this feature you will firstly need to change the spider prefs to support Javascript. This mode for the spider is enabled the main menu: Configuration > Spider > Rendering tab > Rendering drop down > Javascript.

There are also configuration options available to set the window size for both Googlebot Desktop and Googlebot Mobile: Smartphone to mimic the renderer window sizes used within Google Search Console.

Once that is enabled, simply enter a URL and initiate the crawl, select the URL within the list and ensure that the ‘render’ tab at the bottom of the Screaming Frog window is selected.