seo Question posted in
Some basic information to get you started with this can be found here.

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

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!

Tags:

4

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

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

    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
  4. 0

    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.

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

Back To Top
Search