HTML5 / AngularJS / Nginx app with the right one with google indexing
- 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.
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:
Html5 mode turns angularjs routes from view
I leave it
Now it is necessary for our nginx server to send requests from
The line
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.
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
Great, the search engine will request links to our site and receive content
This will give the bot the opportunity to take the next step. Upon seeing the
That's all, now all requests from the bot will be sent to the api backend server.
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:
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
HTML5 mode
Html5 mode turns angularjs routes from view
example.com/#!/home
to view example.com/home
(all href
links 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 javascriptNow it is necessary for our nginx server to send requests from
example.com/home
to the main index.html
application 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.html
file, 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.xml
file. 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/basics 2013-07-12 http://senior-java-developer.com/ 2013-07-12
Great, the search engine will request links to our site and receive content
index.html
since 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 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 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: