Internal navigation elements within an article or post are gaining increasing prominence with search engines. With content becoming longer and longer, users need a way to quickly navigate large posts without getting lost. I’d earlier written a tutorial on how to create a “top of page’ button that allowed users to quickly navigate to the beginning of an article from anywhere using a floating arrow button.
Another way to help users is to create links throughout your page that reference different sections. This is most commonly used as a kind of “Table of Contents” or TOC. But it’s also useful when you’re writing an article for both beginners as well as experienced users. You can give experienced users the option to skip an entire section and get to the advanced stuff immediately without making them wade through boring content.
Additional Benefits of Linking Within a Page
Once I started using internal links within a single post, I noticed several results in my Google search results where visitors were being directed directly to individual page sections instead of just the article itself. Here’s an example:
This means that my article headings are being used as rich snippets in Google, allowing users even more site exposure in addition to the regular search results. If you create headings and rich links, search engines can use those headings to create even more opportunities for people to click on your pages!
It also appears that users might be directed immediately to the linked section of the page instead of the top of the article That way, they get answers to their questions immediately.
Creating the Internal Links
In order to link from one section of the page to another, I’m going to use an example. In the screenshot below, I want to create a link from the first section to the second:
We’ll do this in two steps.
Step 1: Creating an “ID” Tag for the Target or Destination
First, we go to the “Text” tab in the WordPress editor, and navigate to the destination heading. There, we find the heading we want to link to, and change the HTML from this:
<h2>Heading 2 - We Will Link to This</h2>
<h2 id="heading-2">Heading 2 - We Will Link to This</h2>
Notice the new text: id=”heading-2″ before the closing > tag. This creates a unique “ID” for each section of text that you use it with. If you have multiple headings, and multiple destinations, you can ensure that each ID is unique and meaningful. This will make it easier to remember later on.
Once you’ve created a unique ID for your destination, it’s time to create the actual link.
Step 2: Creating the Link to the ID Text
Now go to the location where you want to create the link via “Text” mode in the WordPress editor. In the example above, I change the text from this:
We want to Link from Here to Heading 2
<a href="#heading-2">We want to Link from Here to Heading 2</a>
As you can see, we make it a regular link. Only instead of linking to a URL, we link to an ID with the hash (#) symbol.
This kind of link will scroll your page immediately to the new section of the article without needing to reload anything. You can use it in all sorts of creating ways to make the reading experience more enjoyable and interactive.
With long-form content becoming the norm, these kinds of tricks are necessary to maintain a reader’s attention to prevent them from throwing up their hands in disgust and hitting the back button when they’re suddenly confronted with a huge wall of text!