html5：分段元素中的标题 - 文档大纲和 SEO 影响

Question

html5 规范说：

分段内容元素或分段根元素的大纲由一个或多个可能嵌套的部分的列表组成。一个section是一个容器，对应于原始DOM树中的一些节点。每个部分可以有一个与其关联的标题，并且可以包含任意数量的进一步嵌套的部分。大纲算法还将 DOM 树中的每个节点与特定部分和可能的标题相关联。

同样的推理似乎也适用于 html5 文档大纲算法。

我一直在使用 HTML5 大纲 (h5o) [link] 工具检查我网站的大纲，但是我很难获得一个清晰的大纲，并且不会被无用的标题所负担过重，因为

或

等元素将出现在你的大纲但除非您给他们明确的 h1-h6 标题，否则将以“无标题”的形式进行操作。

坦率地说，这对于导航或页脚之类的东西来说似乎有点过分了。

一种解决方案是用 div 替换这些元素，但这似乎违背了使用 html5 的全部目的。

另一种方法是为所有分段元素设置标题，然后使用CSS 隐藏其中一些标题（同样，基本上是

和

，以及一些

元素。这是一个示例：

<nav id="content-nav">
    <h2 class="hidden">Post navigation</h2>
    <ul>
        <li class="alignleft"><?php next_post_link('&#8592; <strong>Next Post</strong><br />%link') ?></li>
        <li class="alignright"><?php previous_post_link('<strong>Previous Post</strong> &#8594;<br />%link') ?></li>
    </ul>
</nav>

这会生成一个显示效果很好的网站，但我在其网站管理员工具帮助项目中看到的问题是 Google 排名。 ://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=66353" rel="noreferrer">链接]关于“隐藏文本和链接”，Google 明确指出 那：

隐藏内容中的文本或链接可能会导致您的网站被视为不可信，因为它向搜索引擎提供的信息与向访问者提供的信息不同。文本（例如过多的关键字）可以通过多种方式隐藏，包括：[...]使用 CSS 隐藏文本...

有些人可能会觉得 Google 是否喜欢他们使用隐藏文本这一事实并不重要，但我的大多数访问者都来了来自谷歌搜索，我不想因为选择使用此设置而受到惩罚。

任何人都可以提供有关该主题的建议吗？

Answer 1

我在网站上尝试过的另一种方法是为所有分区元素设置标题，然后使用 CSS 隐藏某些主题的标题（同样，基本上是

和

，以及一些

元素。

这正是我要做的，实际上还没有构建一个 HTML5 网站，但是有趣的是我不久前研究过这个

“标题”或部分标题 。 ，非常适合创建结构或文档大纲（如大纲中所示），它们对于辅助技术用户也非常有用，他们基本上可以通过“选项卡”浏览标题来找到网站的路径，而无需进行操作。 “聆听”所有内容并尝试找出您可能将搜索框放在哪里，

这就是为什么我认为标题/标题应该在那里，即使它们是隐藏的。视觉用户视图（并填充SE；））

并非所有CSS隐藏方法都是相同的

，所以我知道我们不能注销SE，所以您选择隐藏标题的方式很重要，因为您希望它们可用AT（辅助技术）用户.. display: none; 不可靠（某些屏幕阅读器不读取它们），您也无法“tab”找到它们 - 可见性:hidden; 不会删除空格，你仍然无法“tab”找到

那么哪种隐藏方法呢？

.. 恰好有一个非常酷的功能，由 Drupal 社区的成员发现。. 使用 clip: rect(); 属性让每个人都高兴

.my-hidden-element {
  position: absolute;
  clip: rect(1px 1px 1px 1px); /* IE6 & 7 */
  clip: rect(1px, 1px, 1px, 1px);
}

至于 Google，不仅会很难让他们根据 clip 属性“全面禁止/惩罚”，即使确实开始提出旗帜，我认为如果您可以证明隐藏元素的合法用法，那么这就像其他一切一样 - 应该有没问题..事实上，在这种情况下，额外的标头理论上应该可以帮助他们“找到结构” - 所以我真的觉得这不是最大的担忧..

我的想法

我绝对认为我们应该标题部分按照 HTML5 建议，它比任何代码元素或类名称都更具语义，但我也 100% 认为我们应该能够向视觉查看者隐藏它们，因为显示标题“搜索此网站”是没有意义的如果您的视觉用户可以看到那里有一个搜索框;) - 该标题仅对非视觉用户和 SE 有用，可以帮助他们找到文档的区域。理论上，这应该可以帮助 SE/Google 忽略该区域，例如他们应该不需要为搜索框建立索引..所以他们将不得不开始研究他们的人工智能，你不觉得吗;)

我的感觉是同意这一点，并清楚你为什么这样做，那么如果您的网站万一被标记（我认为这极不可能，而且无论如何都会是手动审核），您可以非常清楚地解释为什么要这样做。.只要这些隐藏标题不是“垃圾邮件”，那么我认为它将属于与“图像替换”相同的类别

+1 好问题！

Answer 2

我最喜欢的处理方式。禁用样式后，您会看到标题，但它是一个小标题，而不是 h1。

<nav>
<h6 class="hidden">Navigation</h6>
<ul>
<li><a href="www.ronpaul.com">Ron Paul 2012</a></li>

.hidden{
   position:absolute;
   left:-9999px;
}

或者

.hidden{
   text-indent:-9999px;
}