However, to see success on the search engines, you must know exactly how to check whether your site's pages can be rendered and indexed, identify issues, and make it search engine friendly.
You can see this process visualized in more detail below:
Image credit: Google
Let's look at this process in a little more depth, comparing it to how Googlebot crawls an HTML page.
It's a quick and simple process that starts with an HTML file being downloaded, links extracted, and CSS files downloaded before these resources are sent to Caffeine, Google's indexer. Caffeine then indexes the page.
And really, it comes down to three things:Making sure Google can crawl your website's content Making sure Google can render your website's content Making sure Google can index your website's content
Let's take a look at what these are.
Ensure That Google Can Render Your Web Pages Using Google Search Console
While Googlebot is based on Chrome's newest version, it doesn't behave in the same way as a browser. That means opening up your site in this isn't a guarantee that your website's content can be rendered.
You can use the URL Inspection Tool in Google Search Console to check that Google can render your webpages.
Enter the URL of a page that you want to test and look for the 'TEST LIVE URL' button at the top right of your screen.
After a minute or two, you'll see a 'live test' tab appear, and when you click 'view tested page,' you'll see a screenshot of the page that shows how Google renders it. You can also view the rendered code within the HTML tab.
Add the following code to this file to ensure that no crucial resources are blocked from being crawled:User-Agent: Googlebot Allow: .js Allow: .css
But let's clear one thing up; Google doesn't index .js or .css files in the search results. These resources are used to render a webpage.
There's no reason to block crucial resources, and doing so can prevent your content from being rendered and, in turn, from being indexed.
If you've confirmed that your web page is rendering properly, you need to determine whether or not it's being indexed.
And you can check this through Google Search Console as well as straight on the search engine.
Head to Google and use the site: command to see whether your web page is in the index. As an example, replace yourdomain.com below with the URL of the page you want to test:site:yourdomain.com/page-URL/
If the page is in Google's index, you'll see the page showing as a returned result:
If you don't see the URL, this means that the page isn't in the index.
Again, use the site: command and include a snippet of content alongside this. For example:site:yourdomain.com/page-URL/ "snippet of JS content"
Here, you're checking whether this content has been indexed, and if it is, you'll see this text within the snippet.
This time, rather than testing the live URL, click the 'view crawled page' button and view the indexed page's HTML source code.
We'll look at the solutions to some of these commonly seen problems below.
Server-Side Rendering vs. Client-Side Rendering vs. Dynamic Rendering
So what are these different types of rendering, and what do they mean?
According to Free Code Camp, here's how SSR works: "Whenever you visit a website, your browser makes a request to the server that contains the contents of the website. Once the request is done processing, your browser gets back the fully rendered HTML and displays it on the screen." The problem here is that SSR can be complex and challenging for developers. Still, tools such as Gatsby and Next.JS (for the React framework), Angular Universal (for the Angular framework), or Nuxt.js (for the Vue.js framework) exist to help to implement this.
When you understand how CSR works, it becomes easier to see why SEO issues can occur.
This is something that was introduced by Google's John Mueller at Google I/O 2018:
Image Credit: Google
To clear up a question that many SEOs will likely have: dynamic rendering is not seen as cloaking as long as the content that's served is similar. The only time when this would be considered cloaking is if entirely different content was served. With dynamic rendering, the content that users and search engines see will be the same, potentially just with a different level of interactivity.
You can learn more about how to set up dynamic rendering here.
Innovative SEO services
SEO is a patience game; no secret there. We`ll work with you to develop a Search strategy focused on producing increased traffic rankings in as early as 3-months.
A proven Allinclusive. SEO services for measuring, executing, and optimizing for Search Engine success. We say what we do and do what we say.
Our company as Semrush Agency Partner has designed a search engine optimization service that is both ethical and result-driven. We use the latest tools, strategies, and trends to help you move up in the search engines for the right keywords to get noticed by the right audience.
Today, you can schedule a Discovery call with us about your company needs.