用于将页面标题显示为选定子菜单项的HTML结构

时间:2016-03-18 03:44:37

标签: html seo semantic-markup

在类别存档中,我想使用以下布局:

CATEGORY NAME

[All] - Subcategory 1 - Subcategory 2 - Subcategory 3

List of all posts from 'CATEGORY NAME'

突出显示所有

当有人点击某个子类别时,该类别会突出显示,并且会看到该子类别中的帖子:

CATEGORY NAME

All - [Subcategory 1] - Subcategory 2 - Subcategory 3

List of all posts from 'Subcategory 1'

用户非常清楚这意味着什么,而后者意味着您在该子类别的页面上。

向搜索引擎明确说明这一点的最佳方法是什么?

根据标准惯例,'页面标题'应该是h1标记。对于第一种情况,这显然是类别名称。但是,在后一种情况下,它应该是子类别。在导航列表中添加h1并没有任何意义;但将h1标记保留在顶级类别名称上并不能给人留下正确的印象。

1 个答案:

答案 0 :(得分:0)

我假设你有这样的标记:

<h1>CATEGORY NAME</h1>
<nav><!-- links to "All" and subcategories --></nav>
<div><!-- List of all posts --></div>

你是对的,在nav内更改/添加标题是不合适的,因为这只会影响nav元素本身的轮廓,而不会影响父元素的轮廓。 / p>

一种解决方案可能是相应地更改h1(例如,“CATEGORY NAME:Subtitle 1”)。但是,只要nav是一个小节,这就没有意义。

另一种解决方案(我认为这个更合适):添加反映所选页面的h2

<h1>CATEGORY NAME</h1>
<nav><!-- links to "All" and subcategories --></nav>
<section>
  <h2>Subcategory 1</h2>
  <div><!-- List of all posts from 'Subcategory 1' --></div>
</section>

如果选择所有,您当然可以使用h2之类的“所有帖子”,但这可能不是很优雅;相反,您可以考虑在这种情况下省略section并使用上面第一个代码段中的标记。