Technical SEO auditor and fixer. Runs Lighthouse/PageSpeed audits on websites or local dev servers, analyzes SEO/performance/accessibility scores, and automatically implements fixes for meta tags, structured data, Core Web Vitals, and accessibility issues.
AI-powered SEO optimization skill that audits websites and automatically implements fixes.
Use Roier SEO when:
Key features:
Use alternatives instead:
After installing the skill, install the audit dependencies:
cd ~/.claude/skills/roier-seo/scripts
npm install
For a live website:
node ~/.claude/skills/roier-seo/scripts/audit.js https://example.com
For a local dev server (must be running):
node ~/.claude/skills/roier-seo/scripts/audit.js http://localhost:3000
Output formats:
# JSON output (default, for programmatic use)
node ~/.claude/skills/roier-seo/scripts/audit.js https://example.com
# Human-readable summary
node ~/.claude/skills/roier-seo/scripts/audit.js https://example.com --output=summary
# Save to file
node ~/.claude/skills/roier-seo/scripts/audit.js https://example.com --save=results.json
The audit returns scores (0-100) for five categories:
| Category | Description | Weight |
|---|---|---|
| Performance | Page load speed, Core Web Vitals | High |
| Accessibility | WCAG compliance, screen reader support | High |
| Best Practices | Security, modern web standards | Medium |
| SEO | Search engine optimization, crawlability | High |
| PWA | Progressive Web App compliance | Low |
<!-- Bad -->
<title>Home</title>
<!-- Good -->
<title>Primary Keyword - Secondary Keyword | Brand Name</title>
Rules:
<meta name="description" content="Compelling description with keywords. 150-160 characters that encourages clicks from search results.">
Rules:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<html lang="en">
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Brand Name">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description">
<meta name="twitter:image" content="https://example.com/image.jpg">
<link rel="canonical" href="https://example.com/canonical-page">
<!-- Allow indexing (default) -->
<meta name="robots" content="index, follow">
<!-- Prevent indexing (for staging, admin pages) -->
<meta name="robots" content="noindex, nofollow">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "Site Name",
"url": "https://example.com",
"potentialAction": {
"@type": "SearchAction",
"target": "https://example.com/search?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Company Name",
"url": "https://example.com",
"logo": "https://example.com/logo.png",
"sameAs": [
"https://twitter.com/company",
"https://linkedin.com/company/company"
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{"@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com"},
{"@type": "ListItem", "position": 2, "name": "Category", "item": "https://example.com/category"},
{"@type": "ListItem", "position": 3, "name": "Page"}
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Article Title",
"author": {"@type": "Person", "name": "Author Name"},
"datePublished": "2024-01-15",
"dateModified": "2024-01-20",
"image": "https://example.com/article-image.jpg",
"publisher": {
"@type": "Organization",
"name": "Publisher Name",
"logo": {"@type": "ImageObject", "url": "https://example.com/logo.png"}
}
}
</script>
<!-- Add width/height to prevent CLS -->
<img src="image.jpg" alt="Description" width="800" height="600">
<!-- Add lazy loading -->
<img src="image.jpg" alt="Description" loading="lazy">
<!-- Use modern formats -->
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description">
</picture>
<!-- Preload critical fonts -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
@font-face {
font-family: 'Custom Font';
src: url('/fonts/custom.woff2') format('woff2');
font-display: swap;
}
<!-- Preconnect to critical third-party origins -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.example.com">
<!-- DNS prefetch for non-critical origins -->
<link rel="dns-prefetch" href="https://analytics.example.com">
<!-- Preload critical resources -->
<link rel="preload" href="/critical.css" as="style">
<!-- Good (descriptive) -->
<img src="photo.jpg" alt="Team members collaborating in the office">
<!-- Good (decorative) -->
<img src="decoration.jpg" alt="" role="presentation">
<label for="email">Email Address</label>
<input type="email" id="email" name="email">
<a href="#main-content" class="skip-link">Skip to main content</a>
<style>
.skip-link {
position: absolute;
left: -9999px;
}
.skip-link:focus {
left: 0;
top: 0;
z-index: 9999;
background: #000;
color: #fff;
padding: 8px 16px;
}
</style>
<!-- Icon button needs aria-label -->
<button aria-label="Close menu">
<svg>...</svg>
</button>
// app/layout.tsx
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: {
default: 'Site Name',
template: '%s | Site Name'
},
description: 'Site description',
openGraph: {
title: 'Site Name',
description: 'Site description',
url: 'https://example.com',
siteName: 'Site Name',
type: 'website',
},
}
import Head from 'next/head';
export default function Page() {
return (
<>
<Head>
<title>Page Title | Brand</title>
<meta name="description" content="Page description" />
<link rel="canonical" href="https://example.com/page" />
</Head>
<main>...</main>
</>
);
}
import { Helmet } from 'react-helmet';
function Page() {
return (
<>
<Helmet>
<title>Page Title | Brand</title>
<meta name="description" content="Page description" />
</Helmet>
<main>...</main>
</>
);
}
<script setup>
useHead({
title: 'Page Title | Brand',
meta: [
{ name: 'description', content: 'Page description' }
],
link: [
{ rel: 'canonical', href: 'https://example.com/page' }
]
})
</script>
<script setup>
useSeoMeta({
title: 'Page Title | Brand',
description: 'Page description',
ogTitle: 'Page Title',
ogDescription: 'Page description',
ogImage: 'https://example.com/og-image.jpg'
})
</script>
Run the audit script on the target URL:
node ~/.claude/skills/roier-seo/scripts/audit.js <URL>
Check package.json dependencies and framework-specific files.
Use the fix patterns above, adapted to the user's framework.
Run the audit again to verify improvements.
v1.0.0 (January 2026)