Remove _escaped_fragment_ using NodeJs and AngularJs

NodeJs AngularJs Remove _escaped_fragment_ using

By Code solution
Jan 20th, 2021
0 comments
1

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.

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>

<title>Seo Angularjs</title>

.container{

padding: 0px;

width: 100%;

}

</style>

</head>

</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