设计采用 AJAX 技术的网站时考虑到可访问性

许多网站所有者发现使用 AJAX 可以创建动态网页作为功能强大的 Web 应用,从而改善其网站上的用户体验。但是就像 Flash 一样,如果没有谨慎实施 AJAX 技术,就会让搜索引擎难以将网站编入索引。与 AJAX 有关的搜索引擎问题主要有两个:确保搜索引擎漫游器能够看到您的内容,以及确保它们可以看到并跟踪您的导航。

尽管 Googlebot 擅长理解 HTML 链接的结构,但是它在使用 JavaScript 进行导航的网站中还是会遇到寻找路径方面的问题。我们正在努力使其更好地理解 JavaScript,但是要创建 Google 和其他搜索引擎可抓取的网站,最好还是提供指向内容的 HTML 链接。

以可访问性为设计宗旨

我们鼓励网站所有者针对用户(而不仅仅针对搜索引擎)创建网页。您在设计 AJAX 网站时要考虑用户的需求,包括那些使用不支持 JavaScript 功能的浏览器的用户(例如使用屏幕阅读器或移动设备的用户)。测试网站可访问性的其中一种最简单的方法是:在停用 JavaScript 后通过浏览器预览网站,或在纯文本浏览器(例如 Lynx)中查看网站。以纯文本形式查看网站还可帮助您找出 Googlebot 难以看到的其他内容,例如图片或 Flash 中嵌入的文字

避免使用 iframe 或分别指向其内容的链接

通过 iframe 显示的内容可能不会被编入索引,也可能不会在 Google 的搜索结果中显示。因此,我们建议您避免使用 iframe 显示内容。如果您的网站中使用了 iframe,请务必额外提供指向 iframe 所显示内容的文本类链接,以便 Googlebot 能够抓取这些内容并将其编入索引。

以渐进增强的方式进行开发

如果您是从头开始,那么仅使用 HTML 构建网站结构和导航是一个不错的方法。然后,在网站的网页、链接和内容就绪后,您可以使用 AJAX 对外观和界面进行修饰。Googlebot 可以很轻松地查看 HTML,而使用现代浏览器的用户也可以享受 AJAX 带来的视觉享受。

当然,您的有些链接很可能需要 JavaScript,以实现 AJAX 功能。Web 开发者 Jeremy Keith 将此技术叫做 Hijax,它是帮助 AJAX 和静态链接共存的一种方法。

创建一定格式的链接,以便它们既能提供静态链接又能调用 JavaScript 功能。通过这种方法,您的JavaScrip用户可以使用AJAX功能,而您的非JavaScrip用户可以忽略此脚本并点击此链接。例如:

<a href="ajax.htm?foo=32" onClick="navigate('ajax.html#foo=32');
 return false">foo 32</a>

请注意,静态链接网址含有参数 (?foo=32),而不是 AJAX 代码所使用的片段 (#foo=32)。这一点非常重要,因为搜索引擎能理解网址参数,但经常会忽略片段。由于您现在提供的是静态链接,因此用户和搜索引擎可以链接到想要分享或参考的准确内容。

尽管我们在不断改进我们的抓取功能,但使用 HTML 链接仍不失为一个很好的方法,它可以帮助我们(以及其他搜索引擎、移动设备和用户)更好地理解您网站的结构。

遵循指南

除了上面提到的技巧之外,我们还建议您查看我们的网站站长指南,详细了解如何让网站便于 Google 和用户访问。该指南还指出了一些需要避免的做法,例如欺骗性的 JavaScript 重定向。要遵从的通用原则是:尽管您可以根据用户的条件为用户提供不同体验,但是内容应该相同。例如,设想我们为王燕的仓鼠商店创建了网页。网页顶部是“王燕的仓鼠商店”标题,下面是由AJAX技术驱动的最新仓鼠到货消息的幻灯演示。在同一网页上停用 JavaScript 后,不应该会显示让用户感到奇怪的其他文本:

王燕的仓鼠商店 - 仓鼠、最好的仓鼠、低价仓鼠、免费仓鼠、宠物、商店、仓鼠商店、会跳舞的仓鼠、啮齿动物、苍鼠、沧鼠、最好的仓鼠资源、宠物玩具、舞蹈课、可爱、仓鼠的小把戏、宠物食品、仓鼠习性、仓鼠旅馆、仓鼠生日礼物创意,以及更多!

较好的实现方法是:无论是否启用 JavaScript,都应该显示相同的文字内容;最佳方案是:为非 JavaScript 用户提供 HTML 版本的幻灯片。详细了解隐藏文字