Anchor Tag SEO

SEO Knowledge Related to HTML Anchor Tag <a>

@ SEO

Introduction

Search engines rely on the <a> tags in HTML documents to understand the relationships between pages and to score them accordingly. Understanding <a> can help better handle and label the relationships between pages. As a frontend engineer, I have recently researched SEO perspectives that are often overlooked while building my blog.

What is the <a> Tag?

a stands for anchor, which is a link that points to another web resource, such as: a webpage, image, video, email, or address.

<a href="https://www.webdong.dev/">WebDong</a>
<a href="https://example.com/image.jpg">View Image</a>
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Watch Video</a>
<a href="mailto:hello@example.com">Email Us</a>
<a href="https://www.google.com/maps?q=Taipei+101">View Taipei 101 Location</a>
<a href="tel:+886912345678">Call</a>
<a href="/file.pdf" download>Download File</a>
  • Internal link: A link that points to resources within the same domain.
  • External link: A link that points to resources in external domains.
  • Backlink: An external domain link pointing to a resource within the internal domain.
  • Anchor link (Jump link): A link that points to resources on the same page.

The reason for distinguishing between internal and external links is that search engine algorithms rely on the relationships between web pages for scoring. The higher the quality of the backlinks, the higher the page score, making it more worthy of recommendation.

<a> Tag Attributes

  • href: Represents Hypertext Reference, indicating the location of the resource.
  • rel: Represents Relationship, indicating the relationship to that resource; multiple values can be separated by spaces.
    • nofollow: Instructs search engines not to follow the target URL, preventing the page ranking from being affected by that link.
    • noopener: Prevents the new window from being able to access the original site, a security measure to enhance site safety.
    • noreferrer: Prohibits the linked resource from identifying the current page as its visitor source, while also including the effects of noopener.
  • target: Indicates how to display the link.
    • _self: Current browsing context. (default)
    • _blank: New browsing context, typically a new page or window in the browser.
    • _parent: The parent of the current browsing context. If there is no parent, behaves the same as _self. _top: The top-most browsing context, meaning the “highest” context among the ancestors of the current context. If there are no ancestors, behaves the same as _self.

Conclusion

Understanding <a> is crucial for the interlinking of web resources, search engine ranking judgments, and even has certain implications for information security. It is one of the essential knowledge points for SEO and frontend.

Further Reading