If you use dynamic rendering (in such cases, pre-rendering works only for search engines and Googlebots, not for all clients) or client rendering, you should make sure that Googlebot views the correct HTML code and content. There are also cases when the web page version for Googlebot is slightly different from the user version. For example, you can show users a special block with delivery information based on geolocation and browser data. Also, many websites use personalized recommendations based on viewed products. Instead, Google does not send such data to the website, so these blocks may not be displayed during Googlebot visits.
In this article, we will tell you how to see how Googlebot renders your website. By analyzing this information, you will be able to understand why some pages are not visited by Googlebot, why they are not ranked for relevant keywords, and discover other technical issues related to dynamic websites.
The easiest way to see how Googlebot renders pages is to run a test in the Google Search Console or use Mobile Friendly test. Test the URL in real time and check the page code and snapshot.
Lifehack: copy the HTML code returned by Google and paste that code into the HTML code of the empty page in your browser using developer mode. So you will be able to see a complete snapshot of the page “through the eyes of Googlebot”.
However, this method has several disadvantages.
1. The number of checks per day is limited in Google Search Console.
2. You cannot check a large number of URLs en masse.
3. You cannot choose which Googlebot rendering data to show. The Mobile Friendly Test shows only the rendered code of the mobile bot, as in most cases of Google Search Console.
By the way, you can perform a bulk check pages indexing statuses in Google using the URL Inspection Tool.
You can also check how Googlebot renders your website pages using Chrome DevTools.
1. Select a user agent from the list of official Googlebot user agents: choose a mobile or desktop bot, the required browser version, etc.
2. Open Chrome Dev Tools (Command+Option+C (Mac), F12 or Control+Shift+C (Windows, Linux and other operating systems).
3. Start the command line by clicking Control+Shift+P.
4. Select “Show Network conditions”, then press “Enter”. The “Network conditions” tab will open.
5. Deactivate the “Use browser default” checkbox, select “Googlebot” and enter the required user agent data.
6. Reload the page.
1. Start the crawl and select Googlebot Smartphone or Googlebot Desktop in the list of user agents.
Check how Googlebot renders any page of your website in one click
To do this, go to any data table: Logs, Google Search Console or crawl results. Select the desired URL and click on the icon with three lines.
Next, select “View as Googlebot with JS” from the drop-down list.
In a new browser tab, you will see the page as Googlebot sees it: a visual version, and you will also be able to view the raw code.
Comparison of JS and non-JS content
You can also compare the JS and non-JS version of any page by performing a check with the Googlebot Desktop or Googlebot Mobile user agent data.
To do this, go to the “Tools” menu.
Next, enter the URL, select the desired user agent and click the “Load” button.
In the results, you will see the difference between the code that Googlebot receives from your server and the code that Googlebot views after rendering.
More information about comparison of JS and non-JS Tool: Product Update. Compare JS vs non-JS content with JetOctopus.