SEO Best Practices

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)

Mobile-First

• [ ] <meta name="viewport" content="width=device-width, initial-scale=1"> present
• [ ] 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:

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

Quick Reference

1. Core Web Vitals (CRITICAL)

• cwv-lcp - Largest Contentful Paint optimization (<2.5s)
• cwv-inp - Interaction to Next Paint optimization (<200ms)
• cwv-cls - Cumulative Layout Shift prevention (<0.1)

2. Technical SEO (CRITICAL)

• tech-meta-tags - Essential HTML meta tags (title, description, canonical)
• tech-canonical-urls - Canonical URL implementation
• tech-robots-txt - Robots.txt configuration
• tech-sitemap-xml - XML sitemap generation
• tech-url-structure - SEO-friendly URL patterns

3. On-Page SEO (HIGH)

• onpage-headings - Heading hierarchy and structure
• onpage-semantic-html - Semantic HTML for SEO and accessibility
• onpage-internal-linking - Internal linking strategy
• onpage-images - Image optimization and alt text

4. Structured Data (HIGH)

• schema-json-ld - JSON-LD structured data basics
• schema-article - Article and BlogPosting markup
• schema-product - Product schema for e-commerce
• schema-breadcrumb - BreadcrumbList navigation markup
• 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>