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

Angular seo friendly urls and page reload issue

How I can make seo friendly url like this, in backend I have node server.

http://localhost:3003/my-new-mobile  //product
http://localhost:3003/my-new-category //category
http://localhost:3003/my-first-blog-post // blog post

I have tried something like this but it is not working.I will use only one controller for all above 4 urls.
Can I used regular express?

$routeProvider
      .when('^/([a-z])$', {
        templateUrl: 'partials/main.html',
        controller: 'MainCtrl'
      })

When I tried to like this way:

<html ng-app="myApp">
 <base href="/client">

and in app.js

 $locationProvider.html5Mode(true);

It show error when page reload.
http://localhost:3003/my-new-mobile

Cannot GET /my-new-mobile

any suggestion how can achieve this or how can avoid with Cannot GET /my-new-mobile error?

Here is my server.js

var express           = require('express');
var app                 = express();
var bodyParser      = require('body-parser');

app.set('views', __dirname);
app.engine('html', require('ejs').renderFile);


var port = process.env.PORT || 3003;
app.listen(port, function(){
      console.log('Listening on port ' + port); 
});
    app.get('/', function(req, res){
      res.render('client/views/index.html');
    })

app.get('/partials/:name', function (req, res) {
  console.log(req.params.name);
      res.render('client/views/partials/' + req.params.name);
});

app.use('/clientjs', express.static(__dirname + '/client/js'));
  app.use('/bower_components', express.static(__dirname + '/bower_components'));
app.use('/images', express.static(__dirname+'/uploads/'));
Tags:

2

Answers


  1. 0

    Try something like this –

    $routeProvider
  .when('/:post', {
    templateUrl: 'partials/main.html',
    controller: 'MainCtrl'
  })

    You’ll need to set up other routes as well and they might get messed up, I recommend doing something like this instead –

    $routeProvider
  .when('/posts/:post', {
    templateUrl: 'partials/main.html',
    controller: 'MainCtrl'
  })

    EDIT Maybe you should change your server code like this

    app.get('/:post', function(req, res){
  res.render('client/views/index.html');
})
    Login or Signup to reply.
  2. 0

    You need to serve the index.html file for every route on your express server not just /.

    For Example

    //Serve Static Assets
app.use('/images', express.static(__dirname + '/dist/images'));
app.use('/scripts', express.static(__dirname + '/dist/scripts'));
app.use('/styles', express.static(__dirname + '/dist/styles'));
app.use('/favicon.ico', express.static(__dirname + '/dist/favicon.ico'));
app.use('/robots.txt', express.static(__dirname + '/dist/robots.txt'));

//Respond to with index for all other routes
app.get('/*', function(req, res, next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendFile('dist/index.html', { root: __dirname });
});

    It is also worth noting, that these are SEO friendly URLs, your Angular app is not SEO friendly without server side rendering. you may want to look into something like prerender.io

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

Back To Top
Search