There are problems with the Javascript framework in handling SEO, because crawlers cannot read the value assigned to it by js when retrieving SEO information, which causes search engines to be unable to include or include invalid information. For example, the included may be title={{title}}. Let’s first talk about how to modify the page’s SEO information during route jump. Now spa jumps generally use route-ui. Let’s explain based on this and add title information to the app.js configuration item state, 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 modify the page title by listening to $stateChangeSuccess:
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);}};}]);Here the assignment is by getting the title set in the current state, that is, the value of the toState object here. When we print this toState, we will find:
Here is the value of the pageTitle in the data that has been set. If you do not want to write it in the state or write it to death, you can pass the unique label in the state and render the query title to the page in conjunction with the background interface. Similarly, meta tags such as keywords and description can be bound together at this time;
As mentioned above, JavaScript framework has shortcomings in SEO, and there are many solutions on the market to deal with the problem of ng, such as prerender, SEO.js, etc. The idea is to add expressions on the page, so that the crawler can only dig up the data after the page is rendered. At the same time, some services must be configured on the server. The service will detect whether there are snapshots or cached pages corresponding to this URL. If they exist, they will send them to the crawler. If they do not exist, they will generate a snapshot and then send the correct page to the crawler. It still takes some effort to process it, so you can also use the ng+ conventional development model. For some important pages, do not use this page to render SEO, or create a special SEO information page; so in this regard, it feels that it is still appropriate to use NG framework to make apps (ionic);
The above is the Angular setting title information introduced to you by the editor to solve problems in SEO. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!