seo如何和ajax和睦相处

在当今电子商务形式下，SEO（搜索引擎优化）为网站之间的竞争提供了可观的前景，而替代传统的Web交互模式的Ajax技术，以无刷新页面的高效率交互方式同样为网站的营运带来了效益，但是SEO与Ajax技术之间不友好性的问题也逐渐浮出水面。本文主要从基于Ajax技术的Web站点对SEO可见度的影响这一问题展开探讨，并且提出了解决此问题的一系列方案。

1 引言
随着互联网的快速发展，各大网站的迅速崛起，SEO（搜索引擎优化）这样一种网络营销方式应运而生。这种方式通过对网站结构、网页文字语言和站点间的互动外交策略等进行合理规划部署来发掘网站的最大潜力而使其在搜索引擎中具有较强的自然排名竞争优势，从而对促进企业在线销售和强化网络品牌起到作用。
与此同时，替代传统的Web交互模式的Ajax技术，同样为网站的营运带来了以无刷新页面的高效率交互方式，但是SEO与Ajax技术之间不友好性的问题也逐渐浮出水面。2006年12月4日在芝加哥搜索引擎战略大会上，各路搜索引擎优化专家针对时下热门的网站Web2.0技术对搜索引擎可见度的影响发表了自己的看法，提出了Ajax是“搜索引擎杀手”这样一种说法。但是，如今随着IT行业的飞速发展，通过改良Ajax代码、部分嵌入、第三方软件的使用等方法，Ajax与SEO已经逐步能够和睦相处。
2 Ajax技术简介
1）传统的WEB开发模式
传统WEB开发模式采用同步交互过程，用户必须等待每个请求，当一个请求完成后才能获得结果，在使用完这些结果后才会发出新的请求。HTTP的设计是传回整个新的画面，所以在浏览器上必须重载整个页面来显示新的页面。完全是一种请求—>刷新—>响应的模型，用户只有等请求完成后才能进行用户**作，**作完成后才能提交下一个请求，考|试/大用户行为和服务器行为是一种同步的关系。
2）AJAX技术及特点

图1 工作流程图

AJAX全称为Asynchronous JavaScript and XML（异步JavaScript和XML），是一种设计交互式网页应用的网页开发技术[1]，它包括： XHTML+CSS（表示信息）、 JavaScript（**作DOM（Document Object Model）进行动态显示及交互）、　 XML和XSLT（进行数据交换及相关**作）、 XMLHttpRequest对象（与Web服务器进行异步通信），使用JavaScript绑定一切。
AJAX技术的核心是XMLHttpRequest[2]，通过HTTP在浏览器和Web服务器之间收发XML或其他数据。XMLHttpRequest 最大的好处在于可以动态地更新网页，它无需重新从服务器读取整个网页，也不需要安装额外的外挂程序。图1是利用AJAX技术的WEB工作流程图[3]。
3 Ajax技术给SEO带来的问题
随着网站的日益增多，SEO（搜索引擎优化）这样一种互联网技术已经在竞争的大环境愈现优势，作为提升Web站点知名度的重任，它与Ajax技术应并驾齐驱。但是任何事物都有其两面性，强强联手难度系数也显而易见。基于Ajax技术的Web站点，对于SEO的不友好性主要就表现在Ajax对于SEO可见度的影响。
1）SEO
SEO（搜索引擎优化）的主要工作是通过了解各类搜索引擎如何抓取互联网页面、如何进行索引以及如何确定其对某一特定关键词的搜索结果排名等技术，来对网页内容进行相关的优化，使其符合用户浏览习惯，在不损害用户体验的情况下提高搜索引擎排名，从而提高网站访问量，最终提升网站的销售能力或宣传能力的技术。
2）Ajax技术给SEO带来的问题
通过上面的阐述，我们了解到SEO的主要功能是抓取页面、关键字以达到网站页面收录的目的，从而提高网站知名度，同时，搜索引擎在抓取页面的时候会屏蔽掉所有javascript代码，而基于Ajax技术的Web站点其中所用到的很重要的一项技术就是javascript代码，那么Ajax载入的内容对于搜索引擎来说也就是是透明的，这样一来，对于百度、google等收录页面是十分不利的。
4 解决方案
纵使问题再多，困难再大，但人类的潜能永远是无穷的， Ajax与SEO再怎么相处的不融洽，也有使其友好和睦的方法。
1）改良Ajax代码方案
先来看下边的例子：
------------- 传统的Ajax方案.htm -------------
<html>
<head>
<script>
function orz6()
{
document.getElementById("orz6.com").innerHTML="大家好，欢迎来到 http://www.orz6.net！(假设文章比较长，此处省略掉2000个字)";
}
</script>
</head>
<a href="#" _fcksavedurl=""#"" onClick="orz6()">繁体字,火星文</a>
<div id="orz6.com">
</html>
代码分析：从上面的代码中，可以看到href的指向是“#”，这样在搜索引擎中是无法抓取到文章的具体内容。

------------- 兼顾搜索引擎的方案.htm -------------
<html>
<head>
<script>
function orz6()
{
document.getElementById("orz6.com").innerHTML="大家好，欢迎来到 http://www.socut.com！(假设文章比较长，此处省略掉2000个字)";
}
</script>
</head>
<a href="http://www.orz6.com/fantizi.aspx" onClick="orz6();return false;">繁体字,火星文</a>
<div id="orz6.com">
</html>
代码分析：经过改良后，href直接指向一个存在的页面，主要来用显示文章的具体内容。当然，这个页面需要专门做出来，主要是为了方便搜索引擎的收录。细心的话，你就会发现onClick事件后面，多了一句 return false ，这样是为了用户在使用AJAX功能时防止页面转换[4]。
使用第二个方案既能完整的发挥Ajax的魅力，也可以完全兼顾到搜索引擎的抓取，尽可能避免访客的流失。
2）Hijax理念
在 Bulletproof Ajax 这本书中，作者提出了一个叫 Hijax 的理念，不是极端的完全采用 Ajax 数据与表现分离的做法，而是稍微对传统页面增强一下，javascript 仅仅作为局部刷新的桥梁，所有逻辑仍然放在服务器上，相对于传统做法，Hijax 将页面进一步划分为分离的模块，对每个模块用相应的处理页面表示，总的页面由各个分离的模块页面include 所组成[5]。
3）嵌入AJAX技术的部分内容
在页面代码的设计过程中，可以在HTML网页中嵌入需要使用AJAX技术的部分内容[5]，不必要刷新的信息采用HTML静态形式。例如股价查询的页面，只对股价变化部分采用AJAX更新，股价本身不被搜索引擎索引，但页面的其它内容全部为静态化文字信息，不影响搜索引擎索引。
4）第三方软件
有一种交互式的Orca论坛软件和即将研发出来的产品——Directory、Wiki、Blog中，都将广泛的使用AJAX技术，并解决上述问题[6]。
Orca百分之百使用AJAX技术，是一个论坛软件，它已经有一个可**作后退按钮，永久连接，友好的搜索引擎结构和标签页面。
5 结论
尽早关注AJAX技术的搜索引擎优化问题是必要的，尽可能避免曾经发生的、大量网站盲目采用Ajax技术而影响网站搜索引擎优化的历史重演，同时不断地深入挖掘它们之间的联系，这样相信为技术创新也能带来很高的效益，因为随着Gmail、Google-maps的应用和各种浏览器的支持，AJAX正逐渐吸引全世界的眼球，再加之SEO的支持，强强联合必定能使网站在电子商务全球化的今天大放异彩

转自：http://zy116494718.iteye.com/blog/1685776

seo如何和ajax和睦相处相关推荐

ajax对于seo的影响
在当今电子商务形式下,SEO(搜索引擎优化)为网站之间的竞争提供了可观的前景,而替代传统的Web交互模式的Ajax技术,以无刷新页面的高效率交互方式同样为网站的营运带来了效益,但是SEO与Ajax技 ...
AJAX技术对于SEO的影响
李斌高春燕 (陕西青年职业学院计算机科学系,陕西西安 710068) 摘要在当今电子商务形式下,SEO(搜索引擎优化)为网站之间的竞争提供了可观的前景,而替代传统的Web交互模式的 ...
h5新增 history的应用
(1)history api 的基本介绍: history.back():上一条 history.forward():下一条 history.go():相对于当前页面的前进或后退新增加的api: h ...
WordPress 高颜值自适应黑/白模式Puock主题
简介: 支持白天与暗黑模式全局无shua新加载支持博客与CMS布局内置WP优化策略一键全站变灰网页压缩成一行后台防恶意登录内置出色的SEO功能评论Ajax加载文章点 ...
js 所有的网络请求方式
文章目录 HTTP 请求报文响应报文常见的状态码 readyState 属性原生AJAX AJAX 简介 XML 简介 AJAX 的特点 AJAX 的使用解决 IE 缓存问题 ajax返回的状 ...
Vue SSR技术方案落地实现—构建同构应用
Vue SSR技术方案落地实现-构建同构应用一.基本知识扫盲 1.何为服务器端渲染? 1).服务器端渲染:这种技术方案在前端领域处于蛮荒时代就已出现,当时的解决方案主要是后台开发通过模板引擎来设计( ...
WordPress自适应白天暗夜高颜值无刷新加载首页支持三种布局 v2.4
一款基于WordPress开发的高颜值的自适应主题,支持白天与黑夜模式.首页支持三种布局:博客风格,cms风格,企业风格主题特性支持白天与暗黑模式全局无刷新加载支持博客与CMS布局内置WP优 ...
WordPress自适应白天暗夜无刷新加载三种布局模板源码
一款基于Wordpress开发的高颜值的自适应主题,支持白天与黑夜模式.首页支持三种布局:博客风格,cms风格,企业风格主题特性: 支持白天与暗黑模式全局无刷新加载支持博客与CMS布局内置WP ...
三款实用且颜值高的国内wordpress主题，免费下载
wp插件一:WordPress简约博客主题Qzdy 当前主题已更新至4.8版本介绍 WordPress简约博客主题Qzdy wordpress主题演示 https://aj0.cn/ 主题预览图 ...

seo如何和ajax和睦相处

seo如何和ajax和睦相处相关推荐

最新文章

热门文章