We have discussed in past articles the importance of relying on server-side rendering of your site to improve SEO and improve organic search performance. Largely we found that sites that load directly from the server, Search Engines (such as Google & Bing) have a much easier time processing the content on the page.
There are fewer steps and therefore better SEO results.
Which is why we are going to deep dive and teach you how to check server side rendering.
We will use this article to discuss methods you can use to test how search bots interpret your website and therefore help improve your organic search results.
Real quick, if you are struggling to debug pesky technical SEO issues, server side rendering, client side rendering, etc.
Give us a shout, we do this all day everyday and are happy to chat with about your project.
We are going to walk through the examples laid out in this video to get a better understanding of how we manually test for SEO performance.
Method 1: View Source
This method can be used to give you an idea of which parts of your website are being rendered server-side or client-side.
Generally speaking, it’s a quick and dirty way to figure it out.
How To Do It
Free Weekly SEO Newsletter
Hey! I’m Scott, I’ve been an SEO consultant for nearly 10 years. Get on my weekly newsletter to get..
- Weekly SEO updates, keep up with the latest and greatest.
- How we grow websites from zero to millions of visitors
- A bunch of SEO tips and Tricks you won’t find anywhere else test
Get On The Newsletter
For best results, you want to ensure that you are using Google Chrome, or any of its derivatives (Ex. Brave), as your browser for the developer tools it offers within itself.
To begin, travel to any site of your choosing. Then,
- Right click anywhere on the site and select “View Source” (Some websites disable this functionality, so you may want to try another)
- This will redirect you to the site’s full HTML document where all items inside are considered to be server-side rendered
- You can then filter through the code and HTML tags to get a better understanding of is being rendered server-side and what is not
This method can directly be used to interpret how certain parts of your website are interacting with the browser and can give a better understanding of why certain behaviors are being exhibited on your browser.
Method 2: Check Google Directly
Free Weekly SEO Newsletter
Hey! I’m Scott, I’ve been an SEO consultant for nearly 10 years. Get on my weekly newsletter to get..
- Weekly SEO updates, keep up with the latest and greatest.
- How we grow websites from zero to millions of visitors
- A bunch of SEO tips and Tricks you won’t find anywhere else test
Get On The Newsletter
This method will visually display how Google interprets the website of your choosing when it attempts to place it within search results. You will get to see a cached, or previously stored, version of the HTML sent from the server to Google for placing within search results.
How To Do It
To use this method:
- Having your desired site in mind, start a session on the Google search engine main page
- Enter the site’s full URL in the search box without pressing ENTER or searching for results
- Now, type “site:” before the URL and proceed with searching for results
(Example search: “site:https://www.airbnb.com”) - If your site has been indexed by Google you should see it as an available option for you to select.
- Proceed by clicking the 3 dots beside the title of your selection
- A Popup should appear then select the option for “Cache” near the bottom
- You now get to view how Google initially loads your website for SEO.
- You may notice it is visually different than normal, which may be worth investigating using Method 1 (using page source to do server-side troubleshooting)
Method 3: Change Useragent in Chrome
This method allows you to change the device loading any website directly within Google Chrome to gain an understanding of how systems like smartphones, different browsers, etc. process and load content on your site.
We can even load it with Googlebot Desktop & Smartphone (which we’ll be focusing on for this tutorial.)
How To Do It
- Travel to your desired website, and right-click within the site contents
- Proceed by selecting “Inspect”, sometimes denoted as “Inspect Element”
- This will reveal a Popup with multiple tabs for you to explore the components and interactions of your site behind the scenes
- For this exercise, we are focusing on utilizing the “Networks” tab, so you can ignore the rest and select that from the options at the top of the popup
- Within the “Network” tab window, another tab selection will reveal itself directly under
- Proceed by selecting the
button (normally used to denote Wifi signals)- This will change the options available at the bottom of the window
- Proceed by finding the “User agent” section within the bottom window and uncheck the “use browser default” box
- This then gives you the option to change the software being used to load the site.
- Once you play around with the devices, you can troubleshoot any issues you may have using method 1 to get a better understanding of what is being sent to the browser.
- Switch between the different GoogleBot Options. Both Smartphone & desktop.
button (normally used to denote Wifi signals)
Final Thoughts
These 3 methods, when used together, allow for a full analysis of Javascript SEO, frameworks that load in the DOM and empower us to investigate any site and its competitors for an understanding of how to move forward with getting a site ranked higher and allowing your users to enjoy a fast and seamless experience.
The main advantage with using our methodology is that you will be able to pinpoint how Googlebot (or even BingBot, etc) will interpret your website.
If you understand how search engines view your website, you’ll be able to make better judgments on how to approach your website’s technology.
