jQuery mobile, multiple page in a single page method, multiple h1 effect SEO, Accessibility and Semantics_问答_开发者

jQuery mobile, multiple page in a single page method, multiple h1 effect SEO, Accessibility and Semantics

开发者 https://www.devze.com 2023-03-17 13:59 出处：网络

Is Multiple page in a single page method of jquery mobile OK for SEO Accessibility and Semantics of page?

And I making a site which will use CMS to add/modify data has many page with 3 levels.

Is this techniques ok? it create problem to define Head开发者_如何学编程ing level H1 to H6 in multiple page. I took below code from this page. http://jquerymobile.com/demos/1.0a4.1/#docs/pages/docs-pages.html

And you can see this page has two <h1> tag but identically only one <h1> is good.

and

<h1>
<h2>
<h1>

is not allowed as per Web Accessibility standards.

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

The important thing is to hide the 'hidden' pages using CSS display:none (or visibility:hidden) - all current screenreaders will ignore content marked up in this way, so will only see the actually visible headers.

You never want to put more than a single <h1> tag on a web page.

I would turn those <h1> tags into <h2 class="h1"> tags, use CSS to style them to match your <h1> styling. I would then add a single <h1> tag elsewhere on the page hidden via CSS which has quality SEO copy to describe the mobile experience as a whole instead of the individual "state" of the mobile experience.

Example: instead of <h1>Mens Suits</h1> and <h1>Accessories</h1> you could have <h1>Online Catalog featuring Mens Suits and Accessories</h1>

This may not be the full answer you look for, but IMHO when SEO is important for your page/app you should only decide between:

Using a single HTML file with all the content as pages in it - so that you have a single address to promote and content is switched with the hash part of the URL
never using multipage HTML documents in your app when the sibling pages are not just dialogs or additional info for the main content. Then normal SEO rules apply. This sorts out the whole problem