Menu
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 Heading 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>
678
Multiple pages can be included in the single jQuery mobile document which loads together by adding multiple divs with the attribute data-role = "page". The div with data-role = "page" should consist unique id to link internally between the pages.
Inside the body: Pages Within the "page" container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a "page" are divs with data-roles of "header" , "content" , and "footer" .
The content of pages in jQuery Mobile is completely open-ended, but the jQuery Mobile framework provides a number of helpful tools and widgets — such as collapsible panels and multiple-column grid layouts — to make it easy to format your content for mobile devices. Basic HTML styles. Layout grids (columns)
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.
153
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>
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
