Skip to main content

External Links

When it comes to accessibility and SEO for external links in anchor (<a>) tags, there are several best practices to follow to ensure your website remains user-friendly and optimized for search engines:

For Accessibility​

  1. Descriptive Link Text: Use clear, descriptive text for your links so users, especially those using screen readers, can understand the context of the link without needing additional information from the surrounding text. Avoid vague phrases like "click here" or "read more."

  2. Focus Indicators: Ensure that links have visible focus indicators, such as outlines or color changes, when navigated to via keyboard. This helps users with limited mobility or those who rely on keyboard navigation.

  3. Language Attribute: If the link leads to a page in a different language, use the hreflang attribute to specify the language. This isn't directly placed on the <a> tag but is important for user agents to understand the language change.

For SEO​

  1. rel="noopener": When using target="_blank" to open links in a new tab, add rel="noopener" to prevent the newly opened page from accessing the original page's window object. This is also a security best practice.

  2. rel="noreferrer": In addition to rel="noopener", you can use rel="noreferrer" to prevent the browser from sending the HTTP referrer header to the new page. This is useful for privacy reasons but may not always be desirable for SEO, as it also prevents referral data from being passed to analytics.

  3. rel="nofollow": Use rel="nofollow" for links to external sites that you do not want to endorse or pass link equity to, such as user-generated content or links within comments. This tells search engines not to follow these links for crawling and ranking purposes.

  4. target="_blank": This attribute opens the link in a new tab or window. While not directly an SEO factor, it can impact user experience and site engagement metrics, which are indirectly related to SEO. Be cautious in its use, as it can be disruptive to the user experience if overused.

  5. Accessible and SEO-friendly URL Structure: Ensure that the URLs you are linking to have a clear and SEO-friendly structure, indicating the content of the page, which can be beneficial for both users and search engines.

Example​

<a href="https://example.com" target="_blank" rel="noopener noreferrer" aria-label="Visit Example Site for more information">Visit Example</a>
  • aria-label provides an accessible name for the link, giving context to assistive technologies.
  • rel="noopener noreferrer" ensures security and privacy for the user.
  • The descriptive link text "Visit Example" helps both SEO (by providing context about the link's destination) and accessibility (by describing the action or destination of the link to users who rely on assistive technologies).