Has a Link with an Empty Href Attribute: How to Fix It

What it means

This issue flags any anchor element on your page where the href attribute exists but is empty, such as <a href=""> or an href that contains only spaces. According to the HTML specification, an empty href resolves to the current document. In plain terms, the link points right back to the page it sits on. To a visitor it may look like a normal link, but clicking it simply reloads the same URL rather than going anywhere useful.

Crawl tools such as Screaming Frog and Sitebulb surface this because Google can only follow a link reliably when it is an anchor element with a populated href attribute. An empty value leaves the crawler with a link that has no meaningful destination, which is almost always a mistake rather than an intentional design choice.

Why an empty href hurts

It creates a self-link

Because an empty href resolves to the current page, every one of these anchors becomes an internal link from the page to itself. Self-links add no navigational value and dilute the internal linking signals you actually want crawlers to follow. Instead of passing equity toward a deeper page that needs ranking support, the link does nothing.

It confuses crawlers

Search engines parse anchors to discover and prioritise pages. Empty href links give them no target to extract, so they cannot contribute to crawl discovery or distribute link signals. When these appear in bulk, often from a templating bug, they add noise to your link graph and make it harder for both crawlers and audit tools to see the genuine structure of your site.

It breaks accessibility

An anchor with an empty href can appear broken to users and produces confusing announcements in screen readers, which expect a link to lead somewhere. The MDN documentation is explicit that anchors should not be abused as fake buttons. If an element performs an action rather than navigating, a real link is the wrong semantic element and assistive technology users pay the price.

Common causes

Empty href attributes rarely get typed on purpose. They usually creep in through one of a few patterns:

JavaScript placeholders. Developers frequently create an anchor as a hook for a click handler, intending JavaScript to do the work, and leave the href blank or set it to a stand-in value. The link looks clickable but has no real destination.

CMS and template bugs. A theme or page builder loops over items and writes href="{{ url }}", but when the URL field is empty for a given record the attribute renders as an empty string. One faulty template can produce hundreds of empty links across a site.

Leftover scaffolding. Placeholder markup copied from a starter template or a design mockup sometimes ships to production with the href never filled in.

How to diagnose

Run a crawl with Screaming Frog or Sitebulb and look for the empty href report, which lists every affected URL and the source page. Export that list so you can group the offenders. If many empty links trace back to the same template region, such as a header, footer, or a repeated card component, you are almost certainly looking at a single templating bug rather than scattered manual errors. You can also inspect the rendered HTML in your browser developer tools and search the source for href="" to confirm where the blank values are being written.

How to fix it

The right fix depends on what the element was meant to do. Decide whether each anchor is navigation or an action.

If it triggers an action, use a button

Links are for going somewhere; buttons are for doing something. If the element opens a menu, toggles content, or submits a form, it should be a button element, which is keyboard accessible and correctly announced by screen readers.

<a href="">Open menu</a>

<button type="button">Open menu</button>

If it is navigation, use a real URL

When the anchor is genuinely a link, populate the href with the real destination so crawlers can follow it and equity flows where you intend.

<a href="">View pricing</a>

<a href="/pricing/">View pricing</a>

If it has no purpose, remove it

If the anchor wraps plain text or a placeholder that should never have been a link, strip the anchor and keep the content. For template-driven cases, guard the markup so the anchor only renders when a URL is present.

<a href="{{ url }}">{{ title }}</a>

{% if url %}<a href="{{ url }}">{{ title }}</a>{% else %}<span>{{ title }}</span>{% endif %}

Common mistakes

Do not simply swap the empty href for href="#" or href="javascript:void(0)". Those values still convey the wrong semantics, behave oddly when a user tries to copy, bookmark, or open the link in a new tab, and do not solve the underlying problem. They trade one bad pattern for another.

Avoid fixing each reported URL one by one when the source is a shared template. Patch the template once and the entire batch of empty links disappears. Finally, do not leave a click handler attached to a now-removed anchor without re-pointing it at the correct button, or you will create a non-functional control.

Frequently asked questions