React Router + AWS Backend, how to SEO

Question

I am using React and React Router in my single page web application. Since I'm doing client side rendering, I'd like to serve all of my static files (HTML, CSS, JS) with a CDN. I'm using Amazon S3 to host the files and Amazon CloudFront as the CDN.

When the user requests /css/styles.css, the file exists so S3 serves it. When the user requests /foo/bar, this is a dynamic URL so S3 adds a hashbang: /#!/foo/bar. This will serve index.html. On my client side I remove the hashbang so my URLs are pretty.

This all works great for 100% of my users.

• All static files are served through a CDN
• A dynamic URL will be routed to /#!/{...} which serves index.html (my single page application)
• My client side removes the hashbang so the URLs are pretty again

The problem

The problem is that Google won't crawl my website. Here's why:

• Google requests /
• They see a bunch of links, e.g. to /foo/bar
• Google requests /foo/bar
• They get redirected to /#!/foo/bar (302 Found)
• They remove the hashbang and request /

Why is the hashbang being removed? My app works great for 100% of my users so why do I need to redesign it in such a way just to get Google to crawl it properly? It's 2016, just follow the hashbang...

</rant>

Am I doing something wrong? Is there a better way to get S3 to serve index.html when it doesn't recognize the path?

Setting up a node server to handle these paths isn't the correct solution because that defeats the entire purpose of having a CDN.

In this thread Michael Jackson, top contributor to React Router, says "Thankfully hashbang is no longer in widespread use." How would you change my set up to not use the hashbang?

Cuisine

Answer 1

You can also check out this trick. You need to setup cloudfront distribution and then alter 404 behaviour in "Error Pages" section of your distribution. That way you can again domain.com/foo/bar links :)

Foreignborn

Answer 2

I know this has been a few months old, but for anyone that came across the same problem, you can simply specify "index.html" as the error document in S3. Error document property can be found under bucket Properties => static Website Hosting => Enable website hosting.

Please keep in mind that, taking this approach means you will be responsible for handling Http errors like 404 in your own application along with other http errors.

Heterophyllous

Answer 3

The Hash bang is not recommended when you want to make SEO friendly website, even if its indexed in Google, the page will display only a little and thin content.

The best way to do your website is by using the latest trend and techniques which is "Progressive web enhancement" search for it on Google and you will find many articles about it.

Mainly you should do a separate link for each page, and when the user clicks on any page he will be redirected to this page using any effect you want or even if it single page website.

In this case, Google will have a unique link for each page and the user will have the fancy effect and the great UX.

EX:

<a href="http://www.example.com/contact-us" onclick="fancyEffects();">Contact Us</a>

Kenny