Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

How to Mark-Up a Multi-Page Tutorial?

1:25 pm on Aug 19, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:Oct 2, 2008
posts: 86
votes: 0


I'm writing a very long tutorial that just can't fit in one page--it would make the page heavier than 1MB, so I have to split it up. But I really wish I could put it all on one page in order to show Google that this is a very content-rich and relevant destination.

In the past, I've written a 2000-something word tutorial and put it all on one page. The page was favorable with search engines and I did get search traffic on it.

A couple of months later I wrote a much bigger tutorial and split it up into multiple pages with URLs like this

/tutorial/ (Main page)

The navigation mark-up is located at the bottom of every page in that tutorial, and it's something like this:

<div id="tut-nav">
<div id="prev-next">
<p class="prev"><a href="http://example.com/some-section/tutorial/">Previous page</a></p>
<p class="next"><a href="http://example.com/some-section/tutorial/b/">Next page</a></p>

<hr class="clear">

<h3>Pages in this tutorial:</h3>
<ol style="padding-left: 20px;">
<li><a href="http://example.com/some-section/tutorial/">Tutorial Starting Page</a></li>
<li style="font-weight: bold;"><a href="http://example.com/some-section/tutorial/a/">Sub-topic A</a></li>
<li><a href="http://example.com/some-section/tutorial/b/">Sub-topic B</a></li>
<li><a href="http://example.com/some-section/tutorial/c/">Sub-topic C</a></li>
<li><a href="http://example.com/some-section/tutorial/d/">Sub-topic D</a></li>
<li><a href="http://example.com/some-section/tutorial/e/">Sub-topic E</a></li>
<li><a href="http://example.com/some-section/tutorial/f/">Sub-topic F</a></li>
<li><a href="http://example.com/some-section/tutorial/g/">Sub-topic G</a></li>

I even have breadcrumbs (without Microdata mark-up though) like this

Site > Section > Tutorial > Sub Topic A

In spite all of that, the main page, /tutorial/, didn't have much luck with search engines. It's on the second page for its very uncompetitive keyword. It's ranked below pages with clearly lower quality and shallower topic coverage. What's up with that? :(

I'm thinking that for this tutorial that I'm writing now, the <titles> of all the pages will be "How to Main Keyword Phrase - Part 1", "How to Main Keyword Phrase - Part 2", etc. But <h1> will be different from <title> for each page.

What do you guys think about all of this? Is there a semantic way to mark-up multi-page articles that would clearly tell engines that these pages are all part of one article?
3:12 pm on Aug 19, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0

AFAIK search engines rank sites page by page. If page #2 contains the keywords and content for what the user is searching for and the first page doesn't then is there any reason why the search engine should include page #1 in the results?

However, have you looked at link relationships between your pages? (Similar to your navigation markup)
12.3 Document relationships: the LINK element [w3.org]
6.12 Link types [w3.org]

So, for instance, you might have the following in the HEAD section of page #3
<link rel="Start" href="/tutorial/"> 
<link rel="Next" href="/tutorial/sub-topic-x/">
<link rel="Prev" href="/tutorial/sub-topic-z/">

The link types (Next, Prev, etc.) are a W3C standard so the SE's should understand them. How this might affect the SERPs I'm not sure. Using "Next" and "Prev" class names (as you have done) in your navigation might help, although this isn't strictly a 'standard' that I'm aware of - although it could be considered a microformat [microformats.org]?

In a multi-page article I would certainly have commonality between page titles and perhaps the H1 tags(?) with the H2 tags having the title of that sub-page within the article - may be?