How to Help Your Users Navigate Long-Form Content

There's no denying it: Search engines and people can appreciate long-form content that is rich and detailed. How long is that content, exactly?

While long-form content is typically defined as over 1,000 words, a Backlinko study showed that the average first page results on Google contains 1,890 words. While that may help your SEO goals, long-form content has more of an uphill battle to climb with the humans reading it.
If a goldfish could read, it'd be more likely to finish your long-form content since its attention span is better than the average human. Rather than working against a reader's natural inclination to skim and scan your content, encourage and assist the behavior.

Long form content with an index can not only increase engagement by having a way for the reader to interact with the content, but also increase the amount of content consumed by keeping readers on the page. This is great news since only two-thirds of readers will engage with content for longer than 15 seconds, according to ChartBeat.

When you do set out to create long-form content, and you certainly should, help users navigate to the top and bottom of the page, and everywhere within the content. Don't forget that your calls-to-action (CTAs) within the content can help move the users "sideways," that is to another page with similar, relevant content.

If you're hoping to support the browsers, skimmers and scanners who are eager to flip through your content, read on for how to do so in HubSpot.

Bottoms Up

When readers take to skimming through content, how do they get back up to the top? Can you imagine browsing 5-10,000 words without having a way to easily navigate?

Always give your readers a way to quickly get to the top. In this 5,000 word Washington Post article, a hyperlink labeled "Back to top" is used at the end of each section to help users get back to the main navigation and jump around in the article. Want more design details on the example? Click here.

Here's how to create a "back to top" link in HubSpot.

1. Write "back to top" or merely "top" at the end of a section or chapter in your long-form content.
   
   
   
   
2. Highlight the text and go to Insert > Link.
   
   
3. In the Link URL box, type in "#" also known as an anchor link. Be sure that the link opens in the same page by leaving the box unchecked for opening in a new window as shown below.
   
   
   
   This creates a hyperlink that visits http://www.example.com# . Anchor links like that one will always lead to the top of the page without further specification (such as http://www.example.com#chapter4) . Click here to learn more about using anchor links to jump to a specific part of a page.

Top Down

To make long-form content digestible, chapter titles or subheaders are typically used to break up the content's subtopics, much like a printed book.

To create a clickable table of contents for users to navigate your long-form content, you'll insert table of content anchor links into each chapter heading of the long-form content, and build the table of contents using a simple menu.

Insert Table of Contents Anchor Links

1. Click to place the cursor before the chapter title text and go to Insert > Anchor.
   
   
2. Name the anchor the corresponding chapter number, like "chapter-12" as an example. Click OK.
   
   
3. Take note of each anchor link name that you create. You'll need them to build the table of contents next!
   
   The anchor won't change much in the editor. You can see the anchor has been added before the chapter title text, as denoted by the gray anchor box.
   
   In order for the table of contents to work properly, only create anchors that use a hyphen instead of a space between words and make each anchor name unique.

Build the Table of Contents

The page template for your long-form content needs to have a simple menu module.

To add a simple menu from the content editor:

1. Click Settings > Edit Template.
   
   
2. Drag a Simple Menu module from the Built-in Modules list and drop the module where you want the table of contents to go.
   
   

To build the table of contents:

1. On the Simple Menu module, click on the gear icon > click Edit Options.
   
   
2. Click the Add a page button, and you'll add the chapter anchor links you've created. The Menu Label is what your users will see in the table of contents. The Link to Page is the anchor link. Select "/" in the drop down menu and type in the page URL with anchor. As an example, by typing "longformcontent/#chapter-1" as the link to page creates a full URL "http://www.mywebsite.com/longformcontent/#chapter-1".
   
   
3. Repeat for each item in the table of contents and you'll end up with a simple menu.
   
   
   
   
4. When you've finished adding all of the anchor links, click Done.
   
   
5. To save your template changes, click Publish Changes.
   
   

And now you have a clickable table of contents on your long-form content!

Make It Pretty, Make It Your Own

After you add a menu module, how do you customize how the table of contents looks? If your designer -- maybe that's you -- wants to style the table of contents, then check out the "Styling Menus" section of the HubSpot Menu Markup Documentation. You'll find a slew of example CSS selectors to target and style your table of contents with ease.

To learn how to create compelling long-form content that's easy to browse, navigate, and generates high engagement with your readers, take the Content Marketing Certification.