2

I have an Angular 7 application where I am trying to pre-render pages to support web crawlers / SEO. I've decided I want to use prerender.io to facilitate the pre-rendering, caching, and serving of static HTML to these crawlers, but I'm struggling to install their middleware in my Angular 7 app.

I am trying to figure out if I can use prerender.io in a purely client-side manner, as I am not serving angular from a Node server, I am just hosting static files in a CDN. According to their docs, there is a middleware I can install that will detect when a web crawler makes a page request, and redirects the request to the pre-rendering server. However, all the examples I find involve modifying some backend node server. Can't I do this all client-side?

My questions are: does angular have the concept of a root-level app (I'm assuming it does), and if so, is it possible to install the prerender.io middleware such that it functions in a manner I described above?

It seems like there are a few tutorials for AngularJS, but things have changed quite a bit since then. Any help would be appreciated!

Bryan McGrane
  • 498
  • 6
  • 14
  • AFAIK the implementation is based on the `_escaped_fragment_` parameter in the query string which is [officially deprecated](https://developers.google.com/search/docs/ajax-crawling/docs/specification) since October 2015. I wonder if this service is till relevant these days – Alon Eitan Feb 26 '19 at 15:08
  • @AlonEitan It looks like they've found a way to officially support crawlers without the _escaped_fragment_ meta tag https://prerender.io/documentation/google-support – Bryan McGrane Feb 26 '19 at 15:13
  • Oh boy: _"Make sure to update your Prerender.io middleware or manually add **googlebot** and bingbot to the list of user agents being checked by your Prerender.io middleware"_ - Sound like [cloaking](https://support.google.com/webmasters/answer/66355?hl=en) to me – Alon Eitan Feb 26 '19 at 15:15
  • @AlonEitan actually Google recommends using them! https://developers.google.com/search/docs/guides/dynamic-rendering – Bryan McGrane Feb 26 '19 at 15:54
  • That's good to know! In that case I recommend contacting prerender.io support - From my experience in the past (Working on an angularJS project), they are very helpful and sent me specific instructions that wasn't included in the documentation section. – Alon Eitan Feb 26 '19 at 15:59
  • 1
    Thanks! Will do! I think I have an idea in mind (see my answer below) – Bryan McGrane Feb 26 '19 at 16:00
  • prerender.io doesn't support angular does it? Just angularjs – LiverpoolOwen Feb 26 '19 at 17:32
  • @LiverpoolOwen it supports both no problem. I have a working solution running now. – Bryan McGrane Mar 01 '19 at 19:33

1 Answers1

2

After taking a step back and understanding how this technology works, I am now realizing that a client-side solution doesn't make any sense for prerender.io. Hence, why I was so confused.

What prerendering is trying to solve is delivering static HTML to crawlers that simply cannot interpret a site rendered by Javascript. Therefore, what I was trying to do makes no sense (implementing the redirection / logic into Angular on the client), as it would require the web crawler to be javascript aware.

Instead I need to implement a user-agent check at my loadbalancer, which will direct traffic for prerendering. I'm going to set up an NGINX server that will point to my CDN for normal traffic, and a prerendering server if a crawler is detected.

Edit: And here is how to do it! https://medium.com/@damwhitaker/using-aws-ec2-nginx-and-prerender-io-as-a-proxy-for-a-single-page-app-2c3769689060

Bryan McGrane
  • 498
  • 6
  • 14