News & Insights

BACK TO ALL ARTICLES

SEO and Web Design For a One-Page Site

pwd staff OLIVER WOOD
Oliver Wood

|21st December 2017

One-page websites take a minimalistic approach by eliminating the complexity that a multi-page site would have. Instead of clicking through to different pages, users simply scroll or up down to access the page’s content. The linear design provides an intuitive browsing experience and lets companies better control the user journey.

image-not-found

Other advantages that one-page websites have over their multi-page counterparts include:

Lower development costs:

There are plenty of tools available you can use to build your own one-page site. And even if you hire a web development agency, the costs will be considerably cheaper compared to a multi-page site.

Optimised mobile design:

Scrolling is already natural behaviour for mobile users. Single page websites are also easier to adapt to mobile as most designs are responsive out of the box.

Potential for higher conversions:

Single page designs make it possible to control the entire user journey. Companies can then optimise for more conversions whether that be more free trial downloads or newsletter sign-ups.

One-page sites are certainly appealing but there is one drawback to consider—SEO.

The advantage of a full fledged site is that you can cast a much wider net by optimising individual pages for your target keywords. In contrast, a single page website is rather limited in terms of SEO as there is only one page to optimise for.

image-not-found

This isn’t to say that one-page sites can’t rank well. They certainly can but it requires a different approach to get them ranking for your target keywords. The following looks at how to rank a one-page site in Google.

Create Clearly Defined Sections


Even with a one-page design, you still need some sort of structure to organise your content. Create clearly defined sections with relevant headings to make it easier for users to navigate. Optimise each section for your target keywords to improve the overall relevancy of your page. Use a tool like Google’s Keyword Planner to identify potential keywords then group them thematically for each section.

For example, your headings might look like:

  • Flower Delivery Services
  • Flower Delivery Pricing
  • What Our Customers Say
  • Our Locations
  • Contact Us

On-page optimisation is essential to ranking in the search results as Google looks at the presence of keywords to determine what a page is about. But be careful not to excessively spam your page with keywords as doing so could lead to an algorithm penalty.

Employ DIV Tags to Paginate Sections


With multi-page sites you’re able to optimise entire pages around individual keywords. But you don’t have that same luxury with one-page sites.

One of the best practices for one-page sites is to create separate each content section with DIV tags. While these tags won’t directly improve search rankings, it helps to keep the code organised and can also be used to create anchor links.

Give each section a DIV ID:

<div id=“flower-delivery-services”>…content</div>

<div id=“flower-delivery-pricing”>…content</div>

<div id=“what-our-customers-say”>…content</div>

<div id=“our-locations”>…content</div>

<div id=“contact-us”>…content</div>

Remember to optimise each DIV ID for your keywords. Then create a relevant H1 tag for each section using your main keywords. These tags provide more context of what your page is about and indicate a separation in your content.

Setup Anchor Links


Each section of your one-page site should have a DIV ID. The next step is to create your anchor links which are useful for two reasons—Users can use them to navigate to specific sections of a webpage and Google can follow them when crawling a website.

Here are examples from each of the DIV IDs we created in the previous step:

<a href =“#flower-delivery-services”>Flower Delivery Services</a>

<a href =“#flower-delivery-pricing”>Flower Delivery Pricing</a>

<a href =“#what-our-customers-say”>What Our Customers Say</a>

<a href =“#our-locations”>Our Locations</a>

<a href =“#contact-us”>Contact Us</a>

In the header of your site, you can link to those sections. Here’s an example of how Beautiful Interactions links to different parts of its site on the navigation menu:

image-not-found

Build Links


Links continue to carry a great deal of weight in terms of rankings. If you don’t have any links from relevant sites, you stand little chance of competing against those sites that do. Data from Moz found a strong correlation between the number of links a page has and its rankings:

image-not-found

The key takeaway from the study is that external links from unique sites are necessary to rank high. But you might be wondering how link building would work for a one-page site. In addition to linking directly to your homepage, you can also create links back to the relevant sections of your site.

We already looked at using DIV tags to create sections. A link back to a relevant section of your site would look like:

<a href =“ -->

Check for Crawling Errors


Google’s algorithm has become increasingly sophisticated over the years. If your site consists of a single page that utilises code for an endless scrolling effect, Google is likely able to process it.

Here is what Matt Cutts says about one-page websites:|

https://www.youtube.com/watch?time_continue=6&amp;v=Mibrj2bOFCU

This part of the video is particularly important to note:

“In general, I would run a test first. I wouldn’t bet your SEO legacy on this one single page working well if the javascript or CSS is really obscure or maybe you’ve forgotten and blocked that out in robots.txt. But if you run the test, and you’re pretty happy with it, I don’t necessarily see a problem with that.”

Before finalising a one-page site design, you want to be absolutely certain that it works well especially if you are using any obscure code in your script. Double check your robots.txt file too as the last thing you want is to inadvertently block Google’s web crawlers from indexing your site.

You’ll also want to double check that there are no crawling errors. Login to your Google Search Console account. Then click on Crawl on the left side and click on Crawl Errors. If there are no errors you’ll see the following:

image-not-found

Visit Google’s page on crawling errors to learn more about the different errors and how to fix them.

Final Thoughts

If you have a limited product range and don’t rely on search engines for traffic, a single page design can be perfect for showcasing your offer. The design is also advantageous for several reasons as it offers lower maintenance costs and offers a unique browsing experience that can drive more conversions.

But even with the advantages there are also a number of disadvantages to consider as well.

The first major downside is that the keywords you can optimise for are rather limited. Second, the more content you add the less practical a one-page site becomes. If you have hundreds of products, attempting to display all of them on a single page isn’t very efficient. It could even affect conversions as data from Google found that 79% of shoppers who are dissatisfied with site performance indicate they’re less likely to return.

With that said, one-page sites can still be a valuable asset for your business and can rank for important keywords when properly optimised.