seo Question posted in
Some basic information to get you started with this can be found here.

Using React (with Redux) as a component in a website – SEO

I have a large, globalised web site (not a web app), with 50k+ pages of content which is rendered on a cluster of servers using quite straightforward NodeJS + Nunjucks to generate HTML. For 90% of the site, this is perfectly acceptable, and necessary to achieve SEO visibility, particularly in non-Google search engines which don’t index JS well (Yandex, Baidu, etc)

The site is a bit clunky as complexity has increased over time, and I’d like to re-architect some of the functional components that are built mostly using progressively enhanced jQuery as they are quite clunky. I’ve been looking at React for this with the Redux implementation of the Flux pattern.

Now my question is simply around the following – nearly 100% of the tutorials assume I’m building some sort of SPA, which I’m not. I just want to build a set of containerised reusable components that I can plug into replace the jQuery components. Oh, they have to be WCAG AA/508 accessible as well

Does React play well with being retrofitted into websites and are there any specific considerations around SEO, bootstrapping, accessibility? Examples of implementations or tutorials would be appreciated.

Tags:

2

Answers


  1. 0

    You can mount react component to any DOM Node on your page, so it makes it easy to insert components in statically generated content.

    Most of search engines like google would wait for js files to load before they index the page so it will index a page with react component perfectly fine. However if you want to be 100% sure that your page rendered correctly by all crawling bots you have to take a look at react server rendering. If you already use NodeJS for a backend it should not be a big problem.

    I never encountered with that kind of problem but my best guess would be to use ReactDOMServer.renderToString to render component on the server and then replace a node in your static html layout. The implementation would depend on you template lang you use. You can use something like handlebars to dynamically create halpers from React Components. So in your static html page you would be able to use them as {{my-component}} But it’s only my speculations on that subject, may be there is more elegant solution.

    Here is the article that could help.

    Login or Signup to reply.
  2. 0

    You’ll be happy to know that this is all possible through something called isomorphic javascript. Basically you’ll just use React and jsx to render HTML on the server which is then sent to the browser as a fully built web page. This does not assume your app is an SPA, rather that you’ll have multiple endpoints for rendering different pages, much like you already have probably.

    The benefit here is that you can use the React/Redux architecture but still allow you site to be indexable by crawlers, as requests to your app will yield static pages, not a single page with lots of JS to make it work. You’re also free to gradually refactor by converting your Nunjucks rendered endpoints to React one at a time, instead of a big jump to SPA land.

    Here’s a good tutorial I found on making isomorphic React apps with node:
    https://strongloop.com/strongblog/node-js-react-isomorphic-javascript-why-it-matters/

    EDIT: I may have misread your actual desire which is to inject React components into your existing web pages. This is also possible, you’ll probably want to use ReactDOM to render your components to static markup, and then you can inject that markup string into your Nunjucks via templating.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search