# BacklinkMonitor > Backlink monitoring: new, lost and toxic links, a gained and lost chart, referring domains, and disavow or mark-safe actions. Source: https://docs.nasaqui.com/components/backlink-monitor ## Install ```bash npx shadcn@latest add https://docs.nasaqui.com/r/backlink-monitor.json ``` BacklinkMonitor shows who links to you and how that changes. Summary tiles count links, referring domains, new this week, lost and toxic. A chart plots links gained and lost per day. The table can be filtered by status (new, active, lost, toxic), and toxic links can be disavowed in bulk or marked safe one by one. ## When to use - The link profile part of an SEO dashboard. - Alerting a team that a valuable link was lost or a spammy one appeared. ## When not to use - Ranking positions: use [`KeywordTracker`](https://docs.nasaqui.com/components/keyword-tracker). ## Import ```tsx import { BacklinkMonitor } from "@fadymondy/nasaq/web"; ``` ## Quick start ```tsx import { type Backlink, BacklinkMonitor } from "@fadymondy/nasaq/web"; export function Links({ links }: { links: Backlink[] }) { return { await api.disavow(ids); }} onMarkSafe={async (id) => { await api.safe(id); }} />; } ``` ## Anatomy ``` BacklinkMonitor data-slot="backlink-monitor" MetricTiles links, domains, new, lost, toxic TimeSeriesPanel gained and lost per day DataTable source, anchor, target, DR, spam score, first seen, status status facet, bulk Disavow ``` ## API ### BacklinkMonitor | Prop | Type | Default | Description | | --- | --- | --- | --- | | `links` | `Backlink[]` | required | All links, including lost ones. | | `onDisavow` | `(ids: string[]) => Promise` | none | Shows the Disavow action. | | `onMarkSafe` | `(id: string) => Promise<...>` | none | Shows Mark safe on flagged links. | | `now` | `number` | `Date.now()` | Reference time. Pass a fixed value in demos and tests. | | `days` | `number` | `30` | Days on the chart. | | `title / description` | `ReactNode` | built-in | Header. | | `pageSize` | `number` | `8` | Rows per page. | | `loading / error / onRetry` | | none | States. | | `className / labels` | | none | Classes; `Partial` strings. | ### Backlink `{ id, sourceUrl, targetUrl, anchor, domainRating, spamScore, firstSeen, lostAt?, followed?, disavowed? }`. Dates are ISO strings. ### Helpers - `backlinkStatus(link, now)` gives `lost`, `new` (first seen within `NEW_LINK_DAYS`, 7) or `active`; lost wins over new. - `isToxic(link)` is true from `TOXIC_SPAM_SCORE` (60) upward, unless disavowed. - `summarizeBacklinks(links, now)`, `referringDomains(links)` (live domains counted once, `www.` ignored), `domainOf(url)`, `dailyLinkSeries(links, days, now)` and `diffBacklinks(before, after)`. ## Examples Only the counts: ```tsx import { summarizeBacklinks } from "@fadymondy/nasaq/web"; const { total, toxic, lost } = summarizeBacklinks(links, Date.now()); ``` Read only: ```tsx import { BacklinkMonitor } from "@fadymondy/nasaq/web"; ; ``` ## Accessibility | Key | Action | | --- | --- | | Tab | Move through the filters, table and actions. | | Space | Select a row for the bulk action. | | Enter | Run the focused action. | Status is a word, not only a colour. The chart has a visually hidden data table through TimeSeriesPanel. ## RTL & i18n URLs and anchors that are Latin stay left-to-right; Arabic anchors use `dir="auto"`. Dates go through `DateTime`. Built-in English and Arabic strings. ## Styling & tokens New, lost and toxic use the info, warning and danger tokens. Chart series use `--nq-chart-*`. ## Do / Don't - Do confirm in your own flow before disavowing: this screen has no undo. - Do review toxic links before disavowing; a high spam score is a hint, not a verdict. - Don't pass `Date.now()` inside a render loop for `now`; pass a stable value. ## Related - [KeywordTracker](https://docs.nasaqui.com/components/keyword-tracker) - [TimeSeriesPanel](https://docs.nasaqui.com/components/time-series-panel) ## Lab https://docs.nasaqui.com/?path=/docs/components-seo-backlink-monitor--docs ## Code ### React ```tsx import { type Backlink, BacklinkMonitor } from "@fadymondy/nasaq/web"; export function Links({ links }: { links: Backlink[] }) { return { await api.disavow(ids); }} onMarkSafe={async (id) => { await api.safe(id); }} />; } ``` ### shadcn ```tsx import { type Backlink, BacklinkMonitor } from "@/components/ui/backlink-monitor"; export function Links({ links }: { links: Backlink[] }) { return { await api.disavow(ids); }} onMarkSafe={async (id) => { await api.safe(id); }} />; } ``` ### Vue ```vue ``` ### Blade ```blade @php $links = [ ['id' => 'l1', 'sourceUrl' => 'https://www.designweekly.com/news/rtl-systems', 'targetUrl' => '/', 'anchor' => 'Nasaq design system', 'domainRating' => 71, 'spamScore' => 8, 'firstSeen' => '2026-09-27'], ['id' => 'l2', 'sourceUrl' => 'https://blog.arabicdev.net/tools', 'targetUrl' => '/components', 'anchor' => 'RTL components', 'domainRating' => 54, 'spamScore' => 12, 'firstSeen' => '2026-08-10'], ['id' => 'l3', 'sourceUrl' => 'https://old-directory.org/listing/42', 'targetUrl' => '/', 'anchor' => '', 'domainRating' => 33, 'spamScore' => 21, 'firstSeen' => '2026-07-01', 'lostAt' => '2026-09-20'], ['id' => 'l4', 'sourceUrl' => 'https://cheap-pills-casino.biz/links', 'targetUrl' => '/', 'anchor' => 'buy now', 'domainRating' => 4, 'spamScore' => 82, 'firstSeen' => '2026-08-01'], ['id' => 'l5', 'sourceUrl' => 'https://spammy-seo.example/farm', 'targetUrl' => '/pricing', 'anchor' => 'best seo', 'domainRating' => 6, 'spamScore' => 90, 'firstSeen' => '2026-07-15', 'disavowed' => true], ['id' => 'l6', 'sourceUrl' => 'https://forum.webdesign.dev/t/259', 'targetUrl' => '/docs', 'anchor' => 'docs', 'domainRating' => 62, 'spamScore' => 5, 'firstSeen' => '2026-09-25', 'followed' => false], ]; @endphp ``` ### HTML + Alpine ```html
Referring domains
5
Live links
5
New this week
2
Lost links
1
Toxic links
1

Links gained and lost

Total 2

Backlink monitor

Links pointing at your site: what arrived, what disappeared and what looks harmful.
Actions
```