Crawlable Ember Apps

You need to make your back-end support every URL that your Ember.Router does. Do a “view source” on different pages of discuss.emberjs.com, and you’ll see that each page serves static HTML that matches completely with the content you see on your screen. This HTML needs to have real links to the next pages.

Take the source code of http://discuss.emberjs.com/ for example. It contains HTML like this:

...
<div class="topic-list">
<a href="/t/welcome-to-the-ember-js-discussion-forum/185">Welcome to the Ember.js Discussion Forum</a> <span title='posts'>(4)</span><br/>
<a href="/t/how-to-add-child-in-ember-data/470">How to add child in ember-data?</a> <span title='posts'>(2)</span><br/>
<a href="/t/todomvc-based-getting-started-guide/433">TodoMVC-based Getting Started Guide</a> <span title='posts'>(2)</span><br/>
...

If you check the source for Welcome to the Ember.js Discussion Forum, you can see that it also contains the actual post content, author name, and everything else.

...
<div class='creator'>
    #1 By: <b>Tom Dale</b>, March 11th, 2013 12:23
  </div>
  <div class='post'>
    <p>Welcome to the Ember.js discussion forum.</p>

<p>We're running on <a href="http://www.discourse.org/" rel="nofollow">the open source, Ember.js-powered Discourse forum software</a>. They are also providing the hosting for us. Thanks guys!</p>
...

All this HTML should be wrapped in a <noscript>...</noscript> tag, so normal users with modern browsers only see the Javascript generated stuff. But the search engines will only look at what’s inside the noscript tag, which is how they are able to crawl your site.

2 Likes