HTML5 / AngularJS / Nginx application with correct google-indexing

Most web applications and web frameworks use an architecture that does not allow separating ui and backend development. Thus, it is not possible to divide the team into highly specialized frontend and backend developers. Regardless of the preferences of the developer, he has to have an understanding of both the presentation layer and the logic layer. If a ui-developer knows only how to start the server, and about the data model - this is a great success. In bad cases, the ui-developer needs to do a complete build of the project to see the line changes in the javascript file, or to know about the jsp file language to change the style of the element. The formation and transfer of processed html files to the server also adversely affects the server and network performance.




')
Nowadays, modern browsers that support HTML5, WebSocket, and Full Ajax applications no longer need to clog the backend server with something different from business logic. All ui-development can be done on a nginx server with api services stubs. And the frameworks for auto-generating documentation will help both ui and backend developers to reduce communication costs. Transferring only json data will also significantly reduce server load. After all, the compressed javascript ui-client code can be kept in the application cache.

But if modern browsers easily cope with the increased responsibility, then search engines need help.

To properly index the application to angularjs, we need the following things:

• sitemap.xml
• html5Mode
• nginx
• old fashion backend server

HTML5 mode

Html5 mode turns angularjs routes from example.com/#!/home to example.com/home (all href links should also point to the url without hashbang). To enable html5mode you need to run:

 $locationProvider.html5Mode(true); $locationProvider.hashPrefix('!'); 

I leave ! for compatibility with non-javascript browsers

Now it is necessary for our nginx server to send requests from example.com/home to the main index.html file of the application. To do this, specify the following directive in the config:

 location / { expires -1; add_header Pragma "no-cache"; add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0"; root /var/web; try_files $uri $uri/ /index.html =404; } 

The string try_files $uri $uri/ /index.html =404; means that now all non-existent url will be redirected to the index.html file, while storing the url in the address bar of the browser.
This solution is already working (and also compatible with the old hashbang link format) and if your application is not to be indexed by search engines, you can finish it.

SEO

Now we will help the search engine to process our application correctly. To do this, we will prepare tips for the bot and generate snapshot pages. To begin, tell him about which pages need to be indexed using the sitemap.xml file. The simplest version of the file consists of links to pages and the date of their last update (a more detailed format is available at www.sitemaps.org ):

 <urlset xmlns='http://www.sitemaps.org/schemas/sitemap/0.9'> <url> <loc>http://senior-java-developer.com/java/basics</loc> <lastmod>2013-07-12</lastmod> </url> <url> <loc>http://senior-java-developer.com/</loc> <lastmod>2013-07-12</lastmod> </url> </urlset> 

Great, the search engine will request links from our site and receive content index.html because no javascript processing is built into the search bots. Tell the bot that behind the technical page `index.html` hidden real content. To do this, add the following to the page header:

 <meta name="fragment" content="!" /> 

This will give the bot the opportunity to take the next step. Seeing fragmet=! the bot will request the page again, but add the ?_escaped_fragment_= parameter to the end of the url. We'll tell nginx that requests with this parameter need to be sent to another place:

 if ($args ~ "_escaped_fragment_=(.*)") { rewrite ^ /snapshot${uri}; } location /snapshot { proxy_pass http://api; proxy_connect_timeout 60s; } 

That's all, now all requests from the bot will be sent to the api backend server.

Real url	Bot url	Backend url
example.com	example.com/?_escaped_fragment_=	localhost:8080/snapshot/
example.com/home	example.com/home?_escaped_fragment_=	localhost:8080/snapshot/home

I use thymeleaf to create snapshots. Since Both thymeleaf and angularjs use html5 attributes, you can use a single template file, however I prefer not to mix them.

A line from the html view would look something like this:

 <div ng-bind="text" th:text="${text}"></div>