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

AngularJS multilanguage URL routing with links – SEO

I have an AngularJS webapp. I´m changing the application so the URLs can be multilanguage (for SEO indexing purposes).

I´m setting up my app.js, like this:

$routeProvider.when('/:language', {templateUrl: 'partials/home.html', controller: 'HomeCtrl'});     
    $routeProvider.when('/:language/about', {templateUrl: 'partials/about.html', controller: 'AboutCtrl'});

Then, in a service I get the language parameter with $routeParams and call my translation code with angular-translate to serve the page in the corresponding language.

Everything is working so far.

But now, all my internal links, i.e <a href="/about">{{'ABOUT' | translate}}</a> has stopped working, because they are missing the language parameter.

My approach, is to set the language in a service and get it to concatenate it in the links, something like <a href="{{TranslationService.getLanguage()}}/about">{{'ABOUT' | translate}}</a>. Of course, this will make me refactor all my links.

Is this the right approach or there is any better more clever one?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I finally followed my approach depicted above. Using UI-Router probably is best approach, but the change had a medium/big impact on my development.


  2. 0

    You can use ui-router plugin and define your routes as nested.

    https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-routing-for-nested-states

    $stateProvider
  .state('home', {
     url: '/:language',
     ...
  })
  .state('home.about', {
     url: '/about',
     ...
  });

    Then, you can use ui-sref directive and navigate the routes with relative path.

    home.html: To go to a ‘About’ child route <a ui-sref=".about">About</a>

    about.html: To go to a parent route <a ui-sref="^">Home</a>

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

Back To Top
Search