SeoPageList

Code

import { SeoPageList, type SeoPageRow } from "@fadymondy/nasaq/web";export function Audit({ pages }: { pages: SeoPageRow[] }) {  return <SeoPageList pages={pages} onOpen={(p) => console.log(p.url)} onRecrawl={async (p) => {}} />;}

SEO · beta

Live examples and controls: SeoPageList in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/seo-pages.json

SeoPageList lists crawled pages with a 0 to 100 SEO score, the number of open issues, index status and the three Core Web Vitals. Opening a page shows SeoIssueChecklist: each issue has a severity, a plain explanation and a fix hint, and can be ticked off as fixed, which raises the score at once. The list is a DataTable, so sorting, search, paging and row actions come with it.

When to useCopy Anchor Link

• A site audit screen after a crawl.
• A marketing dashboard that needs to show which pages need work first.

When not to useCopy Anchor Link

• One page's search snippet: use SeoPreview.
• Clicks and impressions: use SearchPerformanceTable.

ImportCopy Anchor Link

import { SeoIssueChecklist, SeoPageList } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

import { SeoPageList, type SeoPageRow } from "@fadymondy/nasaq/web";

export function Audit({ pages }: { pages: SeoPageRow[] }) {
  return <SeoPageList pages={pages} onOpen={(p) => console.log(p.url)} onRecrawl={async (p) => {}} />;
}

AnatomyCopy Anchor Link

SeoPageList          data-slot="seo-page-list"   (Card + DataTable)
  toolbar            search, index status facet
  row                URL, score meter, issues, index status, LCP, INP, CLS, crawled
SeoIssueChecklist    data-slot="seo-issue-checklist"
  issue              checkbox, severity, title, fix hint (collapsible)

APICopy Anchor Link

SeoPageListCopy Anchor Link

SeoPageRowCopy Anchor Link

{ id, url, title?, indexStatus: "indexed" | "not-indexed" | "blocked" | "pending", issues: SeoIssue[], vitals?: { LCP?, INP?, CLS? }, lastCrawled? }.

SeoIssueChecklistCopy Anchor Link

HelpersCopy Anchor Link

seoScore(issues) is 100 minus the weighted open issues (SEVERITY_WEIGHT), never below 0. siteScore(pages) averages it. scoreBand(score) gives good, fair or poor. openIssues, issueCounts and sortIssues (most severe first) work on SeoIssue[].

ExamplesCopy Anchor Link

A checklist next to the preview:

import { SeoIssueChecklist } from "@fadymondy/nasaq/web";

<SeoIssueChecklist url="https://example.com/pricing" issues={issues} onToggleFixed={async (issue, fixed) => { await save(issue.id, fixed); }} />;

Your own issue codes:

import { SeoIssueChecklist } from "@fadymondy/nasaq/web";

<SeoIssueChecklist issues={issues} catalog={{ "missing-hreflang": { severity: "warning", en: { title: "Missing hreflang", why: "Search engines cannot match language versions.", fix: "Add an hreflang link per language." }, ar: { title: "hreflang مفقود", why: "لا تستطيع محركات البحث مطابقة نسخ اللغات.", fix: "أضف رابط hreflang لكل لغة." } } }} />;

AccessibilityCopy Anchor Link

The score is a meter with a spoken value and a band word; severity is a word plus an icon, not colour alone.

RTL & i18nCopy Anchor Link

URLs are left-to-right inside the RTL layout. Numbers use Latin digits. Built-in English and Arabic; issue titles in SEO_ISSUE_CATALOG are localised, and labels overrides the rest.

Styling & tokensCopy Anchor Link

Score bands use the success, warning and danger tokens. All spacing is logical.

Do / Don'tCopy Anchor Link

• Do sort worst first by default; teams fix the top of the list.
• Do give every issue a fix hint.
• Don't treat the score as a ranking prediction: it is a to-do measure.

RelatedCopy Anchor Link

• SeoPreview
• KeywordTracker

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-seo-seo-pages--docs