构建 HTML 文档以实现 SEO 和可访问性的最佳方法是什么？

Question

构建包含导航的 html 的推荐方法是什么，以便它仍然可以进行 SEO 和访问。

例如，结构应该更像文档的结构：

1. 跳到内容（链接，被 CSS 隐藏）
2. 导航
3. 内容
4. 其他内容（右侧窗格等）

或者：

1. 跳到导航（链接，被 CSS 隐藏）
2. 内容
3. 导航
4. 其他内容（右侧窗格等）

显然 CSS 用于控制布局，但机器人和屏幕阅读器会忽略 CSS。

Answer 1

之前有客户要求我将导航移到内容后面，但我认为这对他们没有多大帮助。我通常遵循您上面提到的第一个结构。

一些随机提示：

• 保持您的标记标准符合、有效且简单。
• 不要堆砌关键字或任何东西。
• 像对待应有的那样对待标题。确保只有 1 个 h1 标签。在整个页面上谨慎使用标题（谷歌 - 在 PDF 下载中）。
• 在锚点上使用标题属性，在图像上使用 alt 属性（但前提是图像需要某些用户的等效文本）。
• 使用 rel="nofollow" 将 PR 汁引导至您真正希望他们访问的页面。
• 保持每个页面的内容唯一。
• 使用 Google 网站管理员工具以及 MSN 和 Yahoo! 的同等工具。
• 构建、提交和维护 sitemap.xml 文件。

Answer 2

任何没有将其内容存储在 Flash 或类似内容中的页面都可以进行 SEO。网络爬虫倾向于剥离所有内容并将页面作为文本流读取。有些人会关注您的关键字、它们在正文中的使用、H1 和 H2 标签、页面标题甚至域名，但我认为它们不会受到页面结构顺序的影响。

Answer 3

作为屏幕阅读器用户，我并不关心导航位于页面上的位置。最有帮助的是按标题列出内容，例如这个问题位于 h2 级别，答案从下一个 h2 级别开始。屏幕阅读器提供了允许您按标题跳过的键，因此我发现标题导航比找到跳过导航链接并按 Enter 键更快。

Answer 4

尽可能减少内容以外的其他内容。

导航非常短，添加完整导航页面的链接/或/通过 AJAX 加载它。

没有“其他内容”。如果您在页面上放置任何内容，它们必须是相关的。此外，应按关系对它们进行排序。

Answer 5

通常认为“最好”的做法是让您的内容尽可能靠近页面顶部。所以从技术上讲，你的第二个例子是最好的。不过，跳到内容链接对于屏幕阅读器来说是一种很好的体验，而且 CSS 布局的状态就是这样，没有人会嫉妒您在文档顶部放置一些简单的导航。我当然不认为这会损害您的 Google PageRank。

Answer 6

您能做的最好的事情就是将内容尽可能移至靠近页面顶部的位置。我建议这样的结构：

1. 跳过链接
2. 内容
3. 其他内容（右侧窗格等）
4. 导航