神刀安全网

Will Google find your React content?

SEO is important for almost any site, and React sites are no exception.

The problem with a React site is that the content is often generated on the client. This means that search engines may not index your content , which means users won’t find your pages.

Server-side rendering is one solution, but it is pretty involved, and there might be an easier way. In fact, Google might already be crawling your React components .

Read on to find out how to tell if the Googlebot is crawling your React components. In case it isn’t, we’ll cover how to make it do so.

Fetch as Google

Google provides a great tool called Fetch as Google . You can use it to check if Google has found your rendered React components.

The directions are in this Google support link , but before they will work, you need to access Google’s Search Console. Fortunately, Google provides Search Console for free, and you can sign up at google.com/webmasters .

So, to iterate this two-step process:

The Results

I went ahead and tried Fetch as Google on my starter project search tool and this was the result. On the left it shows what the crawler sees, and the on the right it shows what users see. We want them to match:

Will Google find your React content?

My images don’t match… in fact, there’s a big blank spot where my React components should be. Uh oh! This means Google won’t add any of that missing content to their index. This could negatively impact my SEO.

So wait, why don’t they match? Googlebot is limited in how long it will allow your page to render. There’s no concrete documentation on this, but generally, asyncronous calls like AJAX and setTimeout won’t be allowed to finish. The only way to know for sure if it’s working is to use Fetch as Google.

The Fix

My starter project search tool was making an AJAX call to get GitHub stars before showing any content. The Googlebot won’t wait for asyncronous calls.

The fix was to mount my components before downloading the GitHub stars. Here is the result:

Will Google find your React content?

It worked! Googlebot (image on the left) is seeing way more content. The GitHub stars didn’t load, but I don’t need those for SEO.

Caveats & Conclusion

In my research I couldn’t find any evidence that Yahoo, Bing, or Baidu support JavaScript in their crawlers. If SEO on these search engines is important to you, you’ll need to use server-side rendering, which I’ll discuss in a future article.

If SEO on Google is enough, then just:

  • Render your components before doing anything asynchronous.
  • Test each of your pages with Fetch as Google to ensure that the Googlebot is finding your content.

Then enjoy the flood of new users coming in from Google!

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Will Google find your React content?

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮