Fronted framework and API SEO

Black Sulfur
Black Sulfur used Ask the Experts™
on
I have created a node.js API and use React to get data from the API and display it on the frontend. I however need to start doing some simple SEO work like titles and meta descriptions etc. but not sure how to do this.

I installed React Helmet and in Google console if I look at the elements I can see the title and description there but I don't think that is enough to show up for search engines?

          <Helmet>
            <title>My page title</title>
            <meta name="description" content="Helmet application" />
          </Helmet>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
... I don't think that is enough to show up for search engines?
Is this a question about what is needed for seo/sem or is is specific to using react/helmet?

Author

Commented:
I did a bit of research and it seems that what is required is SSR or server side rendering. This would then output the html in the same way a php page would do for example and then search engines will see all the html instead of just a skeleton with no content as that is all rendered with javascript. The page will also 'appear' to load faster with server side rendering.

So, I have a Node.js backend which is just an API. The react frontend gets data from that and displays it but as mentioned, there is hardly any html when I view the source code.

I guess I need to implement server side rendering in order for the meta tags etc. to show up when viewing the page source.

So, the question is, in order to implement at least SSR for seo, do I need to set up the server in React as well to do this ie: using Express? I don't think it is done on the Node.js side of things as that is just an API for retrieving data.
Developer & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
I was not sure if you were asking a specific seo question or developing in react. It looks like you answered your own question. The core content is either not loading or not loading fast enough for Google. You either can create more static data or use something like next.js https://nextjs.org/features/server-side-rendering.  Let me find somebody better versed in react to comment.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
I don't have an specific knowledge in the React SSR space.

I did find this link which discusses
a) What SSR is and why it is important
   i) It speeds up the load of the INITIAL PAGE - this is important - only the initial page is rendered with SSR - not each "page" request after that as an SPA by default runs in the browser and does not make requests (other than data [AJAX] requests back to the server).
  ii) It gives something for the crawlers to chew on. A typical SPA loads with not much content and essentially looks like an empty page.

b) How to implement SSR with React. I can't speak to how well it does this step - as I said my knowledge in React SSR is limited but it appears to be fairly comprehensive.

Line is here
https://www.freecodecamp.org/news/demystifying-reacts-server-side-render-de335d408fe4/

Author

Commented:
Thanks guys,

Where I am getting a bit confused is that everything I read says that React requires a server to do this and then there are some instructions on how to set up a server in React using express.

So, am I correct in saying that my Node.js API (server) stays exactly as is and in my React project I also need to install Express and have a server running on the React project too?
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Theoretically you can combine them as they use (or should) different routes. But from a code separation perspective it is better to have them being handled by different instances.

Author

Commented:
Thanks guys, after reading up more about this it seems that my best option when SEO is required is to use Next.js as I can still use React components etc. but it handles the SSR rendering for you. I have been playing around with it and it's pretty awesome.

When it comes to building sites that are more dashboard orientated where SEO isn't important, I could just go for straight React and not worry about SSR. So, at least I have learnt when to use what. Wish I had found Next.js sooner though, it kind of makes me want to start my project all over again simply because it handles SSR out the box.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial