Question

当用户未启用JavaScript时，最好的做法是什么？向这类用户提供内容的最佳方式是什么？保持网站可供搜索引擎阅读的最佳方法是什么？

我可以想到两种方法来实现这一点，但不知道什么是更好的（或者如果第三种选择更好）：

依靠元刷新标记将用户重定向到非javascript版本的网站。将元刷新标记包装在noscript标记中，以便那些使用javascript的人忽略它。
依靠位于body标记内的iframe标记来提供非javascript版本的网站。将iframe标记包装在一个noscript标记中，以便那些使用javascript的人忽略它。

我也很欣赏有关正确或错误方法的高调例子。

---------问题的补充-----------

以下是我过去为解决此问题所做的一个示例：http://photocontest.highpoint.edu/

我想确保没有更好的方法来做到这一点。

Answer 1

您正在谈论优雅降级：设计并使网站使用javascript，然后使网站仍然可以使用javascript关闭。最简单的方法是在页面顶部附近的某处包含html“noscript”标记，该标记会显示网站需要javascript或其他内容无法正常工作。 SO就是一个很好的例子。屏幕顶部的大多数按钮都是通过javascript运行的。把它关掉，你得到一个漂亮的红色横幅，下拉的js效果消失了。

我更喜欢渐进式增强开发。无需javascript / flash / css3 /无论如何让网站全部工作，然后一点一点地增强它（仍包括noscript标签）以改善用户体验。这确保您拥有一个完全可以工作，可读的网站，无论您是否是使用屏幕阅读器或搜索引擎的残障用户，同时为使用较新浏览器的用户提供良好的用户体验。

底线：对于任何动态生成的内容（例如通过AJAX生成的页面元素），必须有一个静态页面替代方案，其中必须通过标准链接提供此内容。如果您使用javascript作为标签内容，则以与网页其余部分一致的方式显示所有内容。

一个例子是http://www.bbc.co.uk/news/关闭javascript，你有一整页的书面内容，图片，链接等。打开javascript，你可以滚动新闻报道，标签内容，滚动图片等等。

我会变得顽皮并发布维基百科的链接：

Progressive Enhancement

Graceful Degredation

Answer 2

你有另一种选择，只需加载同一页面，但让它适用于noscript用户（渐进增强/优雅降级）。

一个简单的例子：您希望使用ajax将内容加载到div中，使用新内容（noscript行为）将<a>标记链接到整个页面，并使用jQuery绑定<a>标记以拦截点击并使用ajax加载（脚本行为）。

$('a.ajax').click(function(){
var anchor = $(this);
$('#content').load(anchor.attr('href') + ' #content');
return false;
});

Answer 3

我不完全确定渐进增强是否被认为是最佳实践，但这是我个人青睐的方法。在这种情况下，您编写服务器端代码，使其功能类似于标准Web 1.0 Web应用程序（无JavaScript），以提供至少足够的功能，使系统无需JavaScript即可运行。然后，您可以在此基础上开始分层JavaScript功能，以使系统更加用户友好。如果操作正确，您应该最终得到一个Web应用程序，该应用程序至少提供足够的功能以对非JavaScript用户有用。

一个相关的过程被称为Graceful Degradation，它以类似的方式工作，但首先假设用户启用了JavaScript，并为他们不做的情况建立了变通方法。但是，这有一个缺点，如果你忽略了某些东西，你可以留下非JavaScript用户而不会有后退。

搜索页面的渐进增强示例：构建搜索页面，使其通常只返回搜索结果的HTML页面，还添加一个可以通过GET设置的标志，在设置时，它会返回XML或JSON。在搜索页面上，包含一个脚本，该脚本对搜索页面执行AJAX请求，并在查询字符串后附加标志，然后使用AJAX调用的结果替换页面的主要内容。 JavaScript用户可以获得AJAX的好处，但没有JavaScript的用户仍然可以获得可用的搜索页面。

http://en.wikipedia.org/wiki/Progressive_enhancement

Answer 4

如果您的应用程序必须让javascript运行，那么除了在noscript标记中显示礼貌消息之外，您无能为力。

否则，你应该反思。

在没有JS的情况下构建您的网站
提供出色的用户体验并使其完整功能
添加JS并使UX更加实用。将JS层叠在最顶层。

因此，如果用户没有JS，您的网站仍会恢复到您网站状态的第二步。

至于爬行。如果您的网站依赖于AJAX和许多JS工作，您可以让gogole意识到它：http://code.google.com/web/ajaxcrawling/docs/getting-started.html

Answer 5

一个可以帮助您的快速提示：只需安装lynx，一个命令行Web浏览器，您就会立即看到谷歌和其他搜索引擎优化的网站（以及盲人）。这非常有用。当然，在命令行窗口中，没有图形，javascript被禁用。

Answer 6

如果您正在进行“严肃”的Ajax（例如客户端路由），以下技术可能会有用：

使用不带GET /“？”的网址 - 参数（以后让您的生活更轻松）
使用http://baseurl.com/#!/path/to/resource进行客户端路由
在http://baseurl.com/path/to/resource
将HTML快照的全部内容整合到noscript-tags中，并通过top.location.href重定向到网站的完整版本
处理http://baseurl.com/?_escaped_fragment=/path/to/resource - 它应该通过301响应重定向到http://baseurl.com/path/to/resource
仅对GET链接使用a-tags，使用POST / PUT / DELETE-links表单 - 如果有必要，可以解决它们的问题

我在研究“如何编写正确的Ajax代码”时找到的链接的一个很好的示例代码：

<a href="/path/to/resource" onclick="Routing.navigate(&quot;/path/to/resource&quot;); return false;">Resource</a>

这当然是一个非常复杂的解决方案，但它应该启用SEO（包括非搜索引擎爬虫）和可访问性。问题是您必须能够呈现页面服务器 - 和客户端。

一种解决方案可能是使用像胡子这样的模板框架，其中存在不同平台的实现。

对页面的动态部分使用{{#pagelet}} / path / to / partial {{/ pagelet}}之类的内容 - 例如：{{#pagelet}} / image / {{image_id}} / preview { {/小网页}}
在客户端呈现中，将实现pagelet以通过Ajax加载的内容动态替换（例如：render）
在你的服务器端渲染中，pagelet只是直接呈现（有疑问只是卷曲小页面并立即渲染它 - 或者如果你可以异步编写代码就像你在客户端那样做：写一些临时扩展到缓冲区，开始获取所有pagelet，在pagelet到达时替换临时spans，并在渲染完所有pagelet后刷新缓冲区。

这是我迄今为止发现的最佳通用设计。您可以深入链接到您的应用程序，它的搜索引擎友好，它应该强制您构建一个优雅降级的页面。

P.S。：上述技术的一个优点是，Ajax和“Web 1.0” - 页面的渲染都可以从整个pagelet的memcached缓存中获益。

Answer 7

我更喜欢在没有javascript的情况下对页面进行编码，然后如果启用了javascript，我们会将用户重定向到使用javascript的类似页面。（与渐进增强相同的概念）

redirecting with javascript

Web开发最佳实践 - 如何支持Javascript禁用

7 个答案: