Angular设置title信息解决SEO方面存在问题


Posted in Javascript onAugust 19, 2016

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时就会发现:

Angular设置title信息解决SEO方面存在问题

这里是获取的已经设置好的data中pageTitle的值,如果不想写在state里或者写死,可以传state中的唯一标示,配合后台接口,将查询的title渲染到页面;同样meta标签如keywords、description可以在此时一同绑定;

上面说到javascript框架在seo方面存在短板,应对ng的这个问题市面上也有很多方案,比如prerender,seo.js等,思想都是在页面加入表示,让爬虫在页面渲染好后才去扒数据,同时服务器上要配置些服务,服务将检测是否有对应这个URL的快照或者缓存的页面,如果存在就发给爬虫,如 果不存在,则生成快照,然后发送正确的页面给爬虫;处理起来还是要费些功夫的,所以也可以采用ng+常规的开发模式,一些重要的页面不要用这种页面渲染seo的方式,或者建立专门的seo信息页;所以在这方面感觉用ng框架做app(ionic)还是很合适的;

以上所述是小编给大家介绍的Angular设置title信息解决SEO方面存在问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
jQuery timers计时器简单应用说明
Oct 28 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
Angular中$compile源码分析
Jan 28 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
js给table赋值的实例代码
Oct 13 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
Dec 04 Javascript
JS继承实现方法及优缺点详解
Sep 02 Javascript
angular异步验证器防抖实例详解
Mar 31 Javascript
js仿腾讯QQ的web登陆界面
Aug 19 #Javascript
基于WebUploader的文件上传js插件
Aug 19 #Javascript
JS获取checkbox的个数简单实例
Aug 19 #Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 #Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 #Javascript
浅谈js中test()函数在正则中的使用
Aug 19 #Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 #Javascript
You might like
PHP has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
优化PHP代码技巧的小结
2013/06/02 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
JavaScript中的其他对象
2008/01/16 Javascript
理解Javascript_10_对象模型
2010/10/16 Javascript
自写的一个jQuery圆角插件
2010/10/26 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
2018/08/07 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
Python简单定义与使用二叉树示例
2018/05/11 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
简单了解python变量的作用域
2019/07/30 Python
tensorflow 查看梯度方式
2020/02/04 Python
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
.NET概念性的面试题
2012/02/29 面试题
研发工程师的岗位职责
2013/11/18 职场文书
建筑总经理岗位职责
2014/02/02 职场文书
2014年学前班工作总结
2014/12/08 职场文书
公司表扬信格式
2015/05/04 职场文书
深入理解 Golang 的字符串
2022/05/04 Golang
Nginx跨域问题解析与解决
2022/08/05 Servers