Question

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

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

这种技术可以吗？如果在多个页面中将标题级别H1定义为H6，则会产生问题。我从这个页面下面的代码。 http://jquerymobile.com/demos/1.0a4.1/#docs/pages/docs-pages.html

您可以看到此页面有两个<h1>标记，但同样只有一个<h1>是好的。

和

<h1>
<h2>
<h1>

根据Web辅助功能标准，不允许

。

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

Answer 1

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

Answer 2

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

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

示例：代替<h1>Mens Suits</h1>和<h1>Accessories</h1>，您可以拥有<h1>Online Catalog featuring Mens Suits and Accessories</h1>

Answer 3

这可能不是您寻找的完整答案，但恕我直言，当SEO对您的页面/应用程序很重要时，您应该只决定：

使用单个HTML文件将所有内容作为其中的页面 - 这样您就可以使用单个地址进行宣传，并使用网址的哈希部分切换内容
从不在兄弟网页不仅仅是对话框或主要内容的其他信息时，在您的应用中使用多页HTML文档。然后适用普通的SEO规则。这样可以解决整个问题

jQuery mobile，单页面方法中的多个页面，多个h1效果SEO，辅助功能和语义

3 个答案: