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!

Digged

I have also begun working on a library - github.com/jjbskir/angular-prerender - to prerender the html pages to help with SEO and nice urls. – Taxonomy

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.

Taxonomy

Answer 2

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: https://github.com/w11k/w11k-angular-seo-header

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

Nitramine

Sounds promising. Can you show me an example of how it looks? App.js – Digged

why dont you remove the id from your url and map it back inside your application? Seams to be the easiest way. Or just use the Product Name as another URL parameter. to access him in the pagetitle simply use titleExtend with the provided directive. – Nitramine

Answer 3

You need to use the html5Mode for that

In web.config add

$locationProvider.html5Mode(true);

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

<system.webServer>
    <rewrite>
     <rules> 
      <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" />
        </conditions>
        <action type="Rewrite" url="/" />
      </rule>
    </rules>
    </rewrite>
</system.webServer>

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

Kinsman

Where do you put the web.config? – Digged

Answer 4

Just add a line of code in route configuration file:

$locationProvider.html5Mode(true);

and in index.html add:

<base href="/">

It will resolve your problem.

Schock