Remove _escaped_fragment_ using NodeJs and AngularJs

NodeJs AngularJs Remove _escaped_fragment_ using

AngularJs

AngularJS is a very powerful JavaScript Framework. It is used in Single Page Application (SPA) projects. It extends HTML DOM with additional attributes and makes it more responsive to user actions.?

 

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you currently have to write. 

Create seo friendly angularjs using node js server , we will go over how to make your AngularJS website or application crawlable by Google.

Problem to Search engines crawlers

Search engine or bots originally design to crawl html content.When the web evolved.AJAX allowed for asynchronous operations on the web.Angularjs is a nw modal structure that's why Google not crwal angularjs website.

Remove # in url 

The main page is also pretty standard. Write your code like you normally would. The big change here will simply be adding <base href="/"> to the <head> of your page.

<base href="/"> 

In our app.js, the page where we define our AngularJS code, we will need to add this code to our routes config: $locationProvider.html5Mode(true);

$locationProvider.html5Mode(true);

 

Reload issue

Angularjs project run then reload current page then page not found issue.this issue solved using node js server add this line

app.get('*', function(req, res) {
    res.sendfile('./public/index.html'); // load our public/index.html file
});

then solve the reload issue

Project Structure 

Project name

     node_modeules                  // node modeules

            public    // Frontend side

                pages                      //Html Pages

                angular-ui-router.min.js   // ui-router js

                angular.min.js             // angular.js

                app.js                     // app.js file to run angularjs project 

                index.html                

     package-lock.json

     package.json

      server.js              // node server file

Create a new directory, we can run the following command:

mkdir <project name>

then move inside the newly created directory:

cd <project name>

then  run this command : 

npm init

and fill this information like that :

package name: (project name)
version: (1.0.0)
description:
entry point: (index.js) server.js
test command:
git repository:
keywords:
author:
license: (ISC) 

After create project install node package run command:

npm install --save express morgan body-parser method-override multer

create server.js file and add this code :

// set up ========================
var express  = require('express');
var app      = express();                   // create our app w/ express
var morgan = require('morgan');             // log requests to the console (express4)
var bodyParser = require('body-parser');    // pull information from HTML POST (express4)
var methodOverride = require('method-override');
var multer  =   require('multer');

app.use(function(req, res, next) { //allow cross origin requests
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "POST, PUT, OPTIONS, DELETE, GET");
    res.header("Access-Control-Max-Age", "3600");
    res.header("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
    next();
});

// configuration
app.use(express.static(__dirname + '/public'));                 // set the static files location /public/img will be /img for users
app.use(morgan('dev'));               
app.use(bodyParser.json({limit: '50mb'}));                          // log every request to the console
app.use(bodyParser.urlencoded({limit: '50mb','extended':'true'}));            // parse application/x-www-form-urlencoded                                // parse application/json
app.use(bodyParser.json({ type: 'application/vnd.api+json' })); // parse application/vnd.api+json as json


//  replace / to * then refresh issue solve in frontend side
app.get('/', function(req, res) {
    res.sendfile('./public/index.html'); // load our public/index.html file
});

app.listen(process.env.PORT || 9000, function(){console.log("App listening on port 9000");});

After created node server then create frontend side (Angularjs)

Create public -> index.html and add code

<!DOCTYPE html>

<html>

<head>

<base href="/"> 

<title>Seo Angularjs</title>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">

<style type="text/css">

.container{

padding: 0px;

width: 100%;

}

</style>

<script type="text/javascript" src="angular.min.js""></script>

<script type="text/javascript" src="angular-ui-router.min.js"></script> 

<script src="app.js"></script>

</head>

<body ng-app="seoangularjs">

    <div ui-view></div>

</body>

</html>

 

Create public -> app.js and add code

var app = angular.module('seoangularjs', ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {

$locationProvider.html5Mode(true);

$urlRouterProvider.otherwise('/header/home');

    $stateProvider

  .state('header', {

    url: '/header',

    abstract: true,

    templateUrl: 'pages/header.html'

    })

.state('header.home', {

    url: '/home',

    views: {

      'container': {

        templateUrl: 'pages/home.html'

      }

    }

})

.state('header.about', {

    url: '/about',

    views: {

      'container': {

        templateUrl: 'pages/about.html'

      }

    }

})

.state('header.contact', {

    url: '/contact',

    views: {

      'container': {

        templateUrl: 'pages/contact.html'

      }

    }

});

});

then create html page in pages folder 

refrence how to create frontend side (Angularjs) link 

http://codesolution.co.in/detail/post/angularjs-nested-routing--using-ui-routing---10-minutes

 

See Demo : https://www.youtube.com/watch?v=bfX3aOgLECI

Github Link : https://github.com/Sudarshan101/AngularjsSeo

 

Thankyou :)

About the author
Code solution

info@codesolution.co.in

Discussion
  • 0 comments

Add comment To Login
Add comment