HTML5 / AngularJS / Nginx app with the right one with google indexing

Original author: Alexey Kutuzov
  • Transfer
  • Tutorial
Most web applications and web frameworks use an architecture that does not allow the separation of ui and backend development. Thus, it is not possible to split 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 the ui developer only knows how to start the server and the data model - this is a huge fortune. In bad cases, the ui developer needs to complete the assembly of the project to see the line changes in the javascript file, or to know about the language of the jsp files to change the style of the element. The generation and transfer of processed html files to the server also adversely affects server and network performance.

non-ajax



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

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

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

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


image

HTML5 mode

Html5 mode turns angularjs routes from view example.com/#!/hometo view example.com/home(all hreflinks should also point to url without hashbang). To enable html5mode you need to do:

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

I leave it !for compatibility with browsers that do not support javascript

Now it is necessary for our nginx server to send requests from example.com/hometo the main index.htmlapplication file. 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 line try_files $uri $uri/ /index.html =404;means that now all non-existent urls will be redirected to the index.htmlfile, while maintaining the url in the address bar of the browser.
This solution is already working (as well as compatible with the old hashbang link format) and if your application should not be indexed by search engines then you can end it.

SEO

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

http://senior-java-developer.com/java/basics2013-07-12http://senior-java-developer.com/2013-07-12


Great, the search engine will request links to our site and receive content index.htmlsince no javascript processing is embedded in search bots. Let’s tell the bot that the real page is hidden behind the technical page `index.html`. To do this, add to the page header:



This will give the bot the opportunity to take the next step. Upon seeing the fragmet=!bot, it will request the page again, but will add a parameter to the end of the url ?_escaped_fragment_=. We will tell nginx that requests with this parameter should 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 urlBot urlBackend url
example.comexample.com/?_escaped_fragment_=localhost:8080/snapshot/
example.com/homeexample.com/home?_escaped_fragment_=localhost:8080/snapshot/home


I use thymeleaf to form a snapshot. Because 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:


Also popular now: