快捷導(dǎo)航

Angular設(shè)置title信息解決SEO方面存在問(wèn)題

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

爬蟲(chóng)在檢索seo信息的時(shí)候會(huì)讀不了js給其賦的值，導(dǎo)致搜索引擎收錄不了或者收錄了無(wú)效的信息,下面本文給大家介紹Angular設(shè)置title信息解決SEO方面存在問(wèn)題,需要的朋友可以參考下

Javascript框架在處理seo方面存在問(wèn)題，因?yàn)榕老x(chóng)在檢索seo信息的時(shí)候會(huì)讀不了js給其賦的值，導(dǎo)致搜索引擎收錄不了或者收錄了無(wú)效的信息,比如收錄的可能是title={{title}}這樣的，下面先說(shuō)如何在路由跳轉(zhuǎn)時(shí)修改頁(yè)面的seo信息，現(xiàn)在spa跳轉(zhuǎn)一般用route-ui了，就以這個(gè)為基礎(chǔ)講解，在app.js配置項(xiàng)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'
}
})

然后使用通過(guò)監(jiān)聽(tīng)$stateChangeSuccess來(lái)修改頁(yè)面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);
}
};
}
]);

這里賦值是通過(guò)獲取當(dāng)前state中設(shè)置的title，也就是這里toState對(duì)象的值，當(dāng)我們打印這個(gè)toState時(shí)就會(huì)發(fā)現(xiàn)：

這里是獲取的已經(jīng)設(shè)置好的data中pageTitle的值，如果不想寫(xiě)在state里或者寫(xiě)死，可以傳state中的唯一標(biāo)示，配合后臺(tái)接口，將查詢(xún)的title渲染到頁(yè)面；同樣meta標(biāo)簽如keywords、description可以在此時(shí)一同綁定；

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

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

您可能感興趣的文章: