Can HTML5 allow us to combine 25 pages that describe our product and still maintain SEO?

Question

We currently have a web site that advertises a single product (a piece of software that deals with personnel information). That software has many features.

Potential customers usually arrive at our site after searching Google for one of the features we have, e.g. employee records or job profiling or succession planning.

To be listed well in Google, the site was designed so that each feature (capability) is described in its own page, e.g. (structure trimmed for brevity):

<title>Succession Planning</title>
---
<h1>Succession Planning<h1>
<p>Here's why our software is amazing for <em>succession planning</em>...</p>
<ul>...List of extra sales points...</ul>

and

<title>Job Profiling</title>
---
<h1>Job Profiling<h1>
<p>Here's why our software is amazing for <em>job profiling</em>...</p>
<ul>...List of extra sales points...</ul>

This has worked well for SEO historically. However, we have around 25 features we're selling against, and therefore 25 pages to maintain.

The site is being redesigned, and I am wondering whether HTML5's new elements allow for us to combine all 25 features into a single page (or perhaps group the features into fewer pages at least).

I've read W3Schools and many blog posts on this, but can't find an answer that matches these requirements (most just list many products with basic description/price).

Here are some options I've considered:

1. Put each feature in its own article element (although I think that isolates each feature away from the product)
2. Use nested divs with schema.org/Product descriptions
3. Use h1 and title for the product name, then h2 and/or h3 for each feature
4. Put each feature in its own section element with h2, e.g.

---

<h1>Software Title</h1>
<p>Intro</p>
<h2>Features</h2>
<section>
    <h3>Succession Planning</h3>
    <p>Here's why our software is amazing for <em>succession planning</em>...</p>
</section>
<section>
    <h1>Job Profiling<h1>
    <p>Here's why our software is amazing for <em>job profiling</em>...</p>
</section>

I would try all of these in turn, but I don't have the resources and need a quick turnaround. The more research I do, the more mixed messages I get.

Has anyone used any of the above approaches with success, or is there a better way altogether please?

Answer 1

HTML allows you to do this, not just HTML5. There are no magical elements there just yet. Google only cares about the content and less about the document outline. Last I read, Google doesn't care about section or header or aside or any of that either. So pay attention to the document outline and you will be fine.

Now that doesn't mean you shouldn't use the new elements. It can help organize your page and organization helps with search engines and SEO but, again, search engines pay little or no attention to the new elements yet.

Use only one <h1> heading and follow that in outline form with descending heading elements; <h2> <h3> etc. Of course you can use more than one of those but make the <h1> the topic of the page only. Each section can begin with a <h2> and each article within the section would have a <h3> for example.

Answer 2

If the feature information is less than a paragraph each, you can fit everything on to one web page.

If however you have several paragraphs per feature, you're better off to leave things alone as 25 pages in order to rank well with google, but make each page have some keywords that are part of the feature itself in the title, meta description and H1 tag.

If however you still want to condense pages and still rank well, then go with 13 pages and merge two related features into one and make each page follow the same kind of format I mentioned in the above paragraph.

And lastly, if you're dying to have absolutely everything on one single page and you're willing to risk losing some ranking with google, then you can use javascript to load your pages, then users will feel they never left the initial page. This kind of idea is more suited for photo pages and I believe there is something like this in flash called a carousel.

Here's a demo of what I mean: go to http://www.jssor.com/ and click on the far right arrow to switch between pictures, then you feel you never left the site to grab the next picture.