HTML5 is not a ratified standard. But a lot of people are using HTML5 to code up their websites, both to access new functionality and also because HTML5 is well .. cool. The best uses of HTML5 we’ve seen is as a replacement for Adobe Flash, especially in today’s world where as much as 30% of your website traffic may come from iOS devices (iPhone and iPad).

From a stylistic perspective, the hallmark of an HTML5 website is that content is presented on one or more long pages divided into sections – tagged with a new HTML tag under the HTML5 spec – called “section”. Navigation is usually presented somewhere on the page to allow you to quickly get to (sub)sections lower down on the page.

Square (not one of our clients) at Squareup.com presents this style of page:

https://squareup.com/register#run-your-business

Click on “Accept Credit Cards” or “Connect with Customers” or “Grow Your Business” and you are taken to a different section of the page. If you don’t click on those links you can also scroll down the page to get to that article.

The question is – is this a good thing or a bad thing from an SEO perspective? What is the right way to optimize this page?

Problem / Opportunity #1

Use care when crafting long, HTML5-style pages

It’s critical that the content that you want to be findable in search appear at the top of the page.

Content farther down on the page may not be very visible unless you optimize the page for jump to links. To do this, you need to follow the best practices provided here on SearchEngineLand.

Sadly, Square did not do this. As a result, search on “small business card reader” you get to this page:

http://squareup.com/register#run-your-business

But search on “small business loyalty cards” and you will not get to the right place on the page from search. Search will take you to the top of the page (not all that relevant) versus here:

loyalty square

Problem / Opportunity #2

Make the titles of each section semantically clear – using H1 or H2 tags

Multiple H1s on the page use to be a no no. But things are changing as with HTML5 multiple H1s are OK. Google appears to be relaxing any restriction on multiple H1s on the page with the rise in popularity of HTML5-style long pages.

There’s nothing particularly wrong with having multiple H1s, as long as you don’t serious overdo it — Matt Cutts

We think – but do not know – that this means that using H1s to start off a section is OK given the context. If this makes you nervous – as it does us – use H2s to identify the beginning of a section on your long pages.

Problem / Opportunity #3

Match internal links to the H1 or H2 and optimize the content in the section

You can see this with Square. Searching on loyalty programs Square should get me to the portion of the page indicated above. But it didn’t. Why? But Google could not index the content correctly – not because the page was coded in HTML5 but because the internal links used were all the same:

https://squareup.com/register#connect-and-grow

This is an artifact of using Javascript to drive this particular on-page effect. Optimizing internal links and having them match the header tags used helps Google gain an understanding of how your content is structured on the page.

A good benefit oriented internal link might be:

https://squareup.com/register#connect-and-grow-with-loyalty-programs

Now people who search can get to the content of interest to them. Once properly optimized, Google will present an ad with a “jump to” link to direct the prospect to the exact section of the (long) page with the content relevant to their search.

Problem / Opportunity #4

There is no right way to optimize an HTML5-style page. Curiously, the tools we as an industry use to help guide the optimization process, are page oriented and assume that a single page will be optimized around one to three keyword phrases. None of the tools are set up to deal with very long pages, where each section is written around a single topic that may be represented by 1-3 keywords.

How best to handle this?

Here at Open Marketing, we design sites with long-pages all the time. To make creating and managing the content on the page easier, each page is made up of multiple pages within WordPress. To do this, we make each section of the page a subpage underneath the parent page within WordPress. This allows us to optimize each section as its own page.

Doing it this way means that there are two versions of the content available.

A long page – which is what we want visitors to see – and a short page which WordPress creates by default and which is not what we want site visitors to see.
To avoid any appearance of duplicate content, we put a “no follow” on top of the template within WordPress used to render the short page.

We don’t know if this is right or wrong. We can tell you the result we want to get in search. We want to get a “jump to” listing for hashtags that are placed farther down on the page like this:

jumpto example

The reason we want this is to take the searcher directly to the content most of interest to them – without forcing them to start at the top of the page, where other content that is not relevant to them is presented.

Google’s algorithm appears to be smart enough to only insert a “jump to” link for sections farther down on the page. They don’t do this for a section at the top of the page, where it would be not result in a different experience for the user.

Practical Tips

Optimizing and Coding for HTML5-Style Long Pages within WordPress

The problem is that most of the tools we use to guide optimization are crafted with short pages in mind, not with the very long-pages that are in style thanks to HTML5.

If you use tools to guide your optimization effort, as we do, you may find it easier to create section(s) as short pages, optimize each short page as if it was a standalone page against a set of keywords, and then put a meta tag to no-index that short page.

Note that this assumes that within WordPress you make your “short pages” children of the long page.

Viola. A search-engine friendly valid technique that utilizes today’s tools for optimization purposes.

Relevant Links

Here’s a roundup of some articles on HTML5 optimization: