Angular設置title信息解決SEO方面存在問題

更新時間：2016年08月19日 10:18:02 作者：薛陳磊

爬蟲在檢索seo信息的時候會讀不了js給其賦的值，導致搜索引擎收錄不了或者收錄了無效的信息,下面本文給大家介紹Angular設置title信息解決SEO方面存在問題,需要的朋友可以參考下

Javascript框架在處理seo方面存在問題，因為爬蟲在檢索seo信息的時候會讀不了js給其賦的值，導致搜索引擎收錄不了或者收錄了無效的信息,比如收錄的可能是title={{title}}這樣的，下面先說如何在路由跳轉時修改頁面的seo信息，現(xiàn)在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'
}
})

然后使用通過監(jiān)聽$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時就會發(fā)現(xiàn)：

這里是獲取的已經設置好的data中pageTitle的值，如果不想寫在state里或者寫死，可以傳state中的唯一標示，配合后臺接口，將查詢的title渲染到頁面；同樣meta標簽如keywords、description可以在此時一同綁定；

上面說到javascript框架在seo方面存在短板，應對ng的這個問題市面上也有很多方案,比如prerender，seo.js等，思想都是在頁面加入表示，讓爬蟲在頁面渲染好后才去扒數據，同時服務器上要配置些服務，服務將檢測是否有對應這個URL的快照或者緩存的頁面，如果存在就發(fā)給爬蟲，如果不存在，則生成快照，然后發(fā)送正確的頁面給爬蟲；處理起來還是要費些功夫的，所以也可以采用ng+常規(guī)的開發(fā)模式，一些重要的頁面不要用這種頁面渲染seo的方式，或者建立專門的seo信息頁；所以在這方面感覺用ng框架做app（ionic）還是很合適的；

以上所述是小編給大家介紹的Angular設置title信息解決SEO方面存在問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

您可能感興趣的文章: