Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to optimize SEO for SPA using React-Helmet?

My project is a single page application using react js. I have heard that Google can crawl javascript pages including react js single page applications, without the need of server side rendering (even though it's generally better for SEO).

However, when I used webmaster tool: fetch and render as google, both what google bots are seeing and what visitors to my page are seeing are blank. Even though I can add specific urls to google indexing, google only uses the title and description tag that I have put in my static index.html file, it doesn't get the nested react helmet component's title and description. Does anyone have experience in this? Appreciate it much!

like image 461
user1955934 Avatar asked Aug 20 '16 11:08

user1955934


People also ask

Is react Helmet enough for SEO?

1 Answer. Show activity on this post. React Helmet actually do nothing with Google, FB, Twitter SEO because crawler bot get meta data before React Helmet change your meta data header. That mean Helmet is quite useless with client side rendering.

Is Reactjs good for SEO?

React helps build a very user-friendly UI that is also valuable by SEO, so you definitely shouldn't avoid it while creating a user interface for your app/website. However, you should use some tricks to ensure that your React-site is understandable for Google crawlers and, therefore, good for SEO.


1 Answers

To answer your question, ensure that you have polyfilled the necessary es6 features, google crawler's javascript feature can be quite limited, it does not have Array.find for example. You can read more about that here https://github.com/facebookincubator/create-react-app/issues/746#issue-179072109

As for tips for improving SEO, you can use these tips:

  1. You can prerender your pages on build time to static html by using react-snapshot https://www.npmjs.com/package/react-snapshot This works great if your app does not have many dynamic content.

  2. You can use pre rendering service like prerender.io / use static hosting with prerendering feature like netlify or roast.io. As for prerender.io, you can even host it yourself!

like image 116
Ade Viankakrisna Fadlil Avatar answered Oct 02 '22 09:10

Ade Viankakrisna Fadlil