Angular set title information to solve the problem of SEO _angularjs

JavaScript framework in the processing of SEO problems, because the crawler in the search for SEO information will not read the value of JS, resulting in search engines can not be included or included invalid information, such as included may be title={{title}} such, The following first said how to modify the page in the route of the SEO information, now spa jump General with Route-ui, on this basis, in the App.js configuration item state to add title information, as follows: data:{pagetitle: ' User title '}

. State (' Index.user ', {
URL: '/user '), views
: {
' Content@index ': {
templateurl: ' templatehtml/user/ User.html ',
controller: ' Userctrl '
}
,
data:{
pagetitle: ' User title '
}}
. State (' Index.user.a ', {
URL: '/A ',
templateurl: ' templatehtml/user/a.html ',
data:{
pagetitle: ' User a title '
}
}
. State (' Index.user.b ', {
URL: '/b ',
templateurl: ' templatehtml/user/ B.html ',
data:{
pagetitle: ' User B title '
}
}

Then use the listener $statechangesuccess to modify the page title:

App.directive (' title ', [' $rootScope ', ' $timeout ',
function ($rootScope, $timeout) {return
{
link: function () {
var listener = function (event, tostate) {
console.log (tostate);
$timeout (function () {
$rootScope. title = (Tostate.data && toState.data.pageTitle)
? ToState.data.pageTitle
: ' Default title ';
$rootScope. metakeywords= "This is keywords"
});
$rootScope. $on (' $stateChangeSuccess ', Listener);}}
]);

The assignment here is by getting the title that is set in the current state, which is the value of the ToState object here, and when we print this tostate we find that:

Here is a set of data in the PageTitle value, if you do not want to write in the state or die, you can pass the only mark in the state, with the background interface, the query title rendering to the page; the same meta tags such as keywords, Description can be bound together at this time;

The above mentioned JavaScript framework in the SEO aspect of the short board, to deal with the problem of NG in the market there are many solutions, such as PreRender, Seo.js and so on, ideas are added on the page, let the crawler in the page rendering good after the data, while the server to configure some services, the service will detect whether there is a snapshot of the URL or cached pages, if there is a crawler, if not, then generate a snapshot, and then send the right page to the crawler ; it still takes some work to do. So can also adopt ng+ conventional development mode, some important pages do not use this page to render SEO way, or set up a special SEO information page; So in this sense, the use of NG framework to do the app (ionic) is very appropriate;

The above is a small set to introduce the angular settings title information to solve the problem of SEO, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!