anchor-href-lighthouse-audit-draft-explanation.md

A crawler is a search engine tool which finds webpages to navigate through. Search engines can discover pages more easily when the href attribute of an anchor element is present, and contains a crawlable hyperlink.

How the Lighthouse link text audit fails

Lighthouse flags anchor elements with uncrawlable hyperlinks:

<insert screenshot here>

Lighthouse flags the following anchor elements as being uncrawlable:

• <a>An anchor element without a href attribute</a>
• <a href>An anchor element with a href attribute that has no attribute value</a>
• <a href="">An anchor element which has an empty string href attribute value</a>
• <a href="file:///image.png">An anchor element with file URI for the href attribute value</a>
• <a href="#">An anchor element with a single hash symbol as the href attribute value</a>
• <a href="javascript:void(0)">An anchor element with a JavaScript URI for the href attribute value</a>

How to fix problems with uncrawlable hyperlinks

Use a hyperlink which points to a navigable resource

Examples include:

• <a href="https://example.com">
• <a href="/relative-link">
• <a href="#contact-us">

Don't rely on JavaScript for anchor elements

A search engine crawler may not always execute JavaScript event listeners, so ensure anchor elements do not require JavaScript to function correctly. Instead of markup such as:

• <a onclick="purchaseItem();">

Consider using an alternative HTML element such as a <button> element.

Avoid named anchors with the name attribute

The name attribute on the a element is obsolete. Consider putting an id attribute on the nearest container instead.

Instead of using a name attribute on an anchor element: <a name="top-of-page">, you can instead use an ID attribute which can be linked to as normal:

<header id="top-of-page">...</header>
<a href="#top-of-page">Back to top</a>

Resources

• Make your links crawlable
• Source code for the anchor href audit - this link needs updating when the pull request is merged