SEO for Angulajs ajax loaded contents

faceFore

Changing & Setting Web Page Title and Description on Fly


The first look of your website is its Title & description. Because these two are the only things that people see when your site appears in Google or other search engines SERP. The people's response depends on these, its the face of your site's web page, so make it neat & clean, meaningful and relevant to your website subject. It is your website 1st impression, make it effective.

Usually most of the websites have more than one page, it is easier to set unique page title and description if the pages are few and static.
But it become a big issue if your website has many pages, that loaded dynamically with Ajax request and fill the page with JSON data. Especially in case of an eCommerce website, where number of pages may go over 100, and for each product page is created dynamically and loaded with JSON data.

You will want that the page title should be changed & set to the product's name and page description should contain product's detail, but it needs a lot of time to create a static Html page for every product and set its unique title and description.

The page title and page description playing an important role in website SEO boosting. It is almost a must to power up site SEO process, helping Google & other search engine to know about your site contents. They should be relevant to the website subject and contents.

But you don't have to worry any more, I will give you the simple and easy to do solution for changing & setting the unique web page title and description. You will find below the code snippet just copy and paste it once into your website main JS file.

To create a static Html page for every dynamically loading page, you can use our SEO tool set, mainly for angularjs seo but can be used with any javascript framework, for that you have to pay a one time small amount and you will get the complete script for generation prerendered static Html pages on your own server. You will also get a small snippet that you will have to paste it into your index php page. After that you will not need any middle ware, no server configuration and no nothing at all. The SEO tools perform all on fly, it will also serve the static Html snapshot to Google crawler bot and Bing, all automatically.

Here it is. how you can set page title and description on fly.

If you are using Angularjs ngRoute, then follow the script given below.


App.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/ajax-content-seo', {
templateUrl: 'templateForThisPage.html',
controller: 'yourCtrl',
theTitle: 'Angularjs dynamically loaded Ajax contents SEO tools', //The page Title
theDescription: 'Automate & improve the website Seo process. Making Angularjs Ajax loaded contents crawlable and indexed by Google bot' // The page description
})

.when('/How-to-index-ajax-contents', {
templateUrl: 'otherpage.html',
controller: 'otherCtrl',
theTitle: 'How to index ajax loaded contents in Angularjs single page application',
theDescription: 'Create html snapshots on fly. Serve static html snapshots to search
engine crawler and bots. Improve website SEO and make site pages indexed by Google.'
}) // and so on ...
.otherwise({
redirectTo:'/ajax-content-seo'
});

$locationProvider.html5Mode(true); // if you are using Html5 mode
$locationProvider.hashPrefix('!'); // if you not set it in your index page
})

// the below code do the settings on fly.
.run(['$rootScope', '$route', function($rootScope, $route) {
$rootScope.$on("$routeChangeSuccess", function(event, currentRoute, previousRoute){
// here you can give a timeout delay if u need
if(!currentRoute.redirectTo) {
document.title = currentRoute.theTitle;
document.getElementById("description")
.setAttribute("content",currentRoute.theDescription);
}
});
}]);

If you are using Angularjs ui-router, then follow the below given code.


.
.
.
.state("services",{
url: "/Best-service-in-the-region", // a detailed meaningful Url that contains keyword
templateUrl: "tplService.html",
controller: "coCtrl",
thePage: "Best Services by professionals for your home and garden",
theDescription: "Provider of home & office cleaning and plants & garden maintenance
services. Monthly and annual maintenance agreements."
});
}])
// the code for setting title & description on fly

.run(['$rootScope', function($rootScope) {
$rootScope.$on("$stateChangeSuccess", function(event, currentRoute,
currentParam,previousRoute,prevParam){
if(!currentRoute.redirectTo) {
var theTitle = currentRoute.theTitle;
var theDesc = currentRoute.theDescription;
if(theTitle==='undefined'){ // you can check it
theTitle = document.title; // if not defined then assign the main page title
}
if(theDesc==='undefined'){
theDesc = document.getElementById("description").getAttribute("content");
}
document.title = theTitle;
document.getElementById("description").setAttribute("content",theDescription);
}
});
}]);

You can contact me if you have any question or suggestion.

Thanks,
Ayub
@facefore