Seo single page application
Posted By : Tarun Tyagi | 27-Mar-2016
In this blog I will describe how to configure your site for seo your angular.js website
How modern search engines work with client-side apps
Google and other advanced search engines support the hashbang URL format, which is used to identify the current page that’s being accessed at a given URL. These search engines transform this URL into a custom URL format that enables them to be accessible by the server.
If you’re building a site in Angular and you’d like it to be SEO friendly
you need to following these steps
- First you need to add hashbang(#!) in your url. eg:www.xyz.com/#!/user
We’ll need to configure our app to use the hashPrefix (default) in our routing. This will turn our routes from simply using the/#/ syntax to the /#!/ syntax:
|
1 2 3 4 |
angular.module('myApp', []) .config(['$location', function($location) { $location.hashPrefix('!'); }]);
and add this meta tag to the <head> of your pages |
<meta name="fragment" content="!">
This tells the Google spider to use the new crawling spec to crawl our site. When it encounters this tag, instead of crawling our site like normal, it will revisit the site using the ?_escaped_fragment_= tag.
means google spider replace #! to ?_escaped_fragment_= tag
- Step Second create html snapshot
We can take snapshots of our HTML app to deliver our backend app, using a tool like PhantomJS to render our pages. When a page is requested by Google using the _escaped_fragment_ query parameter, we can simply return and render this page.
I have discuss in previous blog how to create html snapshot CLICK HERE for creating html snapshot using phantomjs
- Step Third Now update your nginx configuration file
If we’re using nginx to serve our angular app, we can add some configuration to serve snapshots of our app if there is an_escaped_fragment_ parameter in the query strings.
if ($args ~ "_escaped_fragment_=/?(.+)") {
set $path $1;
rewrite ^ /phantomjs/snapshots/_#!/$path.html break;
}
THANKS
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Tarun Tyagi
Tarun is a bright Java developer with experience in MEAN stack and Grails frameworks. Other than programming his area of interest are listening music and reading novels.