在HTML5网站上防止<nav>出现为“无标题章节”的方法

Question

在HTML5网站上防止<nav>出现为“无标题章节”的方法

23

我正在尝试使用HTML5节段元素和标题来实现正确的分块，同时还要达到客户要求的设计/布局（包括一定的限制）。

通常的布局将类似于这样：

<body>
  <header>
    <nav class="breadcrumbs"><ol /></nav>
    <h1>page title</h1>
    <p>visual title</p>
    <p>sponsor</p>
    <nav class="main_navigation"><ul /></nav>
  </header>
  <div class="main_content">
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
  </div>
  <footer>Footer stuff<footer>
</body>

我现在关心的是，如果我使用一个HTML5大纲工具，面包屑导航和主要导航都会显示为无标题的部分。按照分级标题结构，我不能给它们h2以下的标题，并且自然也不应该“加标题”，用CSS隐藏一个标题来“加标题”感觉不对。那么，保持语义正确、符合SEO标准并防止它们出现为无标题部分的最佳方法是什么？

- All Bits Equal

有人能解释一下“无标题部分”有什么问题吗？为什么我们应该给所有的分节元素加上标题？关于这个问题，W3C有什么推荐吗？ - ya.teck

1

准确地说，根据w3c标准，无标题部分实际上没有任何问题。在这里（http://html5doctor.com/outlines/#untitled-sections），html5Doctor描述了无标题部分。从听起来的样子来看，无标题部分主要是一个可访问性“问题”。如果您可以接受并以其他方式帮助屏幕阅读器，我想无标题部分就没有问题，但它仍然会让我感到不安，所以我会尽量避免。只是我的个人意见... - All Bits Equal

4个回答

5

以下是w3c推荐的方法，如edx课程中所述。

最佳实践1：为了不在屏幕上显示标题内容，建议使用Steve Faulkner在这篇文章中描述的技术。请勿在CSS样式表中使用display:none或visibility:hidden，因为在这种情况下，屏幕阅读器以及更普遍的辅助技术都不会朗读标题内容。

文章中的示例代码：

.offscreen
{
position: absolute;
clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}

<div class="offscreen">This text is hidden.</div>

- Ashfaq

3

您不必限制页面上只有一个h1标签，可以使用任意多个。标题可由分区元素分割，每个分区都可以有自己的层次结构，从h1开始，一直往下。如果您想的话，甚至可以在每个部分中有许多个h1标签，嵌套在各自独立结构的各个部分中。这完全取决于您希望如何构建页面/大纲。

此外，鉴于您的示例仅使用了3级标题，您可以非常轻松地将文章降到h3或h4，以适应导航标题。拥有标头（隐藏或其他方式）确实是语义化命名分区元素的正确方法。

参考链接：http://html5doctor.com/outlines/ http://www.456bereastreet.com/archive/201103/html5_sectioning_elements_headings_and_document_outlines/

- Deadpool

警告一句：虽然HTML5建议/允许我们使用多个h1进行分段（http://ow.ly/lik5O），而且Google的爬虫支持/理解HTML5并允许多个h1（http://ow.ly/likjZ），但一些SEO“专家”仍然认为在某些情况下使用多个h1可能会损害您的SEO评级。滥用会显得像垃圾邮件，因此我建议读者小心使用“众多”的h1标签。除此之外，感谢您的回答！使用多个h1是一个可行的选择。 - All Bits Equal

1

我为仅适用于HTML5大纲的标题创建了一个CSS类。

h1.outline, .outline {
  display: none;
}

"...然后在HTML中"

<nav>
  <h1 class="nocontent outline">--- Main Navigation ---</h1>
  <a href="/about">About Us</a>
  <a href="/products">Products</a>
  ...
</nav>

在大纲中，这会显示为：

 1. --- Main Navigation ---

编辑： "nocontent"类很重要，让Google的SEO算法知道标签中有与SEO无关的“样板”内容，因此不会计入您的网站搜索引擎排名或反对。 https://support.google.com/customsearch/answer/2364585?hl=en 根据该页面，可以将其他类与“nocontent”结合使用。

编辑：我没有在自己的网站上执行以下步骤，并且根据Google网站管理员工具，它没有受到惩罚，也没有创建任何警告或标志。 但是，Google的文档建议执行这个最后一步以启用“nocontent”类。

要为Google的排名目的启用“nocontent”类，请修改您网站的上下文文件：

在控制面板上，左侧菜单中点击高级。
在下载上下文部分，点击以XML格式下载。
编辑下载的上下文文件cse.xml，向CustomSearchEngine标签添加一个新属性enable_nocontent_tag="true"。例如，将<CustomSearchEngine>更改为<CustomSearchEngine enable_nocontent_tag="true">。
在上传上下文部分，点击上传并上传已更新的cse.xml文件。

这样可以填充我的导航栏标题，这些标题对用户不可见，但清理了大纲视图并使其更加合理。

- Deborah

谢谢您的输入，但我不确定这是否正确。根据我对SEO的了解，隐藏内容（特别是链接和标题）被认为是一种不良做法。很抱歉给您点了反对，但我不建议这样做。如果我确信这不会产生负面影响，我会再次点赞的。 - All Bits Equal

如果您的网页包含不相关于页面主要内容的样板内容区域，您可以使用nocontent类属性进行标识。当Google自定义搜索看到此标记时，我们将忽略其中包含的任何关键字，并在计算您的自定义搜索引擎排名时不予考虑。-- 我已对答案进行了编辑。 - Deborah

太好了，感谢更新。我又为你的答案投了赞成票。让我们希望其他“大型”搜索引擎也是这样想的。;-) - All Bits Equal

1

谢谢！我在寻找关于其他引擎惩罚的明确信息方面遇到了困难，与它们更高排名的内容相比。如果有相关信息出现，我会发布的。 - Deborah

1

我在Google站长工具中跟踪了6个月以上，即使我从未上传过上下文文件，我的网站也从未被标记或受到惩罚。 - Deborah

显示剩余4条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jason Gennaro · Accepted Answer

显然，nav元素因为它们是分区元素而没有标题。

如果你需要将它们作为大纲中的有标题部分，请在内部添加一个标题。

在这种情况下，你可以这样做...

<nav class="breadcrumbs">
    <h2>Breadcrumb navigation</h2><ol />
</nav>
    <h1>page title</h1>
    <p>visual title</p>
    <p>sponsor</p>
<nav class="main_navigation">
    <h2>Main navigation</h2><ul />
</nav>

然后使用CSS隐藏h2。

顺便提一下，为了更符合语义化，你可能应该将div改为section... 在这里。

<section class="main_content">
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
</section>