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 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
Aug 14 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 Javascript
基于JavaScript实现猜数字游戏代码实例
Jul 30 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
Jan 29 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实现分页的一个示例
2006/10/09 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
jQuery select表单提交省市区城市三级联动核心代码
2014/06/09 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
详解vue中axios的封装
2018/07/18 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
[58:58]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第二场
2018/04/05 DOTA
Python函数式编程指南(四):生成器详解
2015/06/24 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
详解python中的异常和文件读写
2021/01/03 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
如何提高MySql的安全性
2014/06/19 面试题
求职信内容考虑哪几点
2013/10/05 职场文书
外贸实习生自荐信范文
2013/11/24 职场文书
致跳高运动员广播稿
2014/01/13 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
校运会宣传稿大全
2015/07/23 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python