Roier SEO - Technical SEO Auditor & Fixer
AI-powered SEO optimization skill that audits websites and automatically implements fixes.
When to use this skill
Use Roier SEO when:
User asks to "audit my site" or "check SEO" User wants to "improve performance" or "fix SEO issues" User mentions "lighthouse", "pagespeed", or "core web vitals" User wants to add/fix meta tags, structured data, or accessibility User has a local dev server and wants SEO analysis
Key features:
Full Audits: Lighthouse audits on any URL (localhost or live) Auto-Fix: Implements fixes directly in the codebase Framework Aware: Detects Next.js, React, Vue, Nuxt, plain HTML Core Web Vitals: Track FCP, LCP, TBT, CLS metrics Structured Data: JSON-LD schemas for rich snippets Accessibility: WCAG compliance fixes
Use alternatives instead:
React Best Practices: For general React performance optimization Manual Lighthouse: For one-off audits without auto-fixing Quick start Installation
After installing the skill, install the audit dependencies:
cd ~/.claude/skills/roier-seo/scripts npm install
Running an Audit
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
Audit categories
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 Technical SEO fix patterns Meta tags (HTML Head) Title tag
<title>Home</title>
<title>Primary Keyword - Secondary Keyword | Brand Name</title>
Rules:
50-60 characters max Include primary keyword near the beginning Unique per page Include brand name at end Meta description <meta name="description" content="Compelling description with keywords. 150-160 characters that encourages clicks from search results.">
Rules:
150-160 characters Include primary and secondary keywords naturally Compelling call-to-action Unique per page Essential meta tags <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
<html lang="en"> Open Graph tags (social sharing) <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"> Twitter Card tags <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"> Canonical URL <link rel="canonical" href="https://example.com/canonical-page"> Robots meta <meta name="robots" content="index, follow"> <meta name="robots" content="noindex, nofollow"> Structured data (JSON-LD) Website schema <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> Organization schema <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> BreadcrumbList schema <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> Article schema (for blog posts) <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> Performance optimizations Image optimization
Color contrast
4.5:1 contrast ratio for normal text
3:1 contrast ratio for large text (18px+ or 14px+ bold)
Form labels
Skip link
Skip to main content
<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>
Button accessibility
Framework-specific patterns
Next.js (App Router)
// 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',
},
}
Next.js (Pages Router)
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>