Meteor/React - Nothing in text brower or Google crawler


#1

Hey everyone,

I am struggling as I developped a quite complex app for a client using React and Meteor. Everything works fine but somehow the SEO is quite catastrophic. The source code for the rendered website in the body is only 2 scripts tag :

<body><div id="app"></div>
  <script type="text/javascript">__meteor_runtime_config__ = JSON.parse(decodeURIComponent("%7B%22meteorRelease%22%3A%22METEOR%401.6.1.1%22%2C%22meteorEnv%22%3A%7B%22NODE_ENV%22%3A%22production%22%2C%22TEST_METADATA%22%3A%22%7B%7D%22%7D%2C%22PUBLIC_SETTINGS%22%3A%7B%7D%2C%22ROOT_URL%22%3A%22https%3A%2F%2Fwww.shillerz.com%2F%22%2C%22ROOT_URL_PATH_PREFIX%22%3A%22%22%2C%22appId%22%3A%22app_17bc433f-485a-4d13-90ce-47b8d9a8ba9f%22%2C%22autoupdateVersion%22%3A%22c082da017ad4885f5644851df13c53978c08958f%22%2C%22autoupdateVersionRefreshable%22%3A%22a7f188b6c2b3b2da54c829615ede3cde9c766168%22%2C%22autoupdateVersionCordova%22%3A%22none%22%7D"))</script>

  <script type="text/javascript" src="/4205b5d94d92aa1ae498c93d28adfba603e30a89.js?meteor_js_resource=true"></script>


</body>

And that is not appreciated by crawlers or text browser such as Lynx for testing.

I installed https://atmospherejs.com/ostrio/spiderable-middleware but apparently no changes at all in the result …

Any idea how I could solve this ? improve this ? I’m new to this part of the dev and that would be much appreciated to see more clearly. Thanks in advance.


#2

Its not really a Meteor specific problem, Its a problem in general for Client Sider Rendered websites (CSR). For this you need Server Side Rendering (SSR). I’m currently putting a lot of focus and effort in my personal website. Which i’m going to publishtonight!

It contains exactly 1 finished article about setting up SSR with Meteor and React. It exactly fits your needs to make your website SEO / crawl friendly. I will post it tonight (approx 22:00 GMT).


#3

@ivo Sorry for the delay: https://www.chrisvisser.io


#4

Very detailed. Thank you.