防止
显示为“无标题部分”在 html5 网站上

发布于 2024-12-01 07:03:02 字数 1016 浏览 1 评论 0原文

我正在尝试使用 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 隐藏标题来给它们加“标题”感觉是错误的。

保持语义正确、确认搜索引擎优化标准并防止这些部分显示为无标题部分的最佳方法是什么？

原文

I'm trying to implement correct sectioning with html5 sectioning elements and headlines while achieving the design/layout, my customer has requested (including certain restrictions).

The general layout will be something like this:

<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>

What I'm concerned with now is that if I use an html5 outliner, I get the breadcrumb nav and the main nav show up as untitled sections.
Following a hierarchical headline structure, I can't give them headlines below h2 and naturally I wouldn't "title" them at all and hiding a headline with css to "title" them feels wrong.

What's the best way to stay semantically correct, confirm to seo standards and prevent those to appear as untitled sections?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

人间不值得 2024-12-08 07:03:02

显然， 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>

Apparently, nav elements are untitled because they are sectioning elements.

If you must have them as titled sections in your outline, you will need to add a heading inside them.

In this instance, you could do the following...

<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>

Then hide the h2s with css.

BTW, you should probably change div to section to be more semantic... here

<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>

回复收藏 0 原文

眼角的笑意。 2024-12-08 07:03:02

这是 w3c 推荐的方法 - 正如他们的 edx 课程中提到的。

最佳实践 1：为了不在屏幕上显示标题内容，推荐的技术在史蒂夫·福克纳的这篇文章。不要在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>

Here is the recommended approach from w3c - as mentioned in their edx course.

BEST PRACTICE 1: In order to NOT display the heading content on screen the recommended technique is described in this article by Steve Faulkner. Do not use display:none or visibility:hidden in your CSS stylesheet, as in that case the heading content will never be vocalized by screen readers, and more generally by assistive technologies.

Example code in the article:

.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>

回复收藏 0 原文

神仙妹妹 2024-12-08 07:03:02

您不必限制自己在整个页面上只能使用一个 h1，您可以使用任意多个 h1。标题由分段元素划分，每个部分可以有自己的分层结构，从 h1 开始向下。如果需要，您甚至可以在每个部分中包含多个 h1，部分嵌套在部分中，每个部分都有自己的独立结构。这完全取决于您想要如何构建页面/大纲。

另外，考虑到您在示例中只使用了 3 个级别，您可以很容易地将文章降至 h3 或 h4 以适应导航标题。拥有标题（隐藏或以其他方式）确实是对分段元素进行语义标题的正确方法。

http://html5doctor.com/outlines/
http://www.456bereastreet.com/archive/201103/html5_sectioning_elements_headings_and_document_outlines/

回复收藏 0 原文

请叫√我孤独 2024-12-08 07:03:02

我为标题创建了一个 CSS 类，该类仅对 HTML5 大纲很重要。

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”类。

要启用“nocontent”类别以实现 Google 排名，请修改您网站的上下文文件：

在控制面板的左侧菜单中，点击高级。
在下载上下文中> 部分，单击以 XML 格式下载。
编辑下载的上下文文件 cse.xml 以添加新属性
对 CustomSearchEngine 标记启用_nocontent_tag="true"。为了
例如，更改为
。
在上传上下文部分中，单击上传并上传更新后的 cse.xml 文件。

这在我的导航中填充了用户看不到的标题，但清理了大纲视图并帮助其更有意义。

I created a CSS class for headings that were important only for HTML5 outlines.

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

...then in the html

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

...in the outline, this shows up as

 1. --- Main Navigation ---

Edit: The "nocontent" class is important to let Google's SEO algorithms know that there is "boilerplate" content in the tag not relevant to SEO, so it does not get counted for or against your site's search engine ranking. https://support.google.com/customsearch/answer/2364585?hl=en According to the page, it's ok to combine other classes with "nocontent".

Edit: I did not do the following step on my own site, and according to Google Webmaster Tools, it was not penalized, nor did the hidden titles create any warnings or flags. However, Google's documentation recommends this final step to enable to "nocontent" class.

To enable the "nocontent" class for Google's ranking purposes, modify your site's context file:

On the Control Panel, on the left-hand menu, click Advanced.
In the Download context section, click Download in XML format.
Edit the downloaded context file cse.xml to add a new attribute
enable_nocontent_tag="true" to the CustomSearchEngine tag. For
example, change to
.
In the Upload context section, click Upload and upload the updated cse.xml file.

This populated my navs with headings that were not visible to the user, but cleaned up the outline view and helped it make more sense.

回复收藏 0 原文

~没有更多了~