I have talked about how to simulate the Googlebot crawler to debug crawling and indexing issues.
In this guide, I will talk about how to use a very simple manual technique to efficiently diagnose rendering issues in Google’s index.
Note: The technique of using rendered HTML from Google tools was dreamed up by Oliver Mason, SEO Consultant, ohgm. The original technical SEO, who writes edge case studies.
How to manually diagnose rendering issues
Right, onto debugging rendering issues in Google Search.
Step 1: Find the right page
Find the page you want to inspect and open it in 2 tabs in Google Chrome.
I usually try to focus on page templates on large websites. This helps to see issues which might scale across the website.
In this example, I wanted to test to see if Google was having any issues rendering the content of my newsletters over at The SEO Sprints (which uses the substack platform).
Step 2: Grab the Rendered HTML from the index
Once you’ve found the page and have it open in two tabs, then all you need to do is head over to either the Google Search Console URL Inspection tool or the Mobile-friendly testing tool. The tool you use will depend on your level of access.
The URL Inspection tool uses the rendered HTML from the most recent crawl in Google’s index.
It is for this reason that gaining access to Google Search Console is critical to really understand how Google renders your pages.
This doesn’t mean that the mobile-friendly tool is not useful in debugging rendering issues but due to the different configuration settings between GSC testing tools and Googlebot’s systems the results might be different.
For the best results always go with the Google URL Inspection tool > View Crawled Page (not the live test version).
If you don’t have access to GSC then use the mobile-friendly test tool.
Capture rendered HTML from Google’s Index
Once you’ve picked the tool follow these steps:
- Submit the chosen URL into the URL Inspection tool
- Navigate to the “View Crawled Page” button
- Then will open the Crawled page > HTML sidebar and all you need to do is just click on the Copy icon.
Step 3: Inspect the Rendered HTML from Google
Now head back over to your two tabs.
Right-click and inspect the element on one of the tabs. Then will open Chrome DevTools and display the rendered HTML in your browser.
Right-click on the <html> <html/> element at the very top of the code and then choose to edit as HTML. Hit CTRL+A to highlight all the rendered HTML from the browser and hit delete.
Next, paste the copied rendered HTML from Google Search Console into the editable HTML of the page.
That is it.
Step 4: Compare Google rendered HTML vs Current Page
Return to your two tabs in Chrome and compare the two pages side by side.
Check to see if Google has missed or is not rendering any content on the page quickly and easily.
Step 5: Inspect in Google Chrome DevTools
When noticing the differences between the two pages remember to check the Google Search index rendered code in Inspect element tab of Chrome DevTools.
It is easy to get excited about differences but always remembers to check the code to make sure there is missing content and links.
For example, the substack personalised links if you hover over my author profile picture are missing from the rendered HTML from Google’s index vs page loaded incognito.
This makes sense if you read around how the Web Rendering Service works – it is stateless across page loads. It does not sign in or store any data from page to page (unlike your browser).
Content and links loaded by user events (scroll or click).
The UK ecommerce brand Fatface uses an infinite scroll to load more product listing pages on its category pages. If we use the mobile-friendly test tool (yes I know not as accurate) and copy-paste the rendered HTML into Chrome, we can instantly see a difference between the two pages.
If you keep scrolling on the rendered HTML from Google, you can see that not all the PLPs load on the page.
If we scroll down and check the code for the website, you can see that after a certain point the internal links to deeper level PLP are missing in the rendered HTML.
Missing Navigation Links
A few years ago I noticed ASOS was not rendering the main navigation in the mobile-friendly testing tool. It turns out that a lot of other SEO issues impacted ASOS’s SEO traffic to drop.
Lazy loading images not rendering properly
An ecommerce website not loading images properly
There are a number of other issues which you can also detect:
- Critical content not rendered by Googlebot
- Critical resources (CSS and JS) not accessed by Googlebot
- Strange client-side redirects stopping Googlebot from accessing the website
Summary: I, Web Rendering Service
Frequently Asked Questions
Why is the layout different to my page?
The rendering of the page might look a bit off compared to your current page. This isn’t always an issue if the rendering snapshot is mobile-friendly, URL Inspection Tool and Rich Result desktop testing tools show it renders fine.
Do I trust what I see in the browser?
I always check the rendered HTML in the code in both Chrome and in the URL Inspection or mobile-friendly testing tool to make sure the links and content are there.
What if I can’t use the URL Inspection Tool?
I’d recommend using the mobile-friendly testing tool or the rich result tool. Both tools use the Web Rendering Service – the one issue is that these tools don’t wait around if the website is slow, unlike the real WRS. Although this does highlight bigger web performance issues.