AngularJS怎么做SEO

AngularJS怎么做SEO,第1张

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时就会发现: 这里是获取的已经设置好的data中pageTitle的值,如果不想写在state里或者写死,可以传state中的唯一标示,配合后台接口,将查询的title渲染到页面;同样meta标签如keywords、description可以在此时一同绑定; 上面说到javascript框架在seo方面存在短板,应对ng的这个问题市面上也有很多方案,比如prerender,seo.js等,思想都是在页面加入表示,让爬虫在页面渲染好后才去扒数据,同时服务器上要配置些服务,服务将检测是否有对应这个URL的快照或者缓存的页面,如果存在就发给爬虫,如 果不存在,则生成快照,然后发送正确的页面给爬虫;处理起来还是要费些功夫的,所以也可以采用ng+常规的开发模式,一些重要的页面不要用这种页面渲染seo的方式,或者建立专门的seo信息页;所以在这方面感觉用ng框架做app(ionic)还是很合适的; 以上所述是小编给大家介绍的Angular设置title信息解决SEO方面存在问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

Ionic是一个前端的框架,帮助开发者使用HTML5, CSS3和JavaScript做出原生应用。ionic的理念类前端开发的BootStrap,目标是封装HTML5移动跨平台开发的最佳实践,就像Twitter Bootstrap在前端开发中做的一样。Ionic框架目前发展很迅速,我们从2014年3月开始使用,当时是1.0.0beta2,现在已经更新到1.0.0beta10,大概每2个星期会出一个beta版本,并且都包含实质性更新。Ionic框架很先进,js部分是基于AngularJS框架,大量使用了Css3,css生成基于Sass,构建工具基于最新的gulp,版本升级基于bower,原生层无缝封装了cordova。

使用Ionic框架,可以有效利用AngularJs的特性,极大的提供HTML5应用开发效率,质量,模块化程度。根据我们的经验,使用ionic开发,比使用基于jquery的移动框架,同样功能代码量会减少50%,开发速度提高一倍以上;与原生开发相比,不考虑原生应用开发不能跨平台的因素,同样是在iOS上开发,使用ionic要比使用oc开发快一倍以上。用户体验方面,在iOS和高端Android设备(1500元以上的手机,平板)上,与原生应用差别不大,一般用户无法分辨出是HTML5的。目前来看,市场竞争激烈的App,暂时还不适合用HTML5开发,即使HTML5完全能实现业务需求,例如去哪儿,携程这种竞争性的App。但在企业应用领域,使用ionic有明显优势,我们已经用ionic框架上线了iPad和android

Pad企业应用。

ionic官网为开发者提供了多个开发模板,如默认的Tab模板(页面基于类微信的Tab组织,使用了ionTab指令),Sidemenu模板等

第一步,创建静态页面tabs.html,默认是HTML5模板,如下图所示

第二步,引入ionic相关的CSS文件和JS文件,如下图所示:

第三步,在body插入div和a标签元素,并设置样式,如下图所示:

第四步,预览该静态页面,这时会看到四个Tabs标签,如下图所示:

第五步,再次设置Tabs样式,使每个Tabs样式不一样,如下图所示:

第六步,下面插入AngularJS相关的指令,ng-app、ng-controlle指令,如下图所示:


欢迎分享,转载请注明来源:夏雨云

原文地址:https://www.xiayuyun.com/zonghe/676251.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-07-28
下一篇2023-07-28

发表评论

登录后才能评论

评论列表(0条)

    保存