SEO patterns, conventions, and audit for web applications. Use when implementing meta tags, structured data, Core Web Vitals, sitemaps, Open Graph, auditing SEO, or optimizing pages for search engines. Triggers on "audit SEO", "check SEO", "review SEO", or tasks involving search optimization, schema markup, or social sharing meta tags.
SEO patterns, conventions, and audit for web applications. Use when implementing meta tags, structured data, Core Web Vitals, sitemaps, Open Graph, auditing SEO, or optimizing pages for search engines. Triggers on "audit SEO", "check SEO", "review SEO", or tasks involving search optimization, schema markup, or social sharing meta tags.
license
MIT
metadata
{"author":"agent-skills","version":"1.2.0"}
SEO Best Practices
Comprehensive SEO patterns for web applications built with React and Laravel. Contains 31 rules across 8 categories covering Core Web Vitals, technical SEO, structured data, performance, social sharing, and mobile-first indexing. Supports both coding reference and audit mode.
Metadata
Version: 1.2.0
Scope: Laravel Blade and Laravel + Inertia.js + React
Rule Count: 31 rules across 8 categories
License: MIT
How to Audit
When the user asks to "audit SEO", "check SEO", or "review SEO" — run the checklist below against their codebase.
Audit Step 1: Determine Scope
If arguments provided ($ARGUMENTS): audit only those pages or files
If no arguments: audit all pages and layouts in the codebase
Audit Step 2: Detect Project Type
Use the detection logic in "Step 1: Detect Project Type" below to determine Laravel Blade vs Laravel + Inertia + React.
Audit Step 3: Run SEO Checklist
Work through every item below. For each, output:
PASS — brief confirmation of what was verified
FAIL — exact file:line, description of the issue, and fix recommendation
N/A — if the check does not apply to this project
Core Web Vitals
Hero/above-the-fold images use fetchpriority="high" and are preloaded (LCP < 2.5s)
No long-running JavaScript tasks blocking interaction (INP < 200ms)
All images and embeds have explicit width/height attributes (CLS < 0.1)
No dynamically injected content that shifts layout without reserved space
Technical SEO
Every page has a unique <title> tag (50-60 characters)
Every page has a <meta name="description"> (150-160 characters)
Every page has a <link rel="canonical"> pointing to the correct URL
robots.txt exists and does not block important pages
XML sitemap exists and includes all indexable pages
URLs are clean, lowercase, hyphenated — no query params for indexable pages
On-Page SEO
One <h1> per page containing the primary keyword
Heading hierarchy is sequential (h1 → h2 → h3) — no skipped levels
Images have descriptive alt text (not empty, not "image", not filename)
Internal links use descriptive anchor text (not "click here")
Semantic HTML used (<article>, <section>, <nav>, <main>)
Structured Data
JSON-LD structured data present on key pages (Article, Product, FAQ, BreadcrumbList)
JSON-LD uses @graph when combining multiple schema types
Structured data validates with Google Rich Results Test (no errors)
Organization/WebSite schema present on homepage
Performance SEO
Images use modern formats (WebP/AVIF) with fallbacks
Below-the-fold images use loading="lazy"
Fonts use font-display: swap or optional
Critical resources use <link rel="preconnect"> or <link rel="preload">
Social Sharing
Open Graph tags present (og:title, og:description, og:image, og:url, og:type)
og:image is at least 1200x630px
Twitter Card tags present (twitter:card, at minimum summary_large_image)
React/SPA SEO (if applicable)
SSR or SSG configured for indexable pages — not client-side only
Meta tags update on route change (via <Head> component or equivalent)
head-key attribute used to prevent duplicate meta tags (Inertia.js)
Content parity between mobile and desktop (no hidden content)
Touch targets are at least 48x48px with adequate spacing
Audit Step 4: Summary
End the audit with:
## SEO Audit Summary
- **PASS**: X checks
- **FAIL**: X checks
- **N/A**: X checks
- **Top Priority Fixes**: (list the 3 most impactful FAIL items)
When to Apply
Reference these guidelines when:
Running an SEO audit on a codebase
Adding meta tags (<title>, description, canonical, robots)
Implementing structured data (JSON-LD / Schema.org)
Optimizing Core Web Vitals (LCP, INP, CLS)
Setting up Open Graph and Twitter Card meta tags
Creating sitemaps and robots.txt
Building SEO-friendly React SPAs
Configuring Laravel SEO middleware and packages
Optimizing images, fonts, and loading performance for search
Step 1: Detect Project Type
Always check the project stack before giving advice. Different stacks need different SEO approaches.
Check package.json and project structure:
Signal
Project Type
@inertiajs/react in dependencies
Laravel + Inertia + React
resources/views/**/*.blade.php only (no React)
Laravel Blade (server-rendered)
If Laravel Blade: Apply tech-, onpage-, schema-, perf-, social-, mobile- rules. Meta tags go in Blade layouts. Sitemaps via spatie/laravel-sitemap. Skip spa- rules — pages are already server-rendered.
If Laravel + Inertia + React: Apply all rules. Meta tags via @inertiaHead in Blade layout + <Head> component from @inertiajs/react in React pages. For SSR, create resources/js/ssr.jsx using createServer from @inertiajs/react/server, add ssr: 'resources/js/ssr.jsx' to Vite config, build with vite build && vite build --ssr, and run php artisan inertia:start-ssr. Use head-key attribute on meta tags to prevent duplicates between layout and page. Focus on schema-, social-, and perf- rules.
Rule Categories by Priority
Priority
Category
Impact
Prefix
1
Core Web Vitals
CRITICAL
cwv-
2
Technical SEO
CRITICAL
tech-
3
On-Page SEO
HIGH
onpage-
4
Structured Data
HIGH
schema-
5
Performance SEO
HIGH
perf-
6
Social Sharing
HIGH
social-
7
React/SPA SEO
HIGH
spa-
8
Mobile-First
MEDIUM
mobile-
Quick Reference
1. Core Web Vitals (CRITICAL)
cwv-lcp - Largest Contentful Paint optimization (<2.5s)
cwv-inp - Interaction to Next Paint optimization (<200ms)
schema-graph - Combining multiple schema types with @graph
schema-faq - FAQ page schema markup
schema-validation - Structured data validation and monitoring
5. Performance SEO (HIGH)
perf-image-formats - Modern image formats (WebP/AVIF)
perf-lazy-loading - Lazy loading implementation
perf-font-loading - Web font loading strategy
perf-resource-hints - Preconnect, preload, and prefetch
6. Social Sharing (HIGH)
social-open-graph - Open Graph meta tags
social-twitter-cards - Twitter/X Card meta tags
7. React/SPA SEO (HIGH)
spa-rendering-strategy - SSR vs CSR vs SSG for SEO
spa-meta-management - Dynamic meta tag management
spa-routing - SPA routing and crawlability
8. Mobile-First (MEDIUM)
mobile-viewport - Viewport and responsive configuration
mobile-content-parity - Content parity between mobile and desktop
mobile-ux - Mobile UX requirements for SEO
Essential Patterns
Meta Tags (HTML)
<head><metacharset="utf-8" /><metaname="viewport"content="width=device-width, initial-scale=1" /><title>Page Title — Site Name</title><metaname="description"content="Concise 150-160 character description of page content." /><linkrel="canonical"href="https://example.com/page" /><!-- Open Graph --><metaproperty="og:title"content="Page Title" /><metaproperty="og:description"content="Description for social sharing." /><metaproperty="og:image"content="https://example.com/og-image.jpg" /><metaproperty="og:url"content="https://example.com/page" /><metaproperty="og:type"content="website" /><!-- Twitter Card --><metaname="twitter:card"content="summary_large_image" /></head>
LCP < 2.5s Preload hero image, use fetchpriority="high"
INP < 200ms Break long tasks, yield to main thread
CLS < 0.1 Set width/height on images, reserve space for dynamic content
Image Optimization
<!-- Modern formats with fallback --><picture><sourcesrcset="hero.avif"type="image/avif" /><sourcesrcset="hero.webp"type="image/webp" /><imgsrc="hero.jpg"alt="Descriptive alt text for the image"width="1200"height="630"fetchpriority="high"
/></picture><!-- Responsive images --><imgsrcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"src="photo-800.webp"alt="Descriptive alt text"width="1200"height="800"loading="lazy"
/>
How to Use
Read individual rule files for detailed explanations and code examples:
