Deutsch
HTML, mobile & accessibility

Crawlable links

Also known as: a href

Crawlable links are links that a crawler can follow reliably. For Google these are <a> elements with an href attribute that holds a resolvable URL. Google states that it can only crawl a link if it is such an element.

What does it mean for SEO?

Google finds new URLs mainly through links. A menu that changes pages with a click handler but has no <a href> in the HTML shows the crawler no path to the target pages.

JavaScript itself is fine. Google’s JavaScript documentation says it is fine to inject links into the DOM, as long as they follow the best practices for crawlable links. An onclick on an <a href="/shoes"> is not a problem, because the href holds a real destination. For single-page apps, Google advises using the History API rather than URL fragments such as #/products. For image links, Google uses the alt text as anchor text.

Raw HTML and rendered HTML comparedLeft: the raw HTML as the server sends it, with an empty title and an empty div with the ID app. Right: the same document after rendering, where JavaScript has added the title, an H1 and two links. Google only sees this content and these links in the rendered HTML.RAW HTMLserver responseRENDERED HTMLDOM after JavaScriptJavaScript<head><title></title>empty</head><body><div id="app"></div>empty<script src="app.js"></body><head>+<title>Running shoes</title></head><body><div id="app">+<h1>Running shoes</h1>+<a href="/women/">Women</a>+<a href="/men/">Men</a></div><script src="app.js"></body>Schematic example. Anything JavaScript adds only exists in the rendered HTML.
The raw HTML of a JavaScript page lacks the title, heading and links. Google indexes the rendered HTML and parses it for links again. Source: Google Search Central: Understand the JavaScript SEO basics.

Example

HTML
<!-- crawlable -->
<a href="/products/shoes">Shoes</a>
<a href="/products/shoes" onclick="track()">Shoes</a>

<!-- not reliably crawlable -->
<span href="/products/shoes">Shoes</span>
<a onclick="goTo('/products/shoes')">Shoes</a>
<a href="javascript:goTo('shoes')">Shoes</a>

The examples follow Google’s link documentation.

Common mistakes

  • Buttons or div elements that navigate only through click handlers.
  • href="#" or javascript: placeholders for real pages.
  • Hash-based routing instead of the History API.

Sources

  1. SEO link best practices – Google Search Centraldevelopers.google.com
  2. JavaScript SEO basics – Google Search Centraldevelopers.google.com

Last updated: