skip to Main Content

In an Angular setting, I have chose Angular UI-router to switch between views.

My config looks as follows:

.config(function($stateProvider, $urlRouterProvider) {



    // Nav
    .state('app', {
      url: '/app',
      templateUrl: 'templates/navbar.html',
      abstract: true,
      controller:'AppCtrl as app',

    // Home
    .state('app.home', {
      url: '/home',
      templateUrl: 'templates/home.html',
      controller:'HomeCtrl as home',

    .state('app.browse', {
      url: '/browse',
      templateUrl: 'templates/browse.html',
      controller:'BrowseCtrl as browse',

    .state('app.browse-detail', {
      url: '/browse/:productId',
      templateUrl: 'templates/browse-detail.html',
      controller:'BrowseDetailCtrl as detail',


This will result that the url of a product will appear as follows:

Instead I would like to see something like:

where most-awesome-product is an Url Slug.

My questions are:

  • what are in general the principles of making Angular Websites SEO friendly using Routing?
  • how can I change the url of my angular router with adding the url slug (see above)?
  • will changing the url make my website SEO friendly?




  1. you need to keep the #! urls as fallbacks for legacy browsers.

    to get google to index your site you dont need html snapshots anymore.
    i have a site indexed with following setup

    1. sitemap
    2. pushstate without “#!” urls
    3. Canonical Tags
    4. content accessible with #! and normal routing, canonical must point to urls that you want in the index. (i have https + html5 ui router urls)

    In order to use canonical Tags with Parameters i use this snippet:

    Dont forget to redirect all requests on your server to your index file when removing the hashbang.

    Login or Signup to reply.
  2. Google has been attempting to make one page apps more SEO friendly, but not sure how far they have gotten, which is why I stick with a non one page app url structure when I need a site to be SEO friendly.

    One way to accomplish this using your set up is to add to your config $locationProvider.html5Mode(true); and add under your HTML header <base href="/app/" /> which will turn your url


    My issue with this set up I have found is that you need to configure your server to only output one entry point to your front end such as Here is a tutorial on setting this up.

    Login or Signup to reply.
  3. You need to use the html5Mode for that

    In web.config add


    In index.html page

    <base href="/">

    It is enough but when you will refresh the page it will give the error so need to use url re-writing, so add in web.config

          <rule name="Main Rule" stopProcessing="true">
            <match url=".*" />
            <conditions logicalGrouping="MatchAll">
              <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />                                 
              <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <action type="Rewrite" url="/" />

    And your state will need to change, like this

    .state('app.browse-detail', {
          url: '/browse/:productId/:slug',
          templateUrl: 'templates/browse-detail.html',
          controller:'BrowseDetailCtrl as detail',

    For more detail see AngularJS HTML5 mode reloading page not found solution

    Login or Signup to reply.
  4. Just add a line of code in route configuration file:


    and in index.html add:

    <base href="/">

    It will resolve your problem.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top