“Single-page” JS websites and SEO

Question

There are a lot of cool tools for making powerful \"single-page\" JavaScript websites nowadays. In my opinion, this is done right by letting the server act as an API (and no

Answer 1

Interesting. I have been searching around for viable solutions but it seems to be quite problematic.

I was actually leaning more towards your 2nd approach:

Let the server provide a special website only for the search engine bots. If a normal user visits http://example.com/my_path the server should give him a JavaScript heavy version of the website. But if the Google bot visits, the server should give it some minimal HTML with the content I want Google to index.

Here's my take on solving the problem. Although it is not confirmed to work, it might provide some insight or idea's for other developers.

Assume you're using a JS framework that supports "push state" functionality, and your backend framework is Ruby on Rails. You have a simple blog site and you would like search engines to index all your article index and show pages.

Let's say you have your routes set up like this:

resources :articles
match "*path", "main#index"

Ensure that every server-side controller renders the same template that your client-side framework requires to run (html/css/javascript/etc). If none of the controllers are matched in the request (in this example we only have a RESTful set of actions for the ArticlesController), then just match anything else and just render the template and let the client-side framework handle the routing. The only difference between hitting a controller and hitting the wildcard matcher would be the ability to render content based on the URL that was requested to JavaScript-disabled devices.

From what I understand it is a bad idea to render content that isn't visible to browsers. So when Google indexes it, people go through Google to visit a given page and there isn't any content, then you're probably going to be penalised. What comes to mind is that you render content in a div node that you display: none in CSS.

However, I'm pretty sure it doesn't matter if you simply do this:

  
<%= @article.title %>
  
<%= @article.description %>
  
<%= @article.content %>

And then using JavaScript, which doesn't get run when a JavaScript-disabled device opens the page:

$("#no-js").remove() # jQuery

This way, for Google, and for anyone with JavaScript-disabled devices, they would see the raw/static content. So the content is physically there and is visible to anyone with JavaScript-disabled devices.

But, when a user visits the same page and actually has JavaScript enabled, the #no-js node will be removed so it doesn't clutter up your application. Then your client-side framework will handle the request through it's router and display what a user should see when JavaScript is enabled.

I think this might be a valid and fairly easy technique to use. Although that might depend on the complexity of your website/application.

Though, please correct me if it isn't. Just thought I'd share my thoughts.