Use Prerender.io to do SEO for angular project

Now the project in order to better division of labor is clear, the reduction of coupling are beginning to adopt the form of front-end separation into the development, we also use this form of development, the front end with angular development. Although at the beginning also met a variety of pits, but after the late familiar with is absolutely cool. A larger pit is the SEO problem, the front-end separation of the page routing is generally placed in the front-end, with the Hashbang way to control the route. But there is a situation where the page cannot be crawled by the search engine, which is a disaster for SEO. There is a problem with the solution, the general practice is to add a server can render a static page of the middleware, similar to Phantomjs,zimbile.js, as long as the discovery is a search engine spider to crawl, return to the static page. And Prerender.io is a ready-made tool. Prerender.io is a service that is compatible with many different platforms, including node,php and Ruby. The service is fully open source, but if you don't want to build your own SEO server, you can use the solution they provide. PreRender people think that SEO is the right thing, not a privilege, they have done some great work to expand their solution, add a lot of custom features and plugins. Let's take a look at how to use: Front-end (client) configuration
the form of # in the URL

In the app.js that defines the ANGULARJS code, we need this code to be added to our routing configuration: $locationProvider. Hashprefix ('! '); This method will rewrite your URL. Relative to the standard address http://localhost:3000/#/home your URL address will look like a http://localhost:3000/#!/home form

If you are using HTML5 mode (Html5mode), you will not see any difference.

The #! in the URL is very important because it tells the crawler that your program has AJAX content and needs it to do the Ajax crawl transformation.

Angular.module (' myApp '). config ([      ' $locationProvider ',    function ($locationProvider) {        $ Locationprovider.hashprefix ('! ');    }]);

Google and other search engines will identify with ' #! ' Address and turn it into '? _escaped_fragment_= '.

For example, Google found the address

Http://www.example.com/#!/user/123

It will send this request to the server

Http://www.example.com/?_escaped_fragment_=/user/123

no form of # in URL (with HTML5 push state)1. Configure Index.html to <meta name= "fragment" content= "in the

Angular.module (' myApp '). config ([      ' $locationProvider ',    function($ Locationprovider) {        $locationProvider. Hashprefix ('! ') );        $locationProvider. Html5mode (true);    }]);    

If using Html5mode form, Google found the URL will be added in the back? _escaped_fragment_= for example, Google found the address

http://www.example.com/user/123

Will send such a request

server-side configurationStart by registering an account with Https://prerender.io and getting tokens. Its official network has a variety of environment configuration, such as node. js, Ruby, Nginx, Apache, and so on, here just say APAHCE configuration. It provides a configuration file for the. htaccess, so first verify that the. htaccess file is enabled. Then add the following configuration to the. htaccess file

<IfmoduleMOD_HEADERS.C>Requestheader Set X-prerender-token "Your Token"</Ifmodule><Ifmodulemod_rewrite.c>rewriteengine on # Don ' t rewrite files or directories Rewritecond%{request_filename}-f [or] Rewritecon D%{request_filename}-D rewriterule ^-[L]<Ifmodulemod_proxy_http.c>Rewritecond%{http_user_agent} baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly |quora\ link\ preview|showyoubot|outbrain|pinterest|slackbot|vkshare| W3c_validator [Nc,or] Rewritecond%{query_string} _escaped_fragment_ # only proxy the request to Pre Render if it ' s a request for HTML Rewriterule ^ (?!. *? (\.js|\.css|\.xml|\.less|\.png|\.jpg|\.jpeg|\.gif|\.pdf|\.doc|\.txt|\.ico|\.rss|\.zip|\.mp3|\.rar|\.exe|\.wmv| \.doc|\.avi|\.ppt|\.mpg|\.mpeg|\.tif|\.wav|\.mov|\.psd|\.ai|\.xls|\.mp4|\.m4a|\.swf|\.dat|\.dmg|\.iso|\.flv|\. M4v|\.torrent|\.ttf|\.woff)) (. *) http://service.prerender.io/http://example.com/$2 [P,L]</Ifmodule># Rewrite Everything else to index.html-Allow HTML5 state links rewriterule ^ index.html [L]</Ifmodule>

Make sure that the Mod_headers, Mod_rewrite, mod_proxy_http three modules are enabled.

After a successful configuration, the cached pages in Prerender.io will have it cached pages, which can also be added manually. Search engine crawl situation will this crawl stats in the reaction. Next take a look at the site in each search engine collection situation, Google or included relatively fast, Baidu is not able to spit groove is too slow, anyway I configured one weeks Baidu is a little reaction, do not know how long. Let's do this for the time being. Reference https://prerender.io/js-seo/angularjs-seo-get-your-site-indexed-and-to-the-top-of-the-search-results/https:/ /scotch.io/tutorials/angularjs-seo-with-prerender-iohttp://www.oschina.net/translate/ Angularjs-seo-with-prerender-io

Use Prerender.io to do SEO for angular project