Adding a SEO friendly Url Slug in Dynamic Views of Angular UI-Router

Question

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

My config looks as follows:

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

  $urlRouterProvider.otherwise('/app/home');

  $stateProvider

    // 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:

www.website.com/app/#/browse/productId

Instead I would like to see something like:

www.website.com/browse/productId/most-awesome-product

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?

Thanks!

Answer 1

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

www.website.com/app/#/browse/productId

to:

www.website.com/app/browse/productId

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 www.website.com/app. Here is a tutorial on setting this up.