Highlight Links on a Page

## Why it matters

A link audit table is abstract. Seeing the actual links on the page is concrete. Toggle highlight on and you spot patterns instantly: the homepage linked 15 times in the footer (redundant). The entire sidebar nofollowed (oops). One outbound link to a vendor (is it an authority boost or a waste?). The visual map beats the table every time.

For accessibility audits too, you can check whether link text makes sense on screen, or whether an image link has been labelled at all. The visual approach catches what a spreadsheet hides.

## How it works

Highlighting doesn't rewrite the page. It toggles a CSS class on each link and injects one stylesheet. Every <a> element gets coloured by its type:

• Internal links (same registrable domain) get one colour, because they share authority within your site.
• External links get another, because they point elsewhere.
• Nofollow links get a third, because they stop authority flow and are invisible to ranking.
• Other links (mailto, tel, javascript) don't crawl at all, so they get a fourth colour or are dimmed.

When you toggle off, nothing remains. No DOM rewrites, no residual classes, no traces. The page looks untouched.

## What does not matter

Highlighting doesn't check whether a link is broken. The colour scheme is visual only; it doesn't change the page's actual link behaviour. And whilst the colours help spot patterns, they can't find semantic errors in your anchor text or fix over-linking. That's where Scalpel Links' audit table helps: highlight shows you where the links are; the table tells you what they say.

The colours are also not customisable. This keeps things simple and consistent, so you spot the same patterns every time you visit a page.

## Code example

<!-- Before highlighting, a page looks normal -->
<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="https://external.com">Partner</a>
  <a href="/docs" rel="nofollow">Docs</a>
</nav>

<!-- After highlighting is toggled on, each link has a style applied -->
<nav>
  <a href="/" class="scalpel-highlight scalpel-internal">Home</a>
  <a href="/about" class="scalpel-highlight scalpel-internal">About</a>
  <a href="https://external.com" class="scalpel-highlight scalpel-external">Partner</a>
  <a href="/docs" class="scalpel-highlight scalpel-nofollow">Docs</a>
</nav>

<!-- The injected stylesheet colours each class -->
<style>
.scalpel-internal { outline: 2px solid #4CAF50; }
.scalpel-external { outline: 2px solid #2196F3; }
.scalpel-nofollow { outline: 2px solid #FF9800; }
</style>
Copy

## How Scalpel Links shows it

In Scalpel Links, open the popup on any page and click the highlight toggle. Every link on the page gets an outline and colour. The same colours appear in the table's Type column so you can match what you see on screen to the audit. Toggle off to clear all highlighting instantly.