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

BASE tag with locationProvider AngularJS – SEO

My English is not very good, but i try to explain my self clear. I’m trying to optimize Website based on pure Angular to SEO.
Here is the link http://www.sanjosejumpstart.com/tests/project/
When you come first time to the website and start clicking on the links, routing is working fine, but when refreshing the page, i get error with

Not Found

The requested URL /tests/project/automotive was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

i can’t understand why this happens.(may be because a hash is disappeared?)

Some body have any idea how i can fix that?

BASE tag on index html looks

 <base href="http://www.sanjosejumpstart.com/tests/project/">

and route config look likes:

.config(['$httpProvider', '$stateProvider', '$urlRouterProvider',   '$locationProvider', 
 function($httpProvider, $stateProvider, $urlRouterProvider, $locationProvider) {

$httpProvider.defaults.transformRequest.push(LockJS.postConvert);
                                $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
$httpProvider.interceptors.push('Interseptor');

 /* activating html5 mode */
 $locationProvider.hashPrefix('!');
 $locationProvider.html5Mode(true);

 $urlRouterProvider.otherwise('/home');
 $stateProvider
   .state('home', {
     url: '/home',
      views: {
       '': { 
         templateUrl: 'templates/main-page-content.html' 
       },
       'article@home': {
          templateUrl: 'templates/main-page/app-main-article.html',
          controller: 'MainArticleCtrl'
        },
        'services@home': {
           templateUrl: 'templates/main-page/app-main-services-list.html',
           controller: 'MainServicesCtrl'
        },
        'services-info@home': {
            templateUrl: 'templates/main-page/app-services-info.html',
            controller: 'MainServicesInfoCtrl'
        },
        'aside@home': {
           templateUrl: 'templates/main-page/app-aside-content.html'
        },
        'middle-slider@home': {
           templateUrl: 'templates/main-page/app-middle-slider.html'
        },
        'map@home': {
           templateUrl: 'templates/main-page/app-map.html'
        }
      }  
    })
    .state('automotive', {
       url: '/automotive',
       views: {
         '': {
           template: '<h1>automotive view</h1>'
         }
       }
    })
  
  }])

And then comes more states.
Thank you for any advice.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    i found the solution, you can see all redirects now:

    http://www.sanjosejumpstart.com/tests/project/home

    here is the solution:

    Apache server

    1) index must be php, not html - index.php

    2) adding BASE tag in head of the file like this = <base href="/tests/project/">

    3) in app config - $locationProvider.html5Mode(true)

    no need to add $locationProvider.hashPrefix('!');

    and finally .htaccess

    <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /Locksmith-Project/project/
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)       index.php/#/$1 
</IfModule>

    Hope it is be helpful to someone


  2. 0

    You need to set up your server to return your index.html page for all requests that are not:

    • an API call (have these all start with /api to make this easier)
    • a static file request (have these all start with /pub or similar)

    Then the index.html will load, Angular will bootstrap your app, which will involve examining the route and loading the correct page.

    Why should I use /api or /pub?

    The exact prefix is not super important (though it should make sense). What is helpful is that by using a common prefix for all API endpoints (e.g. routes you call using the $http or $resource services), you will not overlap with any client-side routes in your app.

    For example, if you didn’t follow this rule, say you had the following server side route configured:

    • /products – gets a list of products as JSON

    Then you had a client-side route set up as: /products, it becomes a bit confusing as to which one you meant when you type in www.myserver.com/products.

    Technically, if the server is configured correctly it could tell the difference between an AJAX request to /products asking for JSON and a “normal” HTTP GET request to /products. But it is still not ideal, because you can’t tell from the URL alone which one you meant. You have to look at how it was called as well.

    Alternative: Give up on HTML5 mode

    If you can’t configure the server like I said above, you will need to disable HTML5Mode. That way, all the relative URLs will be after the #, so the only file request the web server ever gets is for the default page for /test/project.

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

Back To Top
Search