Link to home
Start Free TrialLog in
Avatar of Crazy Horse
Crazy HorseFlag for South Africa

asked on

Fronted framework and API SEO

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

Avatar of Scott Fell
Scott Fell
Flag of United States of America image

... 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?
Avatar of Crazy Horse

ASKER

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.
ASKER CERTIFIED SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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?
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.
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.