欢迎来到上海园丁鸟网络科技有限公司|企业网站建设企业建站企业官网建设企业官网
咨询热线:18017747315当前位置: 首页 > 网站优化百科 >
联系我们
企业网站建设 建站咨询
电话咨询:13524991327
E-mail:1424374510@qq.com
QQ:1424374510

兼顾SEO及AJAX无刷新用户体验的WEB设计与开发

作者/整理:http://www.voez.net/ 来源:http://www.voez.net/ 日期:2019-01-08

在通常情况下使用AJAX,可 能会被搜索引擎忽视,同样使用基 于JavaScript的链接导航也可能带来 同样的后果。搜索引擎是用来索引 内容而非执行应用程序代码。因此, 如果采取错误的方式应用JavaScript, 可能会降低网站搜索引擎的友好性, 相反,当JavaScript被适当地应用时, 网站的友好性将不会受到影响。本 文将探讨使用Asp.net、JavaScript、 JQuery、HTML等当前主流的Web 开发相关技术,实现能够同时兼顾 SEO以及AJAX无刷新用户体验的 网站设计与实现过程,提出搜索引 擎与AJAX并存最大平衡的方法,解 决搜索引擎不支持JavaScript、AJAX 等网页特效的问题。
一、开发背景
在互联网这个海量、杂乱的信 息面前,普通网民获取信息的方式,主要是通过捜索引擎捜索,无论社 交网站取得了怎样的快速增长,捜 索引擎仍然是网民最主要的信息查 找方式。就拿广西电视台官网美丽 天下网为例,在来路分析中,捜索 引擎比例占所有来路总数的90%以 上。这就意味着捜索引擎优化仍然 是网站开发人员必须面临的重要课题。
由于JavaScript的内容不能被 大多数捜索引擎检索,谷歌和百度 捜索引擎官方文档都有提到不建议 网站使用 JavaScript,JavaScript 会 干扰捜索引擎正常抓取网页,所以 做网站的捜索引擎优化时一般强调 导航菜单等重要的代码部分尽量不 使用JavaScript。如果大面积的链接 都使用JavaScript,无疑将大大降低 捜索引擎抓取收录的机会。很多采 用JavaScript技术的网页往往在页 面一开始就堆积大量java代码,以 致meta及关键词迟迟不能出现,被 推至页面底部,对捜索引擎很不友 好。网页中过多的JavaScript代码 无疑是对捜索引擎分析网页内容增 加难度,如果网页中的链接也是有 不少JavaScript组成的话,那么捜 索引擎甚至无法顺着链接去抓取网 页。一方面我们在网页制作中需要 使用JavaScript来制作绚丽的特效, 实现良好的用户体验,而另一方面, JavaScript又会对捜索引擎抓取、分 析造成不好的影响。如何在不影响网 页效果而又对捜索引擎友好的前提 下使用JavaScript,从而不影响SEO 效果呢?如何能够实现两者的最大 平衡?这些是所有网站开发人员长 期以来一个很头疼的问题。接下来 我们将以美丽天下网新闻频道列表 页为例,讨论解决这种冲突的具体 方法和实现过程。
二、SEO概述
SEO是捜索引擎最佳化(Search EngineOptimization),又称为捜索弓 I
擎优化,主要工作是通过了解各类 捜索引擎如何抓取互联网页面、如 何进行索引以及如何确定其对某一 特定关键词的捜索结果排名等技术, 来对网页进行相关的优化,使其提 高捜索引擎排名,从而提高网站访 问量,简单地说,SEO是一种让网 站在百度、谷歌、雅虎等捜索引擎 获得较好的排名,从而赢得更多潜在客户一种的网络营销方式,也是 SEM(捜索弓摩营销)的一种方式。
三、Ajax异步回调的实现
(―)什么是AJAX异步回调
AJAX 即 “Asyn chronous JavaScript and XML” (异步 JavaScript 和XML),AJAX是一种独立于Web 服务器软件的浏览器技术。AJAX的 核心是JS对象XmlHttpRequest。该 对象在Internet Explorer 5中首次引 入,它是一种支持异步请求的技术。 AJAX的特点是:
通过异步模式,实现局部刷 新或无刷新,提升用户体验。
优化了浏览器和服务器之间 的传输,减少不必要的数据往返, 减少带宽占用。
AJAX引擎在客户端运行,承 担了一部分本来由服务器承担的工 作,从而减少了大用户量时造成的 服务器负载。
(二)什么是JQuery
JQuery是一个优秀的JS框架。 它是轻量级的JS库(压缩后只有 21k),它兼容CSS3,还兼容各种浏 览器(IE 6.0+,FF 1.5+,Safan 2.0+, Opera 9.0+ 等)。JQuery 使用户能 更方便地处理HTML Documents、 Events,实现动画效果’并且方便地 为网站提供AJAX交互。
(三)使用AJAX和JQuery
AJAX和JQuery是JS的高级
使用技巧。通过AJAX,JS可使用 XMLHttpRequest对象来直接与服 务器进行通信。通过这个对象,JS 可在不重载页面的情况与Web服 务器交换数据,AJAX在浏览器与 Web服务器之间使用异步数据传输 (HTTP请求),AJAX可以实现动态 不刷新(局部刷新),就是能在不更 新整个页面的前提下维护数据。这 使得Web应用程序更为迅捷地回
<ul id*"pageliat">
<span id* * Page_control_ba r * > </apan>
</ul>
<a href-'** <a href*'#' <a href-'#* <a href-'#* <a href-'#' <a href-'#* <a href-'
<a href«*
<a href-1#* £nbsp;   </span^ </ul>
应用户动作,并避免了在网络上发 送那些没有改变过的信息,使因特 网应用程序更小、更快、更友好。 JQuery能够使用户的HTML页保持 JS代码和HTML内容分离,也就是 说,不用再在HTML里面插入一堆 JS来调用命令了,只需定义id即可。 这就可以有效地防止因为HTML中 过多并且杂乱的JS代码导致捜索引 擎爬虫无法获取准确地获取网页关 键字,从而影响网页在捜索引擎中 的排名的后果。

(四)JS程序代码如下: var Gxtv = jQuery.noConfllct();
Gxtv(document).ready(functlon() { Gxtv("#Page_control_bar1"). html(Gxtv("#Page_control_bar"). html());
Gxtv("#Page_control_bar a"). blnd('cllck', functlon(event) { event.preventDefault(); GetNewsLlst(event.target);}); function GetNewsLlst(target) { Gxtv.post("/GetNewsLlst.aspx", {
 }, functlon(data) {
lf (data != null && data != "") { var dataArray = data.spllt('$'); Gxtv("#llst").css("dlsplay", "none");
Gxtv("#list").html(dataArray[0]);
Gxtv("#list").fadeIn(500);
}})}});
通过以上的JS设置以及方法, 就能起到节省带宽、节省服务器资 源、优化并且降低JS对SEO的影响 等作用。通过异步回调、简单的淡 入等效果,能够进一步提升用户体 验。
四、初始化数据的实现
至此,我们已经实现了异步回 调、JS优化、用户个性体验等效果, 下面将进一步针对SEO进行页面程 序的优化,进一步提高捜索引擎友 好度,增加捜索引擎的收录量。
(一)页面数据必须真实存在
AJAX异步回调的一个严重的缺 点就是网页源代码中的数据不真实, 页面中源代码与用户所见到的效果 并不一致,捜索引擎蜘蛛是一只瞎 子,它爬行抓取网页方式是通过网 页源代码进行抓取的,蜘蛛并不会 看到网页最终显示给网民的视觉效 果,只认识网页中的源代码,如果 网页源代码不真实,会导致捜索引 擎无法获取到网页的真实数据。更 严重时,网页会被捜索引擎判定为 作弊,并给出“恶劣”的评价,这 样会严重影响网站在捜索引擎中的 权重与整体排名,甚至直接删除收 录。所以,我们必须得保证网页所 有重要数据在源代码中真实存在。 要做到数据源代码真实存在,就必 须做到每一个链接涉及到的页面都 初始化数据。
图一和图二、图三给出未初始 化数据的分页代码截图与初始化数 据后的分页代码截图以及直接使用 JS方法调用回调数据代码截图对比。
图一、图三都可以直接使用 AJAX异步回调实现网页淡入淡出等 绚丽的效果,网民看到的最终效果 也是一样的,但是图一的网页源代 码中,容器是空的,容器代码中并 没有任何数据,虽然网民能够看到 最终的效果,捜索引擎却无法获取 到相关数据,从而认为这个页面是 空页面,没有实质内容,甚至会认 为网站是在作弊,认为网站行为恶 劣,导致网站页面的权重被降低或 者导致网站收录直接被捜索引擎删 除等结果。
图三中, 虽然容器不是空的, 但是所有链接都为空(HTML中# 号代表空连接),并不存在真实的链 接地址,而是通过JS的点击事件返 回网站页面的相关链接,同样能够 实现我们想要的视觉效果,捜索引 擎却无法根据链接捜索到下一层级 的页面,这也将影响到网站在捜索 引擎中的收录量和收录结果,无法 起到推广的效果。
图二中的源代码,存在真实的 链接地址,真实的数据是捜索引擎 捜录与评价的依据。但只是有真实 的链接地址并不能达到淡入淡出等 绚丽视觉效果,必须通过结合前面 2.4.1中讲到的方法才能实现。
(二)初始化数据片段代码
通过初始化数据,保证每一个 涉及到的页面都存在真实数据。捜 索引擎沿着网页源代码中的真实链 接访问更多网站中的页面,增加网 站的收录量,并能够提高网站在捜 索引擎中的排名和权重。增加网站 曝光几率,从而进一步增加网站访 问量。初始化数据还有一个优势, 有一些特定的用户,根据自身计算 机的安全考虑,会用安全工具或者 手动禁用浏览器的JS功能,如果页 面中的数据不是真实存在而是通过 JS调用的,用户就无法看到页面上 的数据,并且无法点击导航栏中的 链接。反之,即使用户屏蔽了JS, 页面的大部分重要数据及功能,仍
可以以常规WEB方式表现。
五、使用静态与伪静态技术
(一)静态页
静态网页是实际存在的,无需 经过服务器编译的,直接加载到客 户浏览器上就能显示出来的,这种 网页不包含在服务器端运行的任何 脚本,网页上的每一行代码都是由 网页设计人员预先编写好后,放置 到Web服务器上的,在发送到客户 端的浏览器上后不再发生任何变^化, 因此称其为静态网页。常见的静态 页面有以.html或.htm为扩展名的 Web页面。
静态页面的优缺点与动态页面 的优缺点是相对的。动态页面是一 对多访问,通过一个页面,可以根 据若干参数返回其不同的数据。但 是静态页面只能是一个页面对应一 个内容,也就是多对多的关系。由 于静态页对捜索引擎是非常友好的, 捜索引擎也相对比较乐意收录静态 页面,所以,建议网站的重要信息 页面,最好生成静态页,这有助于 网站的收录,也有助于网民的访问, 提高网站收录量和排名,同时提高 网民体验度。
(二)伪静态
伪静态页是介于静态页与动态 页之间一种折中的方法,伪静态的 本质是动态页,主要优点是能够提 升动态页对捜索引擎的友好度以及 域名地址方便易记。对于一些需要 时时显示更新信息,或者根本无法 创建静态页又需要被捜索引擎收录 的情况,比较常用伪静态的方法。 比如美丽天下网新闻频道列表页的 真实地址是: http://news.gxtv.cn/ NewsList.aspx?C olumn=8&page=1 设 置伪静态后的地址是: http://news. gxtv.cn/NewsList—8—1.html。 第 二
个网址明显比第一个网址简洁易记,并且没有“?”和后面的一堆参数, 更有助于捜索引擎的解析及收录。
设置伪静态的方法有多种,美 丽天下网使用URLRewriter进行伪 静态设置,方法如下:
右键点击要设置的网站,选择 属性—主目录一配置,找到.aspx 扩展名一编辑一复制可执行文件 的路径--关闭。截图如图4。
点击添加按钮,粘贴刚复 制的可执行文件路径,扩展名填写 “.html”,取消“确认文件是否存在” 的勾选状态,点击确定按钮。截图 如图5。

至此,兼顾SEO及AJAX无刷
新用户体验的WEB设计已经完成, 具体效果可参考美丽天下网新闻频道: http://news1.gxtv.cn/。
六、结论
任何独立的技术都有各自的优 缺点,只有通过长期的经验总结与 实践,结合各种技术的优势,才能 开发出令用户满意的效果。美丽天 下网采用ASP.NET (C#)进行开发, 并结合了时下比较流行的JQuery库, 在捜索引擎优化与用户体验上,找 到了一个合理的平衡。美丽天下网 作为广西电视台的官方网站,用户 体验与捜索引擎优化尤为重要。通 过捜索引擎吸引更多用户来到我们 网站,然后通过良好的用户体验留 住用户,达到良好的口碑,一传十, 十传百,最终达到宣传我台形象, 宣传我台节目的良性循环。