Javascript框架在處理seo方面存在問題,因為爬蟲在檢索seo信息的時候會讀不了js給其賦的值,導致搜索引擎收錄不了或者收錄了無效的信息,比如收錄的可能是title={{title}}這樣的,下面先說如何在路由跳轉時修改頁面的seo信息,現在spa跳轉一般用route-ui了,就以這個為基礎講解,在app.js配置項state中加入title信息,如下: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'}})然后使用通過監聽$stateChangeSuccess來修改頁面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);}};}]);這里賦值是通過獲取當前state中設置的title,也就是這里toState對象的值,當我們打印這個toState時就會發現:

這里是獲取的已經設置好的data中pageTitle的值,如果不想寫在state里或者寫死,可以傳state中的唯一標示,配合后臺接口,將查詢的title渲染到頁面;同樣meta標簽如keywords、description可以在此時一同綁定;
上面說到javascript框架在seo方面存在短板,應對ng的這個問題市面上也有很多方案,比如prerender,seo.js等,思想都是在頁面加入表示,讓爬蟲在頁面渲染好后才去扒數據,同時服務器上要配置些服務,服務將檢測是否有對應這個URL的快照或者緩存的頁面,如果存在就發給爬蟲,如 果不存在,則生成快照,然后發送正確的頁面給爬蟲;處理起來還是要費些功夫的,所以也可以采用ng+常規的開發模式,一些重要的頁面不要用這種頁面渲染seo的方式,或者建立專門的seo信息頁;所以在這方面感覺用ng框架做app(ionic)還是很合適的;
以上所述是小編給大家介紹的Angular設置title信息解決SEO方面存在問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!
新聞熱點
疑難解答