CODEWITHSUNDEEP
angularjs
Punit
Punit

Reputation: 405

How can i make my AngularJS website crawled on google?

I want to remove # from my angularjs app, I am developing an website, I think it may help to make SEO friendly website, May be i am wrong, Please help Thanks

Upvotes: 2

Views: 204

Answers (2)

christophe.chapron
christophe.chapron

Reputation: 423

I agree with Joe Lloyd for the way to remove the # from your url but it won't help you to make your angularjs website crawlable. Check out the following steps :

  1. Configure the html5mode

    config(function ($routeProvider, $locationProvider) { $locationProvider.html5Mode(true);

  2. Add <meta name="fragment" content="!"> to your pages so the google bot knows to add the ?_escaped_fragment_= at the end of your request.

  3. Handle the ?_escaped_fragment_=on the server side and serve a static snapshot of the requested html page (phantomjs can make the job) so the bot will index the rendered version of the html page.

  4. Populate your sitemap.xml and send it to google using www.google.com/webmasters/

Have fun !

Upvotes: 3

Joe Lloyd
Joe Lloyd

Reputation: 22353

Config

To remove the # in your url you need to add this to your main module. You put the app into html5 mode.

//This config is used to remove the # in the html
app.config(["$locationProvider", function($locationProvider) {
   $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
   });
}]);

Server Side (NodeJS)

This will have a server side effect when you hit refresh you need to add an extra route that is able to find the new url. this will work in your express js app.js file. Where the public folder contains your angular app and you have your index.html file in there

// ### CATCH REFRESH TO INDEX ###
app.all('/*', function(req, res, next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendFile('public/index.html', { root: __dirname });
});

Upvotes: 1

Related Questions