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 相关文章推荐
两种简单实现菜单高亮显示的JS类代码
Jun 27 Javascript
基于jquery中children()与find()的区别介绍
Apr 26 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 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
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
JavaScript实现单例模式实例分享
2017/12/22 Javascript
javascript将非数值转换为数值
2018/09/13 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
python插入排序算法的实现代码
2013/11/21 Python
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
Python实现竖排打印传单手机号码易撕条
2015/03/16 Python
复习Python中的字符串知识点
2015/04/14 Python
python 使用get_argument获取url query参数
2017/04/28 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
python中几种自动微分库解析
2019/08/29 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
Python try except else使用详解
2021/01/12 Python
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
高中毕业自我评价
2014/02/08 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python