How come Google can properly fetch and render some sites using a SPA but not others?

Question

I have 2 websites, both use a single-page app framework. One uses React, and one uses Angular. Neither of them have any server-side rendering going on.

When I run the "fetch and render as Google" tool on Search Console, the React one displays as expected (and I can even verify that it's getting indexed by running searches against it).

When I do the same against the Angular one, I can see that Google is not capturing much of the information on the page:

What factor is at play here for one to render properly, and not the other? What can I do to ensure that a site made with a single-page framework is crawled correctly by Google?

Answer 1

I'm gonna answer this in terms of general frameworks because generally questions too specific on the details of one website are closed here.

For any engine to be able to successfully render data, you want to make it as basic and as easy to understand as possible. In the early days, no search engine was able to render Javascript code. This means that if a website was done entirely in javascript, then clients without javascript enabled will see nothing.

What you want to do to ensure almost any tool can render (at least the text of) your page is to ensure its accessible via basic HTML.

I would suggest testing your pages (regardless of framework used to generate the code) with as many browsers as possible including the old-fashioned lynx browser.

While I do understand google processes some Javascript, I'm sure its limited. For this reason, if you must use Javascript to render your pages, use the level of scripting that an ancient browser (like Internet explorer 7 or under) can support.