《seo网站排名优化工具》angular seo 如何发布

  • A+
所属分类:seo优化
摘要

?公司使用angularJs(以下都是指ng1)框架做了互联网应用angularseo如何发布,之前没接触过seo,突然一天运营那边传来任务:要给网站做搜索引擎优化,需要研发支持。搜了下发现单页面应用做seo比较费劲,国内相关实践资料分享出来的也比较少,略懵,前后

?

公司使用angularJs(以下都是指ng1)框架做了互联网应用angular seo 如何发布,之前没接触过seo,突然一天运营那边传来任务:要给网站做搜索引擎优化,需要研发支持。搜了下发现单页面应用做seo比较费劲,国内相关实践资料分享出来的也比较少,略懵,前后花了一番功夫总算完成了。在这里记录下来,做一个总结,也希望能够帮助在做类似工作的朋友少走一点弯路。还是建议需要seo的网站技术选型尽量不要使用angularreact一类的单页面框架。如果你和我一样网站做完了发现需要seo,那么往下看吧。如果各位已有更优的方案欢迎拍砖交流。

做seo必须了解爬虫工作的基本原理。搜索引擎能够搜到一个网页是因为对其做了索引,估计可以这样而在这之前需要爬虫抓取到网站页面存储为一个快照,快照的内容即页面的静态内容。一般来说,右键查看网页源代码看到的内容即爬虫所能抓取到的内容。爬虫拿到一个url后抓取其页面信息,查找页面中的a标签,拿到下一个url跳转地址,继续下一个页面抓取。seo的工作目的是增加搜索引擎对网站的索引量以及提升网页排名,传统的seo工作例如站内tdk的优化、网站url优化、外链增加都是为了达到这些目的。做到这些有一个共同的前提,就是网页内容能够被搜索引擎抓取到,而单页面应用seo的困难就卡在这里。

可能这种方式也可以angular实现单页面的方案是利用了路由机制配合模板引擎。通过自定义模板,一个应用只有一个主页面,通过路由切换不同的状态angular seo 如何发布,嵌套对应的模板引擎。而模板中的动态数据,都是通过ajax请求从后端拿到的。这从路由跳转到渲染出完整页面的过程│,除了主页面基本的静态数据,其他的全靠js来完成。

那样说也对可抓取方案放到下面,先说说url优化。用过angularjs的都知道,ng的url是靠#来标识一个状态。含#类似符号的url对于seo是非常不友好的,而且据同事反应(本人没有验证),搜索引擎在访问url的时候并不会带着#后的内容去访问。总之angular seo 如何发布,url优化是单页面应用seo绕不开的一个工作,而我们的目的,是把url优化成如同www.xxx.com/111/222/999目录结构的url,它是爬虫最喜欢的形态。

简单来说,去除#只需要在路由中配置$locationProvider.html5Mode(true)开启html5模式,url会自动去除#以及.html后缀达到最优。但这时存在问题:f5刷新会404找不到页面,原因是f5会把url提交到后端获取资源,而html5模式优化后的url在后端并不存在这样一个资源,直接访问这个链接会连主页面都找不到,自然就会404。以上链接给出的方案是nodejs后端的方案,我们的方案是用springMVC后端,一般而论不过原理都是类似的:后端不认识这个链接,我们就把这个错误的连接重定向到原本带#的连接╪,对于后端来说就是一个正常的访问,而url中的#在浏览器端会再次被html5模式给去除。

重定向的工作可以放在后端springMVC的过滤器中解决,也可以在容器中解决。我们的框架是后端用nginx做负载均衡,我将重定向放在nginx.conf中,对每个路由状态的url都做了对应的原始url重定向,问题解决。无论如何刷新、访问,页面都是简单舒适的目录结构url。

url优化之后,继续往下看。说白了我们要做的就是单页面应用的可抓取方案,即:如何让搜索引擎能够获取到完整内容的页面信息。我调研了现有的一些解决方案,思路都是类似的。搜索引擎不执行js,我们改变不了,那么我们只有像照顾婴儿一样,?一般而言自己将js执行,拿到模板以及动态数据渲染出一个完全静态的页面,交给爬虫。我调研过git上的两个方案Ⅷ,做一个分享,如果大家有更好的方案也欢迎分享。

ltfiltergt
ltfilter-namegtSEOFilterlt/filter-namegt
ltdisplay-namegtSEOFilterlt/display-namegt
ltdescriptiongtAngularSEOFilterlt/descriptiongt
ltfilter-classgtnet.angularseo.SEOFilterlt/filter-classgt
lt\\phantomjs2.0\\bin\\phantomjs.exelt/param-valuegt
lt/init-paramgt
lt--Filteralreadyembedgoogle,bing,baiduUserAgentkeywords,
Ifyouwanttosupportmore,addthemandsplitwith|
--gt
ltinit-paramgt
ltparam-namegtrobotUserAgentslt/param-namegt
ltparam-valuegtYodaoBot|Zealbotlt/param-valuegt
lt/init-paramgt
lt--Thepathtosavethestaticversionpages--gt
ltinit-paramgt
ltparam-namegtcachePathlt/param-namegt
ltparam-valuegtc:\\cachelt/param-valuegt
lt/init-paramgt
lt--Thedefaultpageencodingofthissite--gt
ltinit-paramgt
ltparam-namegtencodinglt/param-namegt
ltparam-valuegtUTF-8lt/param-valuegt
lt/init-paramgt
lt/filtergt
ltfilter-mappinggt
ltfilter-namegtSEOFilterlt/filter-namegt
lturl-patterngt/*lt/url-patterngt
lt/filter-mappinggt

ltdivstyle="display:none"gt
///后台生成的专门为了SEO需要的代码
//在后台可以通过判断请求的agent参数,判断是否是搜索引擎爬虫,差不多会比较好如果不是,不需要生成这段隐藏的代码。
lt/divgt

ltdivng-app="XXApp"ng-controller="XXController"gt
//前台业务的代码
lt/divgt官网地址:

ltfiltergt
ltfilter-namegtSEOFilterlt/filter-namegt
ltdisplay-namegtSEOFilterlt/display-namegt
ltdescriptiongtAngularSEOFilterlt/descriptiongt
ltfilter-classgtnet.angularseo.SEOFilterlt/filter-classgt
lt\\phantomjs2.0\\bin\\phantomjs.exelt/param-valuegt
lt/init-paramgt
lt--Filteralreadyembedgoogle,bing,baiduUserAgentkeywords,
Ifyouwanttosupportmore,addthemandsplitwith|
--gt
ltinit-paramgt
ltparam-namegtrobotUserAgentslt/param-namegt
ltparam-valuegtYodaoBot|Zealbotlt/param-valuegt
lt/init-paramgt
lt--Thepathtosavethestaticversionpages--gt
ltinit-paramgt
ltparam-namegtcachePathlt/param-namegt
ltparam-valuegtc:\\cachelt/param-valuegt
lt/init-paramgt
lt--Thedefaultpageencodingofthissite--gt
ltinit-paramgt
ltparam-namegtencodinglt/param-namegt
ltparam-valuegtUTF-8lt/param-valuegt
lt/init-paramgt
lt/filtergt
ltfilter-mappinggt
ltfilter-namegtSEOFilterlt/filter-namegt
lturl-patterngt/*lt/url-patterngt
lt/filter-mappinggt

?以上就是关于《angular seo 如何发布》的详细讲解,本文由轩辕SEO培训收集于网络不代表本站观点,如果您还想了解seo详细内容以及项目合作,请直接联系轩辕qq或微信。

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: