{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "seo-audit-checklist", "title": "Seo Audit Checklist", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/seo-audit-checklist/seo-audit-checklist.component.ts", "content": "// Ahrefs and SEMrush style on-page SEO analyzer: meta tag auditor, Google SERP\n// snippet preview simulator, heading hierarchy validator, and Core Web Vitals\n// checklist. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n AlertCircle,\n AlertTriangle,\n Check,\n CheckCircle2,\n Code2,\n Copy,\n Eye,\n FileDown,\n FileText,\n Globe,\n Heading1,\n Info,\n Lock,\n LucideAngularModule,\n Monitor,\n RefreshCw,\n Search,\n Share2,\n ShieldCheck,\n Smartphone,\n Zap,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport {\n UiAccordionComponent,\n UiAccordionContentComponent,\n UiAccordionItemComponent,\n UiAccordionTriggerComponent,\n} from '@/ui/accordion/accordion.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport type CheckStatus = 'pass' | 'warning' | 'fail' | 'info'\n\nexport interface SeoCheckItem {\n id: string\n title: string\n description: string\n status: CheckStatus\n value?: string\n recommendation?: string\n tag?: string\n}\n\nexport interface SeoCategory {\n id: string\n name: string\n icon: 'meta' | 'headings' | 'opengraph' | 'technical'\n score: number\n checks: SeoCheckItem[]\n}\n\nexport interface CoreVitalMetric {\n name: string\n label: string\n value: string\n status: 'good' | 'needs-improvement' | 'poor'\n target: string\n}\n\nconst defaultVitals: CoreVitalMetric[] = [\n { name: 'LCP', label: 'Largest Contentful Paint', value: '1.2s', status: 'good', target: '≤ 2.5s' },\n { name: 'FID', label: 'First Input Delay', value: '12ms', status: 'good', target: '≤ 100ms' },\n { name: 'CLS', label: 'Cumulative Layout Shift', value: '0.01', status: 'good', target: '≤ 0.1' },\n]\n\nconst defaultCategories: SeoCategory[] = [\n {\n id: 'meta-tags',\n name: 'Title & Meta Description',\n icon: 'meta',\n score: 100,\n checks: [\n {\n id: 'title-length',\n title: 'Title Tag Length & Structure',\n description: 'Page title is 58 characters (optimal range: 50–60 characters). Fully visible in 98% of SERPs.',\n status: 'pass',\n value: 'UIPKGE — Dual-Framework UI Registry for Vue & React',\n tag: '58 / 60 chars',\n },\n {\n id: 'meta-desc',\n title: 'Meta Description Length',\n description:\n 'Meta description is 152 characters (optimal range: 140–160 characters). Rich keyword density without truncation.',\n status: 'pass',\n value:\n 'Explore high-quality accessible Vue, React, and Angular UI components and blocks built with Tailwind CSS v4 and Lucide icons.',\n tag: '152 / 160 chars',\n },\n {\n id: 'canonical-url',\n title: 'Canonical URL Tag',\n description: 'Self-referencing canonical URL tag prevents duplicate content indexing across query variants.',\n status: 'pass',\n value: '',\n tag: 'Present',\n },\n {\n id: 'meta-robots',\n title: 'Meta Robots Directives',\n description: 'Directives instruct crawlers to index the document and follow embedded hyperlinks.',\n status: 'pass',\n value: 'index, follow, max-image-preview:large, max-snippet:-1',\n tag: 'Index, Follow',\n },\n ],\n },\n {\n id: 'headings',\n name: 'Heading Hierarchy & Structure',\n icon: 'headings',\n score: 100,\n checks: [\n {\n id: 'h1-presence',\n title: 'Single Primary H1 Tag',\n description: 'Exactly 1 H1 tag detected containing target search terms and establishing clear topic authority.',\n status: 'pass',\n value: '

UIPKGE Component & Block Registry

',\n tag: '1 H1 Tag',\n },\n {\n id: 'h2-distribution',\n title: 'H2 Section Organization',\n description: '6 H2 tags logically divide major categories (Primitives, Blocks, Forms, Marketing, Feedback).',\n status: 'pass',\n value: '6 H2 tags · 0 skipped levels',\n tag: '6 H2 Tags',\n },\n {\n id: 'h3-nesting',\n title: 'H3 Subsection Hierarchy',\n description: '12 H3 tags cleanly nested under parent H2 sections without skipping hierarchical levels.',\n status: 'pass',\n value: '12 H3 tags · Valid tree hierarchy',\n tag: '12 H3 Tags',\n },\n {\n id: 'content-depth',\n title: 'Content Word Count & Substance',\n description: '1,840 words detected with strong semantic depth for component discovery.',\n status: 'pass',\n value: '1,840 words · 4.2 min read',\n tag: 'Substantial',\n },\n ],\n },\n {\n id: 'opengraph',\n name: 'OpenGraph & Social Share Cards',\n icon: 'opengraph',\n score: 100,\n checks: [\n {\n id: 'og-title-desc',\n title: 'OpenGraph Title & Description',\n description: 'Social graph tags are present and optimized for display across Twitter/X, LinkedIn, and Discord.',\n status: 'pass',\n value: 'og:title, og:description, og:type, og:url configured',\n tag: 'Configured',\n },\n {\n id: 'og-image',\n title: 'OpenGraph Social Banner Image',\n description:\n '1200 × 630px high-resolution banner image detected with crisp aspect ratio (1.91:1) and fast CDN delivery.',\n status: 'pass',\n value: 'https://uipkge.dev/og/components.png (1200x630 · 84 KB)',\n tag: '1200x630 px',\n },\n {\n id: 'twitter-card',\n title: 'Twitter / X Card Format',\n description: 'Card format explicitly set to summary_large_image for maximal feed visibility.',\n status: 'pass',\n value: 'twitter:card = summary_large_image',\n tag: 'Large Image',\n },\n ],\n },\n {\n id: 'technical',\n name: 'Performance, Images & Technical SEO',\n icon: 'technical',\n score: 85,\n checks: [\n {\n id: 'image-alt-tags',\n title: 'Image Alt Attributes',\n description:\n 'All 24 embedded images contain meaningful, non-empty alt text attributes for accessibility and image search.',\n status: 'pass',\n value: '24 / 24 images with valid alt text (100%)',\n tag: '24 / 24 Pass',\n },\n {\n id: 'broken-links',\n title: 'Crawlable Hyperlinks & 404 Errors',\n description: 'Crawled 142 internal and external links. 0 broken links or redirect loops detected.',\n status: 'pass',\n value: '142 links verified · 0 errors',\n tag: '0 Broken',\n },\n {\n id: 'ssl-security',\n title: 'SSL / HTTPS & Security Headers',\n description: 'Valid TLS 1.3 certificate with HSTS header enabled and automatic HTTP-to-HTTPS redirect.',\n status: 'pass',\n value: 'TLS 1.3 · HSTS Active · HTTP/2 Supported',\n tag: 'Secure',\n },\n {\n id: 'schema-markup',\n title: 'Schema.org Structured Data',\n description:\n 'No SoftwareApplication or Product JSON-LD schema detected. Structured data enables rich Google SERP snippet features.',\n status: 'warning',\n value: 'Missing schema.org/SoftwareApplication microdata',\n recommendation:\n 'Add JSON-LD script tag with SoftwareApplication schema to qualify for rich snippet search results.',\n tag: 'Missing Schema',\n },\n ],\n },\n]\n\nconst defaultOpenCategories = ['meta-tags', 'headings', 'opengraph', 'technical']\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-seo-audit-checklist, [ui-seo-audit-checklist]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiAccordionComponent,\n UiAccordionContentComponent,\n UiAccordionItemComponent,\n UiAccordionTriggerComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiInputComponent,\n UiProgressComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n \n
\n
\n
\n \n
\n
\n \n \n \n \n \n {{ score }} / 100\n ·\n Healthy Score\n
\n \n \n HTTP 200 OK\n \n \n \n Indexable\n \n
\n\n
\n

\n On-Page SEO Analyzer & Snippet Simulator\n

\n

\n {{ lastAudited }}\n

\n
\n
\n\n \n
\n \n \n Re-audit URL\n \n\n \n @if (!reportDownloaded()) {\n \n } @else {\n \n }\n {{ reportDownloaded() ? 'Report Exported!' : 'Download SEO Report' }}\n \n
\n
\n\n \n\n \n
\n
\n
\n \n
\n \n \n @if (copiedUrl()) {\n \n } @else {\n \n }\n {{ copiedUrl() ? 'Copied' : 'Copy' }}\n \n
\n \n \n Analyze Page\n \n
\n
\n
\n\n \n
\n \n
\n
\n
Meta Tags & Snippet
\n \n \n
\n
\n
\n
\n
100% Pass
\n Optimal\n
\n
\n \n

Title & description optimized

\n
\n \n 58 chars title\n ·\n 152 chars desc\n
\n
\n
\n\n \n
\n
\n
Core Web Vitals
\n \n \n
\n
\n
\n
\n
Good
\n 98/100\n
\n
\n \n

LCP 1.2s · FID 12ms · CLS 0.01

\n
\n \n Chrome UX Report\n ·\n Passed\n
\n \n \n\n \n
\n
\n
Mobile Usability
\n \n \n
\n
\n
\n
\n
100% Pass
\n Valid\n
\n
\n \n

Touch targets & viewport valid

\n
\n \n 48px tap targets\n ·\n 0 horizontal scroll\n
\n \n \n\n \n
\n
\n
Indexability & Crawl
\n \n \n
\n
\n
\n
\n
Valid
\n Indexed\n
\n
\n \n

Canonical URL present & sitemap verified

\n
\n \n robots.txt allowed\n ·\n sitemap.xml\n
\n \n \n \n\n \n
\n
\n
\n
\n
Google Search Result Snippet Preview
\n \n \n Live SERP Simulator\n \n
\n
\n Simulate how your meta tags, title, and URL render in Google SERPs on desktop vs. mobile.\n
\n
\n\n \n
\n \n \n
\n
\n\n
\n \n
\n \n
\n \n ⚡\n
\n
\n
\n uipkge.dev\n ›\n vue › components\n
\n

{{ urlValue() }}

\n
\n
\n\n \n
\n \n {{ titleTag }}\n \n\n \n

\n Aug 20, 2026 — \n Explore high-quality accessible\n Vue and\n React\n UI components and blocks built with\n Tailwind CSS v4, Reka UI, and Lucide icons.\n Unbundled registry with full source code ownership.\n

\n
\n\n \n
\n ★ 4.9 · 1.4k GitHub Stars \n Free & Open Source \n Vue 3.5 + React 19 \n
\n
\n\n \n
\n
\n
\n Title Tag Budget:\n 58 / 60 chars\n
\n \n

Optimal (485px / 600px max SERP width)

\n
\n\n
\n
\n Meta Description:\n 152 / 160 chars\n
\n \n

Optimal (890px / 960px max SERP width)

\n
\n\n
\n
\n Truncation Risk:\n 0% Truncation\n
\n

Fully visible on both desktop & mobile Google viewports.

\n
\n
\n
\n \n\n \n
\n
\n
\n
\n \n \n
\n
\n
\n

\n Actionable Recommendation: Add Schema.org JSON-LD Structured Data\n

\n High Impact\n
\n

\n Adding\n SoftwareApplication\n or\n TechArticle\n structured data enables Google Rich Snippets, rating stars, and knowledge graph carousels.\n

\n\n \n \n
\n Recommended JSON-LD Block\n \n @if (copiedSchema()) {\n \n } @else {\n \n }\n {{ copiedSchema() ? 'Copied' : 'Copy JSON-LD' }}\n \n
\n 
{{\n                    jsonLdSnippet\n                  }}
\n
\n
\n
\n\n \n \n Copy Schema Snippet\n \n
\n \n \n\n \n
\n
\n
\n

Detailed On-Page Audit Checklist

\n

\n Complete verification of on-page meta tags, heading semantics, social cards, and technical crawlability.\n

\n
\n\n \n
\n \n All Checks ({{ totalCount() }})\n \n \n Passed ({{ passCount() }})\n \n \n Warnings ({{ warningCount() }})\n \n
\n
\n\n \n \n @for (category of filteredCategories(); track category.id) {\n \n
\n \n\n \n
\n @for (check of category.checks; track check.id) {\n
\n
\n
\n
\n @if (check.status === 'pass') {\n \n } @else if (check.status === 'warning') {\n \n } @else {\n \n }\n

{{ check.title }}

\n
\n

{{ check.description }}

\n
\n\n
\n @if (check.tag) {\n \n {{ check.tag }}\n \n }\n \n {{ check.status }}\n \n
\n
\n\n \n @if (check.value) {\n \n {{ check.value }}\n
\n }\n\n \n @if (check.recommendation) {\n \n \n

{{ check.recommendation }}

\n
\n }\n \n }\n \n \n \n }\n \n \n \n `,\n})\nexport class UiSeoAuditChecklistComponent {\n protected readonly AlertCircle = AlertCircle\n protected readonly AlertTriangle = AlertTriangle\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Code2 = Code2\n protected readonly Copy = Copy\n protected readonly Eye = Eye\n protected readonly FileDown = FileDown\n protected readonly FileText = FileText\n protected readonly Globe = Globe\n protected readonly Heading1 = Heading1\n protected readonly Info = Info\n protected readonly Lock = Lock\n protected readonly Monitor = Monitor\n protected readonly RefreshCw = RefreshCw\n protected readonly Search = Search\n protected readonly Share2 = Share2\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Smartphone = Smartphone\n protected readonly Zap = Zap\n\n protected readonly openCategories = defaultOpenCategories\n protected readonly jsonLdSnippet = `{\n \"@context\": \"https://schema.org\",\n \"@type\": \"SoftwareApplication\",\n \"name\": \"UIPKGE\",\n \"applicationCategory\": \"DeveloperApplication\",\n \"operatingSystem\": \"Web\",\n \"offers\": { \"@type\": \"Offer\", \"price\": \"0\", \"priceCurrency\": \"USD\" }\n}`\n\n @Input() set url(v: string | undefined) {\n const next = v ?? 'https://uipkge.dev/vue/components'\n this.urlValue.set(next)\n this.currentUrl.set(next)\n }\n @Input() score = 94\n @Input() lastAudited = 'Audit completed in 640ms · Cached 2m ago'\n @Input() titleTag = 'UIPKGE — Dual-Framework UI Registry for Vue & React'\n @Input() metaDescription =\n 'Explore high-quality accessible Vue, React, and Angular UI components and blocks built with Tailwind CSS v4 and Lucide icons. Unbundled registry with full source code ownership.'\n @Input() h1Tag = 'UIPKGE Component & Block Registry'\n @Input() ogImageUrl = 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=1200&auto=format&fit=crop&q=80'\n @Input() set categories(v: SeoCategory[] | undefined) {\n this.categoriesSig.set(v ?? defaultCategories)\n }\n @Input() vitals: CoreVitalMetric[] = defaultVitals\n @Input('class') className?: string\n\n readonly urlValue = signal('https://uipkge.dev/vue/components')\n readonly categoriesSig = signal(defaultCategories)\n\n readonly currentUrl = signal('https://uipkge.dev/vue/components')\n readonly isAuditing = signal(false)\n readonly copiedSchema = signal(false)\n readonly copiedUrl = signal(false)\n readonly reportDownloaded = signal(false)\n readonly previewDevice = signal<'desktop' | 'mobile'>('desktop')\n readonly activeStatusFilter = signal<'all' | 'pass' | 'warning'>('all')\n\n readonly allChecks = computed(() => this.categoriesSig().flatMap((cat) => cat.checks))\n readonly passCount = computed(() => this.allChecks().filter((c) => c.status === 'pass').length)\n readonly warningCount = computed(() => this.allChecks().filter((c) => c.status === 'warning').length)\n readonly totalCount = computed(() => this.allChecks().length)\n\n readonly filteredCategories = computed(() => {\n const filter = this.activeStatusFilter()\n const cats = this.categoriesSig()\n if (filter === 'all') return cats\n return cats\n .map((cat) => ({ ...cat, checks: cat.checks.filter((check) => check.status === filter) }))\n .filter((cat) => cat.checks.length > 0)\n })\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n get reauditIconClass(): string {\n return cn('size-3.5', this.isAuditing() && 'animate-spin')\n }\n\n get serpBoxClass(): string {\n return cn(\n 'border-border/80 bg-background mx-auto rounded-xl border p-4 shadow-xs transition-colors duration-200 sm:p-5',\n this.previewDevice() === 'mobile' ? 'border-border max-w-md' : 'w-full',\n )\n }\n\n deviceButtonClass(device: 'desktop' | 'mobile'): string {\n return cn(\n 'flex min-h-6 items-center gap-1.5 rounded-md px-3 py-1 text-xs font-medium transition-colors',\n this.previewDevice() === device\n ? 'bg-background text-foreground shadow-xs'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n filterClass(filter: 'all' | 'pass' | 'warning'): string {\n const active = this.activeStatusFilter() === filter\n const activeColor =\n filter === 'pass'\n ? 'bg-muted text-success font-medium'\n : filter === 'warning'\n ? 'bg-muted text-warning font-medium'\n : 'bg-muted text-foreground font-medium'\n return cn('h-8 px-2.5 text-xs', active ? activeColor : 'text-muted-foreground')\n }\n\n categoryIcon(icon: SeoCategory['icon']): typeof FileText {\n if (icon === 'headings') return Heading1\n if (icon === 'opengraph') return Share2\n if (icon === 'technical') return Lock\n return FileText\n }\n\n statusBadgeVariant(status: CheckStatus): 'success' | 'warning' | 'destructive' | 'info' {\n if (status === 'warning') return 'warning'\n if (status === 'fail') return 'destructive'\n if (status === 'info') return 'info'\n return 'success'\n }\n\n passingCount(category: SeoCategory): number {\n return category.checks.filter((c) => c.status === 'pass').length\n }\n\n handleReaudit(): void {\n this.isAuditing.set(true)\n setTimeout(() => this.isAuditing.set(false), 500)\n }\n\n handleCopySchema(): void {\n try {\n void navigator.clipboard.writeText(this.jsonLdSnippet)\n } catch {\n // Clipboard unavailable: still flip the label.\n }\n this.copiedSchema.set(true)\n setTimeout(() => this.copiedSchema.set(false), 1800)\n }\n\n handleCopyUrl(): void {\n try {\n void navigator.clipboard.writeText(this.currentUrl())\n } catch {\n // Clipboard unavailable: still flip the label.\n }\n this.copiedUrl.set(true)\n setTimeout(() => this.copiedUrl.set(false), 1800)\n }\n\n handleDownloadReport(): void {\n this.reportDownloaded.set(true)\n setTimeout(() => this.reportDownloaded.set(false), 2000)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/seo-audit-checklist/seo-audit-checklist.component.ts" }, { "path": "packages/registry-angular/blocks/seo-audit-checklist/index.ts", "content": "export {\n UiSeoAuditChecklistComponent,\n type CheckStatus,\n type SeoCheckItem,\n type SeoCategory,\n type CoreVitalMetric,\n} from './seo-audit-checklist.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/seo-audit-checklist/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/accordion.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/separator.json" ], "description": "Ahrefs and SEMrush style on-page SEO analyzer, meta tag auditor, Google SERP snippet preview simulator, heading hierarchy validator, and Core Web Vitals checklist.", "categories": [ "marketing", "dashboard" ] }