Showcase
Each example shows real output produced by astro-post-audit itself, from files in the project repository. Input on the left, output on the right.
A page with many problems
examples/report.ansiDetail: A page with many problems →<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="/photo.jpg">
<a href="/broken-page/"></a>
<a href="/about/?ref=nav">About</a>
<a href="/contact/">mehr</a>
<button></button>
<input type="text" name="email">
<h2>First heading</h2>
<h4>Skipped heading</h4>
</body>
</html>✖ astro-post-audit Errors: 14 Warnings: 2 Info: 4 Files: 1 Top issue rules: 3x links/broken 1x buttons/name-missing 1x canonical/missing 1x document/lang-missing 1x document/title-empty ● index.html (20) - Missing canonical tag [canonical/missing] at `head` Remedy: Set `site` in astro.config.mjs and render <link rel="canonical" href={new URL(Astro.url.pathname, Astro.site)} /> in your BaseHead component - Broken internal link '/broken-page/' -> '/broken-page/' (not found in dist) [links/broken] at `a[href='/broken-page/']` Remedy: Verify the route in `src/pages/` or your Content Collection slug. If the target was renamed, update the href. - Internal link contains query parameters: '/about/?ref=nav' [links/query-params] at `a[href='/about/?ref=nav']` Remedy: Remove query parameters from internal links to avoid duplicate content signals - Broken internal link '/about/?ref=nav' -> '/about/' (not found in dist) [links/broken] at `a[href='/about/?ref=nav']` Remedy: Verify the route in `src/pages/` or your Content Collection slug. If the target was renamed, update the href. - Broken internal link '/contact/' -> '/contact/' (not found in dist) [links/broken] at `a[href='/contact/']` Remedy: Verify the route in `src/pages/` or your Content Collection slug. If the target was renamed, update the href. - The <html> element has no lang attribute. [document/lang-missing] Remedy: The <html> element needs a valid lang attribute. - The <title> element is empty. [document/title-empty] Remedy: Every page needs a meaningful <title>. - The document has no viewport declaration. [zoom/viewport-missing] Remedy: A viewport must be present and must not prevent zooming. - The document has no h1 heading. [headings/h1-missing] Remedy: Headings form the outline; do not skip levels. - The image has no alt attribute. [images/alt-missing] Remedy: Informative images need descriptive alt text. - The input has no label. [forms/label-missing] Remedy: Every input needs an associated label. - The document has no main landmark. [landmarks/main-missing] Remedy: Landmarks structure the page for everyone who cannot see it. - The document has no navigation landmark. [landmarks/navigation-missing] (medium confidence) Remedy: Landmarks structure the page for everyone who cannot see it. - The document has no banner landmark. [landmarks/banner-missing] (medium confidence) Remedy: Landmarks structure the page for everyone who cannot see it. - The document has no contentinfo landmark. [landmarks/contentinfo-missing] (medium confidence) Remedy: Landmarks structure the page for everyone who cannot see it. - The link has no accessible name. [links/name-missing] Remedy: Every link needs a name that describes its target. - The button has no accessible name. [buttons/name-missing] Remedy: Every button needs a name that describes what it does. - The link text "mehr" says nothing about its target. [links/generic-name] (medium confidence) Remedy: Link text should say where it leads without the surrounding sentence. - Image missing width and height attribute (causes CLS): src='/photo.jpg' [images/missing-dimensions] at `img[src='/photo.jpg']` Remedy: Add explicit width and height attributes to prevent Cumulative Layout Shift. Use <Image> from astro:assets to get them automatically. - Image has no srcset (no responsive image markup): src='/photo.jpg' [images/missing-srcset] at `img[src='/photo.jpg']` Remedy: Use <Image> or <Picture> from astro:assets to generate responsive srcset automatically.
A clean site
examples/check.ansiDetail: A clean site →<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home - Example Site</title>
<meta name="description" content="Welcome to Example Site">
<link rel="canonical" href="https://example.com/">
</head>
<body>
<header>
<nav>
<a href="/about/">About Us</a>
<a href="/blog/">Our Blog</a>
</nav>
</header>
<main>
<h1>Welcome to Example Site</h1>
<img src="/hero.jpg" alt="Hero image showing a beautiful landscape" width="800" height="600">
<p>This is a well-structured page.</p>
<button>Click me</button>
</main>
<footer>
<a href="/about/">About</a>
</footer>
</body>
</html>ℹ astro-post-audit Errors: 0 Warnings: 0 Info: 1 Files: 3 ● index.html (1) [advisory] - Image has no srcset (no responsive image markup): src='/hero.jpg' [images/missing-srcset] at `img[src='/hero.jpg']` Remedy: Use <Image> or <Picture> from astro:assets to generate responsive srcset automatically.
Only new findings with a baseline
examples/baseline.ansiDetail: Only new findings with a baseline →<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>This is an extremely long title that exceeds the recommended sixty character limit for search engine results pages and should trigger a warning</title>
<meta name="description" content="This is an extremely long meta description that is well over the recommended one hundred and sixty character limit that search engines typically display in their results pages and should definitely trigger a length warning in our checker tool">
<link rel="canonical" href="https://example.com/long-title/">
</head>
<body>
<h1>Long Title Page</h1>
</body>
</html>✖ astro-post-audit Errors: 1 Warnings: 2 Info: 3 Files: 4 ● long-title.html (6) - The document has no main landmark. [landmarks/main-missing] Remedy: Landmarks structure the page for everyone who cannot see it. - The document has no navigation landmark. [landmarks/navigation-missing] (medium confidence) Remedy: Landmarks structure the page for everyone who cannot see it. - The document has no banner landmark. [landmarks/banner-missing] (medium confidence) Remedy: Landmarks structure the page for everyone who cannot see it. - The document has no contentinfo landmark. [landmarks/contentinfo-missing] (medium confidence) Remedy: Landmarks structure the page for everyone who cannot see it. - Title is 143 chars (recommended max: 60) [html/title-too-long] at `title` Remedy: Shorten the title for better display in search results - Meta description is 242 chars (recommended max: 160) [html/meta-description-too-long] at `meta[name='description']` Remedy: Shorten the description for better display in search results
Verbose progress
examples/progress.ansiDetail: Verbose progress →postAudit({ progress: 'verbose' }) Auditing 14 pages…
seo 5 finding(s) 0ms
links 5 finding(s) 0ms
a11y_core 70 finding(s) 0ms
html_basics 2 finding(s) 0ms
sitemap 0 finding(s) 0ms
robots_txt 0 finding(s) 0ms
assets 0 finding(s) 0ms
opengraph 0 finding(s) 0ms
structured_data 0 finding(s) 0ms
hreflang 0 finding(s) 0ms
security 3 finding(s) 0ms
content_quality 0 finding(s) 0ms
content_style 0 finding(s) 0ms
c2pa 0 finding(s) 0ms
i18n_audit 0 finding(s) 0ms
crawl_budget 0 finding(s) 0ms
css_architecture 0 finding(s) 0ms
render_blocking 0 finding(s) 0ms
privacy_security 0 finding(s) 0ms
structured_data_graph 0 finding(s) 0ms
golive 0 finding(s) 0ms
external_links 0 finding(s) 0ms
images 15 finding(s) 0ms
ai_visibility 0 finding(s) 0ms
ux_heuristics 0 finding(s) 0ms
fonts 0 finding(s) 0ms
view_transitions 0 finding(s) 0ms
redirects 0 finding(s) 0ms
js_bloat 0 finding(s) 0ms
content_sync 0 finding(s) 0ms
html_validation 0 finding(s) 0ms
source_analysis 0 finding(s) 0ms