Angular.js and SEO, pre-render content on the server

With angular.js, you have HTML that looks like this:

<span>{{variableValue}}</span>
<ul>
    <li ng-repeat="item in items" ng-bind="item.name"></li>
</ul>

The way to make this content SEO-friendly is to pre-render the data on the server and then let angular do its job on the client.

For simple variables there is ng-bind. And for lists there is ng-include.

Here is the example from above with pre-rendered content:

<span ng-bind="variableValue">Static indexed value</span>
<ul ng-include="'your/dynamic/list'">
    <li>seo-friendly item1</li>
    <li>seo-friendly item2</li>
</ul>
<script type="text/ng-template" id="your/dynamic/list">
    <li ng-repeat="item in items" ng-bind="item.name"></li>
</script>

This way we have initial content for search bots and instructions for angular at the same time.

Note that the solution above works for simple cases, but it may not work well for complex pages or if there are many pages. Actually, what we do is duplicate the content - we provide static content on the server side and then angular requests content dynamically and overrides the static data.

A better (and more complex) solution is to crawl the website and save static page snapshots for search engines.

This can be done with a headless browser like PhantomJS, which you can run periodically to generate static page snapshots.

There is also an easy way to do this with a service like BromBone.

It will do the complex part of the job for you, and you only need to redirect search bots to static versions of your pages generated by BromBone.

Tags: js