Angular設定title資訊解決SEO方面存在問題_AngularJS

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方面存在問題，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！