AngularJS SEO & Prerendering for S3

AngularJS SEO & Prerendering for S3

S3 is just a file storage with a little bit of rules and functions that helped serving files (in this case, serving html), so it is very limited in functionality compared to an actual web servers.  I really dont want to handle a web server. I have enough on my plate (dota 2, fallout 4, darkest dungeon) as it is. I dont need a webserver to babysit, sleepless night and notifications when its being hugged by reddit.

First thing I need to do for SEOs to work properly is to make the URLs pretty (eh, not really, ugly urls also works). So instead of, it will be Its easy enough to set in angularJS.

Now it should display as, but only if you go to first. Because /games/dota/index.html doesnt actually exist. To make it get the actual file it needs, need to set up the following in S3 Static Web Hosting properties.


So if it does not find any files in /games/dota/ it will actually add some characters (in this case #/) after the domain name ( so it will be


But wait.. the crawler do not like this and it will not index your page (the bane of SPAs).




So to make the status from Redirected (!) to Complete, I need to prerender the pages (from the sitemap).

Here’s the sitemap in my gulpfile.js

Then setup a task to prerender the pages.

Stuffs that need to be installed: run-sequence and phantomjs.

Its pretty straight forward, just create a task for each pages, so that it will run synchronously. It’ll take some time but for me it takes about 10-15 seconds for 23 pages built on Codeship.


Oh, I didnt want to install apache and other stuffs just to serve a static html file so I used serve-static and connect.

After all is well, codeship will build everything and prerenders the pages.


Total build time on average is 2 minutes and 10 seconds (there’s lots of other task). After its built and uploaded to S3, get the crawler to crawl and see the status..



*note: I know its not a thorough tutorial or guide or whatever that people expect, just an outline on how it can be done.

+ There are no comments

Add yours