8

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

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

  1. 依靠元刷新标记将用户重定向到非 JavaScript 版本的网站。将 meta-refresh 标记包装在 noscript 标记中，以便使用 javascript 的人忽略它。
  2. 依靠位于 body 标记内的 iframe 标记来提供非 JavaScript 版本的网站。将 iframe 标记包裹在一个 noscript 标记中，这样它就会被那些使用 javascript 的人忽略。

我也很欣赏正确或不正确的方法的高调示例。

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

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

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

4

7 回答 7

4

您正在谈论优雅降级：设计并制作网站以使用 javascript，然后使网站仍然可以使用 javascript 关闭。最简单的做法是在页面顶部附近的某处包含 html“noscript”标签，它会给出一条消息，指出该站点需要 javascript，否则将无法正常工作。SO 就是一个很好的例子。屏幕顶部的大多数按钮都是通过 javascript 运行的。关闭它，你会得到一个漂亮的红色横幅，并且下拉 js 效果消失了。

我更喜欢渐进式增强开发。让网站在没有 javascript / flash / css3 / 任何东西的情况下完整运行，然后一点一点地增强它（仍然包括 noscript 标签）以改善用户体验。无论您是使用屏幕阅读器或搜索引擎的残疾用户，这都能确保您拥有一个完全正常工作、可读的网站，同时为使用较新浏览器的用户提供良好的用户体验。

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

一个例子是http://www.bbc.co.uk/news/关闭 javascript，你会有一整页的书面内容、图片、链接等。打开 javascript，你会看到滚动的新闻故事、选项卡式的内容、滚动的图片等等。

我会调皮并发布维基百科的链接：

渐进增强

优雅降级

于 2011-03-21T12:51:07.020 回答
1

您还有另一种选择，只需加载相同的页面，但使其适用于 noscript 用户（渐进增强/优雅降级）。

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

$('a.ajax').click(function(){
var anchor = $(this);
$('#content').load(anchor.attr('href') + ' #content');
return false;
});
于 2011-03-21T12:49:52.870 回答
1

我不完全确定渐进增强是否被认为是这些天的最佳实践，但这是我个人喜欢的方法。在这种情况下，您编写服务器端代码，使其像标准 Web 1.0 Web 应用程序（无 JavaScript）一样运行，以提供至少足够的功能让系统在没有 JavaScript 的情况下工作。然后，您开始在此之上分层 JavaScript 功能，以使系统更加用户友好。如果做得好，你最终应该会得到一个至少提供足够功能对非 JavaScript 用户有用的 Web 应用程序。

一个相关的过程称为优雅降级，它以类似的方式工作，但首先假设用户启用了 JavaScript，并为他们不启用的情况构建了解决方法。然而，这有一个缺点，如果你忽略了一些东西，你可能会让非 JavaScript 用户没有后备。

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

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

于 2011-03-21T12:50:22.213 回答
1

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

否则，你应该反过来想。

  1. 在没有 JS 的情况下构建您的网站
  2. 提供出色的用户体验并使其功能齐全
  3. 添加 JS 并使 UX 更加实用。将 JS 分层。

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

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

于 2011-03-21T12:51:33.340 回答
1

一个可能对您有所帮助的快速提示：只需安装 lynx，一个命令行网络浏览器，您就会立即看到 google 和其他 seo 如何看待您的网站（以及盲人）。这非常有用。当然，在命令行窗口中，没有图形并且 javascript 被禁用。

于 2011-03-21T13:16:49.140 回答
1

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

  1. 使用不带 GET/"?" 参数的 Urls（它让您以后的生活更轻松）
  2. 使用http://baseurl.com/#!/path/to/resource进行客户端路由
  3. 在http://baseurl.com/path/to/resource实现您网站的非脚本 HTML 版本的呈现（HTML 快照是 Google 所称的）
  4. 将 HTML 快照的全部内容包装在 noscript-tags 中，并通过 top.location.href 重定向到站点的完整版本
  5. 处理http://baseurl.com/?_escaped_fragment=/path/to/resource - 它应该通过 301-response 重定向到http://baseurl.com/path/to/resource
  6. 仅对 GET 链接使用 a-tags，对 POST/PUT/DELETE 链接使用表单 - 如有必要，请取消它们的样式

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

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

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

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

  1. 对页面的动态部分使用类似 {{#pagelet}}/path/to/partial{{/pagelet}} 的内容 - 例如：{{#pagelet}}/image/{{image_id}}/preview{{/pagelet }}
  2. 在您的客户端渲染中，pagelet 将被实现为动态替换为通过 Ajax 加载的内容（例如： render ）
  3. 在您的服务器端渲染中，pagelet 将直接渲染（毫无疑问，只需卷曲 pagelet 并立即渲染它 - 或者如果您可以异步编写代码，就像您在客户端执行它一样：将一些临时 span 写入一个缓冲区，开始获取所有小页面，在小页面到达时替换临时跨度，并在所有小页面呈现后刷新缓冲区。

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

PS：上述技术的一个优点是页面的 Ajax 和“Web 1.0”呈现都可以从整个 pagelet 的 memcached 缓存中受益。

于 2011-10-24T22:48:25.750 回答
0

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

使用 javascript 重定向

于 2013-12-30T08:14:57.017 回答