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 http://domain-name.com/#/games/dota2, it will be http://domain-name.com/games/dota2. Its easy enough to set in angularJS.

Now it should display as http://domain-name.com/games/dota2, but only if you go to http://domain-name.com 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.

s3rules

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

Great!

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

webtools1

 

webtools2

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.

webtools3

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.

webtools4

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..

webtools5

COMPLETE!

*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