How to optimize SEO for SPA using React-Helmet?

My project is a one-page application using js js. I heard that Google can crawl javascript pages, including reacting to single-page js applications, without the need for server-side rendering (although this is generally better for SEO).

However, when I used the webmaster tool: fetching and rendering as google, what the bot bots see and what my page visitors see is empty. Although I can add specific URLs for google indexing, Google only uses the title and description tag, which I put in my static index.html file, it does not get the title and description of the attached reactive helmet component. Does anyone have any experience with this? Appreciate it a lot!

+6
source share
1 answer

To answer your question, make sure that you have completed the necessary es6 functions, the google crawler javascript function can be quite limited, for example, it does not have Array.find. You can learn more about this here https://github.com/facebookincubator/create-react-app/issues/746#issue-179072109

Regarding tips for improving SEO, you can use the following tips:

  • You can transfer your pages at build time to static html using react-snapshot https://www.npmjs.com/package/react-snapshot This works great if your application does not have a lot of dynamic content.

  • You can use a pre-rendering service, for example, prerender.io/, or use static hosting with a preset function, for example netlify or roast.io. As for prerender.io, you can even post it yourself!

0
source

All Articles