Anchor Links: How to & Best Practices - Video & Article

Anchor links can be an incredibly useful tool for your website. They can increase your SEO score, help your audience find exactly what they are looking for, and help you organize your information in the most effective way possible. However, that's only if you are using them correctly. In this short Webmaster Class, we are going to cover how to create anchor links and the best practices to use them effectively.

---

You may not know what an anchor link is, but you probably have seen one. If you are on a web page and there's a lot of content and there's some links at the top of the page and you click on one of those links and instead of taking you to a different page, it takes you to a section lower on the page, that is an anchor link. You might also see it if you're at the bottom of a page and there's a link that says Back to Top - clicking on that link takes you to the top of the page, and that is also an anchor link.

Below, we're going to show you how to do it using the standard WordPress editor. If you're on Divi or Enfold, it'll be a slightly different process though conceptually, it's the same.

One of the things that you'll want to do first is to get all of your content in place. You'll be editing in two different locations in your content, and so it's much more helpful if you have all of the content already there to work with. Another thing to know is, if you're wanting to do multiple anchor links on a page and you have a lot of content, it's best to split up that content into multiple sections and then to title each section, changing the title of each section into a heading.

Once you have all of your content in place, you can get started with your anchors. Putting in anchor links is a two-step process. What you're working with is a departure point and an arrival point. So the departure point is the link itself and that's where you're going to be leaving. And then the arrival point is where that link is taking you, it's where you're going to be arriving at. Highlight your arrival point text. In the standard WordPress editor, there's two tabs, a Visual tab and a Text tab. The Text tab used to be called HTML, and that's because when you flip over to it, it takes you to the HTML of that page. Click on the Text tab. Because I highlighted the text, you can see that here, and you can see that it's surrounded by two bracketed areas.

This is HTML. This is the part that users do not see, but it's the part that makes this topic a heading, and that's where we're going to be editing and adding some HTML code to create your arrival point. Put your cursor immediately before the ending bracket of the bracketed area immediately preceding the text that you want to link to. Type in a space, then id="". In between the quotes, add a unique ID or name to represent your text or this section.

Some things to note:

• Do not use any spaces in your ID.
• Do not use any special characters other than hyphens or underscores.
• All of your IDs have to be 100% completely unique from each other.

Once you have your ID types in, highlight it the ID, and copy it. Then flip back over to the Visual tab/editor.

As you can see, nothing has changed visually to this area at all. It's only in the code. Scroll back up to the place where we want to link from, the departure point. Highlight that and click on the link icon. Type in a # and then paste in that ID. The number sign is what tells this link that it is not a normal link that goes to another page, but an anchor link that goes to somewhere on this page. Click the Apply button. Update the page. View it on the front end, refresh the page, and make sure the new anchor link works.

Another thing to note is your page URL. If you're on the page before clicking on the anchor link, you can remove the last backslash and then type in # and that ID. Then copy the whole URL and send that to anybody in any external program. When they click on that link, instead of taking them to the top of this page, it will take them directly to that area lower down on the page.

For Enfold users, you're going to be creating the ID directly in the element settings. Add an element, and put in your content. Once you're ready, click on that element. Go to Advanced --> Developer Settings, and type in an ID under custom ID attribute. Once that's there, click Save and then create the link and the departure point in the exact same way as the above method.

If you are a Divi user, you're going to add an ID on the module. Go to the module. Edit the module settings. Go to Advanced, and then under CSS ID and classes, type in the ID there. Save that and  create the link in the exact same way as above.

Troubleshooting:

• If your link doesn't work at all - if you click on it and it doesn't take you anywhere - then you need to double-check some things.
  • Double-check to make sure your ID is formatted correctly, that there aren't any spaces in it and no special characters. Also most importantly, make sure that it matches the link, the link and the ID have to match exactly.
  • Check your code - make sure you have a space then id="" at your arrival point. Check that it's in the bracketed area immediately preceding the place that you want to arrive at.
  • In the actual link, at the departure point, make sure that you have that pound/number sign in the link.
• If your link goes somewhere else on the page and not where you expect it to:
  • Double-check all of your IDs and make sure that they are 100% unique and that none of them are the same.
  • If the link takes you immediately below the expected location, this is expected behavior with most themes. If you'd like to a different behavior, contact us by submitting a support ticket or emails us at [e-mail],and we can help you kind of move around that ID to the right location. Oftentimes this can vary by theme or by browser.

As always, if you have any questions, please submit a support ticket from your website or email us at [e-mail].