jQuery 移动，单页多页方法，多重 h1 效果 SEO，可访问性和语义答案

【问题标题】：jQuery mobile, multiple page in a single page method, multiple h1 effect SEO, Accessibility and SemanticsjQuery 移动，单页多页方法，多重 h1 效果 SEO，可访问性和语义
【发布时间】：2011-09-28 15:44:48
【问题描述】：

jquery mobile 的单页方法中的多页是否可以用于页面的 SEO 可访问性和语义？

我制作了一个将使用 CMS 添加/修改数据的网站，该网站有很多页面，分为 3 个级别。

这种技术好吗？在多页中定义标题级别H1 到H6 会产生问题。我从这个页面获取了下面的代码。 http://jquerymobile.com/demos/1.0a4.1/#docs/pages/docs-pages.html

你可以看到这个页面有两个<h1>标签，但同样只有一个<h1>是好的。

和

<h1>
<h2>
<h1>

根据网页无障碍标准是不允许的。

<body> 

<!-- Start of first page -->
<div data-role="page" id="foo">

    <div data-role="header">
        <h1>Foo</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>I'm first in the source order so I'm shown as the page.</p>      
        <p>View internal page called <a href="#bar">bar</a></p> 
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /header -->
</div><!-- /page -->


<!-- Start of second page -->
<div data-role="page" id="bar">

    <div data-role="header">
        <h1>Bar</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>I'm first in the source order so I'm shown as the page.</p>      
        <p><a href="#foo">Back to foo</a></p>   
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /header -->
</div><!-- /page -->
</body>

【问题讨论】：

标签： jquery html seo jquery-mobile accessibility

【解决方案1】：

您永远不想在网页上放置多个 <h1> 标记。

我会将这些 <h1> 标签转换为 <h2 class="h1"> 标签，使用 CSS 设置它们的样式以匹配您的 <h1> 样式。然后，我会在通过 CSS 隐藏的页面上的其他位置添加一个 <h1> 标签，该标签具有高质量的 SEO 副本来描述整个移动体验，而不是移动体验的单个“状态”。

示例：您可以使用<h1>Online Catalog featuring Mens Suits and Accessories</h1> 而不是<h1>Mens Suits</h1> 和<h1>Accessories</h1>

【讨论】：

【解决方案2】：

这可能不是您要寻找的完整答案，但恕我直言，当 SEO 对您的页面/应用程序很重要时，您应该只在以下之间做出选择：

使用包含所有内容的单个 HTML 文件作为其中的页面 - 这样您就有一个要推广的地址，并且内容通过 URL 的哈希部分进行切换
从不在同级页面不只是对话框或主要内容的附加信息时在您的应用程序中使用多页 HTML 文档。然后应用正常的 SEO 规则。这样就解决了整个问题

【讨论】：

【解决方案3】：

重要的是使用 CSS display:none（或 visibility:hidden）隐藏“隐藏”页面 - 所有当前的屏幕阅读器都会忽略以这种方式标记的内容，因此只会看到实际可见的标题。

【讨论】：

但是搜索引擎和语义上它是合适的
你真的有三个问题；我不能肯定地回答 SEO 部分，只是可访问性部分。希望有人会评论其他人。至少现在你不是在等待一个知道所有这三个的人......（语义问题更棘手：标题的 HTML 指南并没有真正考虑 CSS 的存在以及使用 display:none 可以改变感知语义：通常假设 CSS 是纯粹的样式而不是语义，但无论是否显示某些内容都会极大地改变感知语义。）
谁说过屏幕阅读器？最佳实践不仅仅是“屏幕上显示的内容”。哪些标签包含哪些文本以及它们在 DOM 中的放置位置在此决定中具有更大的权重。
@AlienWebguy：这个问题是关于可访问性的；虽然可访问性不仅仅是与屏幕阅读器配合良好，但这通常是其中的主要部分。鉴于问题中的示例代码，提问者似乎已经很好地处理了 HTML 语义并使用了适当的标签和页面结构。如果您有特定的有用提示要添加，请随时使用该信息添加单独的答案。