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监听浏览器的问题
Jun 23 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
js获取页面description的方法
May 21 Javascript
javascript实现五星评分功能
Nov 10 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
VUE2实现事件驱动弹窗示例
Oct 21 Javascript
vue+webpack实现异步组件加载的方法
Feb 03 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
vue.js实现三级菜单效果
Oct 19 Javascript
微信小程序实现多行文字滚动
Nov 18 Javascript
ElementUI实现el-form表单重置功能按钮
Jul 21 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
codeigniter框架The URI you submitted has disallowed characters错误解决方法
2014/05/06 PHP
thinkphp缓存技术详解
2014/12/09 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
JavaScript中具名函数的多种调用方式总结
2014/11/08 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
Angular.js中下拉框实现渲染html的方法
2017/06/18 Javascript
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
vue-cli中vue本地实现跨域调试接口
2019/01/16 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
python数据封装json格式数据
2018/03/04 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
python动态视频下载器的实现方法
2019/09/16 Python
python多线程实现同时执行两个while循环的操作
2020/05/02 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
Banana Republic英国官网:香蕉共和国,GAP集团旗下偏贵族风
2018/04/24 全球购物
美体小铺法国官方网站:The Body Shop法国
2020/06/04 全球购物
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
python 判断文件或文件夹是否存在
2022/03/18 Python