HTML Anchor Tag SEO: Attribute & Link Equity

Background

Whether it's an unfriendly link redirect tech stack or simply having too few links, both affect SEO performance.

Recently, I've noticed that crawling is very difficult for some client website pages, and new pages always take a long time to be discovered by crawlers. Without a coding background, I couldn't figure out where the problem was, since from a user behavior perspective, clicking links works fine. A few days ago, when checking AITDK's Links, I suddenly discovered that the number of clickable links on the page didn't match the displayed link count - the latter was much smaller. When I asked about the tech stack, it was location.href - oh no, there's definitely a problem. Page redirects are generally implemented in these three ways:

// This will redirect the current browser window to Example Page.
window.location.href = "https://www.example.com";

After checking Google's technical documentation, JS-based dynamic injection redirects (the second and third methods) are not recommended because they may not be crawlable, meaning the link doesn't exist in Google's eyes. When I asked Qiufeng before, he mentioned that the third method is what frontend developers love to write, and indeed, many other client websites have the same problem.

What is an <a> Tag?

The <a> tag in HTML defines a hyperlink, linking from one resource to another (not just pages - <a> tags can link to email addresses, images, videos, and other resources).

• If a hyperlink links from one resource to another resource on the same site, it's called an Internal Link
• If a hyperlink links from one resource to a resource on another website, it's called an External Link

Components of HTML <a> Tag

1. Opening tag: Indicates the start of the <a> tag
2. Tag attributes and attribute values: Specify the page the tag links to and affect user behavior when clicking the tag
3. Anchor text: The text users click to access the link
4. Closing tag: "</a>", indicates the end of the <a> tag

<a> Tag Attributes

Next.js Link Component vs HTML <a> Tag

When using modern frameworks like Next.js, developers often face a choice: use the framework's <Link> component or standard HTML <a> tags. Understanding the differences between them is crucial for SEO optimization.

Next.js <Link> Component

• React component: Used for client-side routing, providing prefetching functionality that improves navigation performance by preloading linked pages in the background.
• Client-side rendering: When rendered on the client side, it converts to an <a> tag, maintaining semantic HTML structure while enabling React's routing capabilities.
• Server-side rendering (SSR): During SSR, it pre-renders as an <a> tag, making it crawlable by search engines. This ensures that search engine bots can discover and index links during the initial page load.
• Pure client-side rendering (CSR): If using pure client-side rendering without SSR, search engines may not be able to correctly crawl links, as the content is generated dynamically after JavaScript execution, which some crawlers may not fully process.

HTML <a> Tag

• Standard HTML element: Native browser support, always crawlable by search engines regardless of rendering method, ensuring maximum SEO compatibility.
• Direct rendering: Renders immediately in the HTML source code, making it visible to search engine crawlers from the first moment they access the page.
• SEO-friendly: Guaranteed to be indexed and crawled by all search engines, providing reliable link equity transfer and page discovery.

SEO Friendliness Comparison:

• Next.js Link (SSR scenarios): ✅ SEO-friendly, will be rendered as an <a> tag, combining the benefits of React routing with search engine compatibility.
• Next.js Link (CSR scenarios): ❌ May not be correctly crawled, as client-side rendered content may not be immediately available to search engine bots, potentially missing important internal links.
• HTML <a> tags: ✅ Most SEO-friendly, directly crawlable, ensuring reliable link equity transfer and page discovery regardless of rendering method.

Recommended Practices

According to HTML <a> Tag SEO Best Practices requirements:

• Internal links and SEO/growth-related pages: Use standard HTML <a> tags to ensure maximum SEO compatibility and reliable link equity transfer.
• Ensure crawlability: <a> tags can be directly crawled by search engines, appearing in the initial HTML source code without requiring JavaScript execution.
• Internal links without Nofollow: Keep internal links as dofollow to pass link equity, helping distribute page authority throughout your website structure.
• Avoid JavaScript redirects: Avoid using window.location.href and other JavaScript redirect methods, as these may not be properly crawled or indexed by search engines.

Summary: Although Next.js <Link> components render as <a> tags during SSR, to ensure full SEO compliance and avoid any potential issues, it's recommended to directly use standard HTML <a> tags in MDX files and SEO-related pages. This approach guarantees maximum search engine compatibility and reliable link equity transfer, regardless of rendering method or framework configuration.

Main Uses of <a> Tag

• Link to other web pages: Allows users to navigate from the current page to another page, enabling users to read related content and increase dwell time
• Pass link equity: The main SEO purpose, distinguishing it from other link redirect methods
• Link to different parts of the same page: Create table of contents or anchors in long pages, allowing users to click links to jump to specific positions on the page, also called "anchor links" or "jump links"
• Link to other resources: Can link to files (such as PDFs), images, or other resources
• Create placeholder links: Can serve as placeholders for virtual hyperlinks when there's no actual target

Best SEO Practices

• Use <a> tags for all SEO/growth-related pages on the website (user interaction backend doesn't matter)
• <a> tags are crawlable
• Use descriptive anchor text that is concise and specific (don't use "click here"); you can refer to the links on my website, which are all carefully optimized
• Don't use Nofollow for Internal Links; use Nofollow for External Links as a safety measure

Summary

The <a> tag is the infrastructure of website SEO, directly affecting search engine crawling efficiency and link equity distribution.

Key Points:

• Avoid JS redirects, use standard HTML <a> tags to ensure crawler recognition
• Properly configure rel attributes: keep dofollow for internal links, choose nofollow for external links based on trust level
• Optimize anchor text: descriptive, keyword-rich, moderate length (8-12 words)
• Prioritize user experience: appropriately use target="_blank" and rel="noopener"

Implementation Recommendations:

1. Immediately audit existing website link implementation methods
2. Use Google Search Console to monitor link crawling status
3. Regularly check internal link structure and anchor text optimization level

Following these practices will significantly improve your website's search engine friendliness and user experience.