There’s a hot trend in web design to create scrolling, one page websites – sometimes referred to as parallax scrolling sites. Navigation scrolls the site up and down – or left and right – to various sections of content rather than going to separate pages. The big flashy designs and eye candy transitions make this a popular direction for new web sites. See makeyourmoneymatter.org for a compelling example that uses most of the tricks found on one page websites.
Only indexing a single page may be fine, provided your web site isn’t trying to serve more than one master. This level of focus makes sense for a microsite or landing page, and can actually help to solidify the page authority rather than spread it around needlessly across lots of smaller pages.
But if your site is complex enough to span multiple disparate keywords, cramming everything into a single page will severely limit your organic search engine reach. Separate pages on a web site are crucial to providing a single place for search engines to send visitors for a given set of closely related keywords.
That said, don’t throw out your hot new web site or application just yet. There are work-arounds.
For one page content sites where all the content is initially loaded in one page (not using AJAX), the only option is to split up your content into multiple pages. These pages can still be long enough to provide the inner navigation and transitions that show off a single page design while still being limited to a single keyword space. For example, your site’s Careers section can use a single page design to navigate among job openings and culture content, while a separate page might provide information about a specific product. The idea here is to organize your content based on a slightly higher-level than one page per heading, and use the single page design to deliver multiple sections of that content.
For AJAX driven sites, there are technical work-arounds that essentially require you to provide both options. For human visitors using a web browser, the rapid loading single page AJAX-driven approach is used. For search engine spiders, content is delivered in the traditional content-per-URL approach. We’ll touch on two ways of achieving this.
Traditionally, AJAX applications have used anchor tags (everything after the
# in a URL) to navigate dynamic content. If you click around in GMail, you’ll notice the only part of the URL that changes is after the #. Google responded to this by establishing a convention to translate AJAX URLs (using characters after the # in the URL) into indexible server-side URLs (not relying on characters after #). The convention is to replace the
#!. When Google Bot sees a URL in the form of
example.com/page.html#!section1, it requests
example.com/page.html?_escaped_fragment_=section1 instead. It’s then your developer’s job to ensure that your website responds to that URL with the appropriate static content. Google provides full documentation for this approach, including sample code for implementing the server-side calls, at Making AJAX Applications Crawlable.
The newer HTML5 approach is to use the