You’ll find anchor links on most web pages that help readers (and search engines) understand what information is available on the page and quickly navigate to what they want to know. If you want to use anchor links to increase your site’s performance, first learn what anchor links do, how to create them, and how they contribute to search engine optimization.
What is an anchor link?
Anchor links, also called jump links, are hyperlinked text on a web page that link to another location on the same page. Anchor links are considered internal links, since they keep readers on the same website. By contrast, external links send visitors to an external website.
You typically find anchor links at or near the top of a web page. They serve as navigation tools to help readers jump to a specific section of content. However, you can also use these links to create floating “back to top” buttons. Think of anchor links as a type of table of contents that organizes and structures information for an enhanced user experience.
Anchor links are useful shortcuts for blogs, email newsletters, and other long-form content that make them easier to navigate.
You can create anchor links in the page source code using anchor tags. An anchor tag in HTML code is represented as <a> to mark the anchor element, and it is accompanied by an href attribute represented as href= that designates the destination of the link.
How do anchor links impact SEO?
When used correctly, anchor links can help improve your search engine optimization (SEO) by providing context and structure to your content. Keyword-rich anchor text teaches search engines how to categorize your content in search, and the internal links clarify the hierarchy and importance of the text. Plus, anchor links can help lower bounce rates by sending visitors to content that is relevant to them and will keep them engaged on your page.
Greg Bernhardt, SEO strategist at Shopify, says, “Link anchor text serves as an important contextual signal to Google for what the linked page is about. Think of it as a topical endorsement. The stronger and clearer the endorsement, the stronger the SEO. If your anchor text is ‘Buy Blue Canadian Widgets,’ then you're telling Google what that page is about. Vague or nondescriptive anchor text such as ‘Click here’ offers the user less confidence and provides Google with no topical signal for that page.”
How to create anchor links
Many website software programs and text editors have built-in tools to make it easy to insert anchor links in your text, but you can create anchor links yourself by learning how to use the HTML anchor tag code. You can use this process in Shopify-compatible coding programs such as Visual Studio Code, Sublime Text, or Atom.
1. Create the anchor element
In your HTML window, find the target section or element you want your anchor text to link to. You want to create a unique ID for this section so you can easily identify and link to it. For example, you might label the target section “part1.” You would then insert the code id="part1" to the opening tag of your target section. Note that straight quote marks are important to set off the anchor ID in your code. The following code is a simple example:
<html>
<body>
<h1 id="part1">Part One</h1>
<p>This is the content of part one.</p>
</body>
</html>
2. Create the anchor link
You can use the anchor ID created in step one in an href attribute (called a hypertext reference) that links the anchor text to the target element. You will use the code a href="#part1" to create your anchor link on the page. Your code will now look something like this:
<html>
<body>
<a href="#part1">Go to Part One</a>
<h1 id="part1">Part One</h1>
<p>This is the content of Part 1.</p>
</body>
</html>
3. Test your anchor link
Click Save on your HTML file and run your code in a new browser tab. Your anchor link should appear as text with a functioning hyperlink attached that should jump you to the section designated as an anchor element.
How to optimize anchor links for SEO
Using anchor links strategically is a great way to increase your chances of ranking higher on search engine results pages (SERPs). The following are a few best practices when creating your anchor links:
1. Use relevant keywords
Search engines will look to your anchor link text to determine the content of your page and how to categorize your site. Using keywords in your anchor links will indicate the topics of your content and may help your site rank higher on search engine results pages for those topics.
2. Place links prominently on your page
Your anchor links should be easily accessible and clearly visible on your page so that your website visitors can find them quickly. Search engines will then see that your readers prioritize the anchor links and treat them as important to your site’s navigation and content.
3. Structure your page strategically
Anchor links help search engines better understand your website’s overall structure, so you want to link to particular sections that have the most relevance to your target keywords. Use anchor links to direct users to the most important information on your page and to text that you think best answers your readers’ questions.
4. Optimize for all platforms
When you check that your anchor links are working, make sure you do so on all the different types of platforms (such as mobile, tablet, and desktop) as well as a variety of browser types (such as Firefox or Google Chrome) that your readers might use, including mobile browsers and ereaders. Having broken links or incompatible code for a certain platform can cause you to lose readers and hurt your SEO ranking.
Anchor links FAQ
What is the difference between anchor links and jump links?
You can use the terms “anchor link” and “jump link” interchangeably. Jump link is generally considered a less formal alternate version of the term anchor link.
Can anchor links be used with images and videos?
Yes, you can create an anchor link using an image or video. To do this, you would use the same steps for text except attach the id="anchor" code within the paragraph or header tag of the image or video to make it your anchor element.
How do I test if my anchor links are working properly?
To test your anchor links, open your code in a browser tab or mobile browser window and click on each anchor individually to make sure that they correctly navigate to the right location on the current page.
Do anchor links impact page load times?
No, anchor links have no impact on a website’s load times, as they don’t demand any additional data retrieval or server requests.
Are there any accessibility considerations when using anchor links?
Yes, accessibility is an important consideration when creating anchor links to create the best user experience for all types of readers. Always use descriptive and clear anchor text that is relevant to the content it is linked to so your readers can efficiently navigate your page. It’s also important to test your links on all types of platforms, including different types of web browsers, mobile devices, and screen readers.
