1

Super noob-ish question I'm sure, but this is the my first time building a consumer facing web app. To avoid getting closed for duplication, this question is very specifically for React + GraphQL.

I'm creating a website that will have a lot of user generated content, and it's extremely important that the content is optimised to be found by search engines. However the content is going to be stored in a database somewhere and fetched via GraphQL queries. How do I structure my web app in a way that makes it easy for search engines to find user generated content? What are some architectural decisions and patterns to adhere to from the very start?

I know there's a lot of packages out there to help with this (Helm, React-Router, Next/Razzle), but how do I bring together all these different parts together in the best possible way?

Code examples would definitely help clarify things.

Improve this question
  • From what I understand, a progressive web application behaves more like a native app on a phone because it can use local storage for offline and can send push notifications. Those shouldn't have much impact on SEO. What worries me more is that you are planning to use ReactJS which is is one of the two platforms that do single page applications (SPA) (AngularJS being the other). If you want SEO, don't make your web site a single page using React or Angular. – Stephen Ostermiller♦ Oct 25 '18 at 16:42
  • You should take a look at "next JS" that allows you to server side render a react app, this is what you need for SEO – Hammerbot Oct 26 '18 at 13:36
1

I think this is quite doable, although definitely more work than a statically rendered site. The biggest thing you need to do is make sure that your content renders to the Google Search bot. Googlebot executes JavaScript in general, but you will need to avoid or transpile any ES6 and in general not use any APIs that don't exist in Chrome 41. And make sure your pages show well to Googlebot by fetching them in Google Search Console to see how they render.

With the standard approach, your miles may vary with search engines other than Google. If you want to present things to search engine crawlers that might be more basic than Google's, you will want to look into prerendering. Prerendering makes it so that your server will return an already-rendered page when the user (or crawler) loads it.

More information on what prerendering is:

https://www.netlify.com/blog/2016/11/22/prerendering-explained/

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.