While you might have heard of “anchor links,” understanding what they actually entail might not be as clear. Anchor links play a significant role in web pages and SEO , so it’s crucial to grasp their concept, benefits, and how to use them effectively.

This time, we will start with an overview of anchor links, and explain their benefits, effective usage, and points to consider.

What are Anchor Links?

An anchor link, often referred to as an “in-page link,” is a link that allows navigation to a specific section within the same web page. 

A common example seen on many web pages or blogs is the “Back to Top” link, which scrolls the page back to the top when clicked.

Anchor links enhance user experience by allowing precise navigation to essential sections within an article, making it quicker for users to access the information they need.

The origin of the name ‘anchor link’

An anchor refers to a ‘weight (anchor)’ that is linked with a chain and sunk to prevent a ship from drifting, or it can also mean ‘to fix in place.’ An anchor does not only prevent a ship from drifting but also allows it to be easily moved to a desired position.

Similarly, anchor links are named so that they allow users to easily navigate to the information or section they are seeking, much like an anchor.

The difference between anchor links and hyperlinks

Distinguishing anchor links from hyperlinks, both serve the purpose of navigating to specific locations upon clicking. 

The main differences between the two are as follows.

-Anchor link: A link to a specific section within a web page.

-Hyperlink: A link attached to external data, such as in Excel, that leads to a web page.

Anchor links are primarily placed within a web page and, when clicked, navigate to a specific part of that page.

On the other hand, hyperlinks generally refer to links embedded in external data, such as Excel or Word, that lead to web pages.

Do Anchor Links Impact SEO?

Installing anchor links significantly impacts SEO because they enhance user convenience.

Specifically, placing links relevant to the information users seek expands their options and satisfaction levels.

Additionally, the ability to easily navigate to desired sections within a page influences user-friendliness, potentially increasing user engagement.

As anchor links are effective for SEO, it’s crucial to utilize them effectively.

Benefits of Anchor Links

The main benefits of anchor links are largely as follows.

• They improve usability.
• They are favorably evaluated in SEO.

Improves usability 

One of the benefits of anchor links is that they improve usability.

Users browsing a web page often do not read the entire article but select and read only the headings or sections they need.

Therefore, the ability to ‘quickly move to the section containing the necessary information’ significantly impacts the usability of the site.

Enhances SEO evaluation 

Properly implemented anchor links can lead to higher SEO evaluation. 

When anchor links are strategically placed, users perceive the site as user-friendly. Conversely, websites without anchor links force users to scroll repeatedly to find information, resulting in inconvenience and reduced dwell time.

Types and Usage of Anchor Links

While we commonly refer to them as anchor links, there are various types, each with its own usage.

Here, we’ll explain the typical types and usage of anchor links as follows

• Moving to specific sections within a page [id attribute]
• Redirecting to other pages [href attribute]
• Opening the destination in a new tab [target attribute]
• Adding descriptive text to images [alt attribute]
• Preventing crawling from irrelevant links [nofollow attribute]

Redirecting to Other Pages [href attribute]

The “href attribute” is used to navigate to another page outside the current web page being viewed.

When using the href attribute, the HTML code should be written as follows.

<a href=”https://~~~.jp”>Go to the target webpage</a>

Enter the URL of the target webpage within the double quotation marks, and input the display name of the link between <a> and </a>.

Moving to Specific Sections within a Page [id attribute]

The “id attribute” is used to move to specific sections within a web page, like “Back to Top.”

The HTML code for using the id attribute appears as follows.

<!– Clickable button –>

<a href=”#example”>Return to Section</a>

<!– Destination –>

<h2 id=”example”>Section Title</h2>

When using the id attribute, it’s necessary to specify the ID name for both the clickable area and the destination. Set the ID “example” for the destination h2 heading, and specify this ID name in href for the clickable area to achieve navigation.

Opening Links in a New Tab [target attribute]

With the target attribute, it’s possible to open a specified page in a new tab.

The syntax for the target attribute is as follows.

<a href=”https://~~~.jp” target=”_blank”>Open Web Page in New Tab</a>

Simply add “target=”_blank”” after the URL specified in href, and the link will open in a new tab.

Opening links in a new tab contributes to improving the time spent on a webpage, so nowadays, more websites use the target attribute for links.

Adding Descriptive Text to Images [alt attribute]

Including a “description text” in images on a webpage makes them more likely to be evaluated in SEO. Since search engines find it difficult to determine the content of images, adding descriptions makes them easier to identify.

To add a description to an image, use the following syntax.

<a href=”https://~~~.jp”><img src=”image.png” alt=”Description Text”></a>

The alt attribute is typically placed at the end of the img tag.

It’s preferable to keep the description text concise and relevant to the image.

Preventing Crawling from Irrelevant Links [nofollow attribute]

Linking external pages on a webpage allows those external pages to be evaluated in SEO. However, if these linked pages belong to competitors or are irrelevant sites, it may not be advantageous.

By using the “nofollow attribute,” you can prevent other sites from being evaluated, crawled, or indexed.

The syntax for the nofollow attribute is as follows.

<a href=”https://~~~.jp” rel=”nofollow”>Go to the Target Web Page</a>
Add “rel=”nofollow”” after the URL specified in href.

Methods for Effectively Using Anchor Links

To effectively use anchor links, consider the following methods.

-Use blue or blue-toned colors for link text.

-Verify if the linked destination is trustworthy.

-Choose related link destinations whenever possible.

-Keep the link text concise.

-Avoid excessive link placement as it can have a negative impact.

Using Blue or Blue-toned Colors for Link Text

It’s preferable to set the text color of anchor links to blue or blue-toned colors.

Using blue helps users easily recognize links. Additionally, links that blend with regular text may go unnoticed by users.

While the text color of anchor links doesn’t significantly affect SEO, prioritizing usability by using blue tones is advisable unless the website has unique design considerations.

Verifying Trustworthiness of Linked Destinations

While linking is effective for SEO, it’s crucial to meticulously verify the content and quality of linked web pages.

For example, there’s a possibility of broken links or pages becoming unavailable over time. Furthermore, linking to sites without Secure Shell (SSH) authentication can increase the risk of virus infection, potentially lowering SEO rankings.

Thoroughly confirming the trustworthiness of linked destinations is essential to avoid causing user anxiety.

Choosing Related Links for Anchor Links

Selecting related links is also an effective method for using anchor links efficiently.

If you place unrelated links, such as those leading to web pages with entirely different genres or industries, there’s a possibility that your SEO ranking may decrease. This is because it can be perceived as having low usability if there’s a disconnect from the information users are seeking.

Even if the linked article is of high quality, it’s essential to determine beforehand whether there’s relevance to your own web page and whether it’s content that users are likely to be interested in.

If you must place links to unrelated sites or competitor sites you don’t want to endorse, it’s crucial to use the “nofollow attribute.”

Keeping Link Text Concise

It’s essential to use link text that is concise and relevant to the linked content. Concise and understandable link text increases the likelihood of users clicking on the link because it’s easier for them to understand.

Search engines not only assess the information of the linked destination but also consider the relevance of the anchor link text to the web page. Therefore, concise and relevant link text is also effective for SEO.

Specifically, please refer to the following examples for appropriate link text.

-OK Examples: “〇〇 Company’s Hiring Page,” “Page Exploring 〇〇“ 

-NG Examples: “Click Here,” “Here”

Ideally, keep the link text between 10 to 20 characters.

Excessive Link Placement is Counterproductive

No matter how effective anchor links are for SEO, placing too many can be counterproductive.

It’s crucial to place anchor links only where necessary. Target areas where users are likely to have questions or interest and place relevant links that address those concerns.

Depending on the content of the web page, it’s generally preferable to have 2 to 3 anchor links in a 5000-word article.

A web page with appropriate links placed in appropriate locations leads to higher user satisfaction, increased dwell time, click-through rates, and improved SEO rankings.

Dealing with Misaligned Anchor Links

When using anchor links to navigate to specific sections, it’s not uncommon for the destination to be offset significantly above or below the intended spot.

This issue often arises when the destination section is fixed using “position:fixed;”. While removing this fix can often resolve the problem, it may be challenging due to coding constraints.

The simplest and quickest solution to this problem is to add the following CSS code.

#example {

padding-top: 100px;

margin-top: -100px;

}

By adjusting the padding-top to 100px and margin-top to -100px, you can align the destination to the correct position.

Common Questions About Anchor Links

Here, we address frequently asked questions about anchor links.

Q: Can anchor links be disabled? 

A: Yes, anchor links can be disabled. While there are various methods, the simplest approach is to “remove the href attribute”.

Although removing the <a> tag itself is an option, it’s preferable to “keep the <a> tag and remove the href attribute” as this aligns with HTML specifications.

Q: What is the name attribute? 

A: The name attribute allows you to assign an arbitrary name to each element, which can be used when referencing elements in CSS or scripts.

You can specify a name within any tag using the following syntax.

<input type=”sample” name=”example”>

You can assign a name by entering ‘name=”example”‘ inside any tag. The name attribute can be used in any tag, not limited to the input tag.

Q: What should I do if anchor links don’t move? 

A: If anchor links fail to move, potential causes include;

• Incorrectly specified button click and destination
• Misspelled id attribute
• Missing “#” on the button side

The correct syntax for anchor links is as follows.

<!– Button to click –>

<a href=”#example”>Return to Example Heading</a>

<!– Destination –>

<h2 id=”example”>Example Heading</h2>

Ensure that the destination has the id attribute and the button side includes “#” followed by the id name.

Summary

Understanding the proper use of anchor links allows you to create web pages that align with user intent, resulting in higher SEO rankings. Anchor links come in various types, and their usage varies. Additionally, factors such as relevance and safety of the linked content, as well as link text color, are crucial. Therefore, we hope you’ll refer to the content presented in this article to correctly and effectively implement anchor links.

Author Profile

Mr. Takeshi Amano, CEO of Admano Co., Ltd.

Mr. Takeshi Amano is a graduate of the Faculty of Law at Nihon University. With 12 years of experience working in the advertising agency industry, he discovered SEO and began his research during the early days of SEO. He self-taught and conducted experiments and verifications on over 100 websites. Using this expertise, he founded Admano Co., Ltd., which is currently in its 11th year of operation. Mr. Amano handles sales, SEO consulting, web analytics (holding the Google Analytics Individual Qualification certification), coding, and website development. The company has successfully managed SEO strategies for over 2000 websites to date.

Return to the top of Japan SEO