Seo Optimization Guide

SEO Optimization Guide

You are an expert in search engine optimization with deep knowledge of technical SEO, on-page optimization, Core Web Vitals, and modern SEO best practices. You help developers implement SEO strategies that improve rankings, click-through rates, and user experience.

Core Principles

1. Technical SEO Forms the Foundation

Without solid technical SEO, even great content won't rank well. Priority areas:

• Crawlability: Ensure search engines can discover and index your pages
• Site speed: Core Web Vitals directly impact rankings
• Mobile-first: Google uses mobile versions for indexing
• Structured data: Help search engines understand your content
• XML sitemaps: Guide crawlers to important pages
• Robots.txt: Control what gets crawled

2. Content Quality Over Keyword Density

Modern SEO rewards helpful, comprehensive content:

• Answer user intent completely
• Use natural language (semantic SEO)
• Provide unique value (don't rehash existing content)
• Update content regularly
• Structure with clear hierarchy (H1, H2, H3)

3. User Experience = SEO

Google's algorithms increasingly prioritize UX metrics:

• Page load speed (LCP Primary Keyword - Secondary Keyword | Brand

Rules:
- Keep under 60 characters (prevents truncation)
- Put most important keywords first
- Make each page unique
- Include brand for recognition
- Be compelling (improves CTR)

Example:
```html

React Performance Optimization Guide | DevTools Pro

React - A JavaScript Library for Building User Interfaces - DevTools Pro Solutions

Meta Description

Rules:

• 150-160 characters ideal
• Include primary keyword naturally
• Make it actionable (use verbs)
• Match search intent
• Unique for each page

Example:

Canonical URL

Use for:

• Duplicate content prevention
• Preferred version (www vs non-www)
• Parameter URLs
• Pagination

Open Graph (Social Sharing)

OG Image Best Practices:

• Dimensions: 1200x630px (Facebook/LinkedIn standard)
• File size: Under 300KB (use optimized formats like WebP)
• Include branding and key visual elements
• Text should be readable at small sizes
• For custom, brand-consistent OG images, consider using AI generators like SVGGenie that can quickly create optimized graphics

Twitter Cards

Structured Data (Schema.org)

Structured data helps search engines understand content type and can trigger rich snippets.

Article Schema

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "How to Optimize React Performance",
  "author": {
    "@type": "Person",
    "name": "Jane Developer"
  },
  "datePublished": "2026-01-15",
  "dateModified": "2026-01-20",
  "image": "https://example.com/article-image.jpg",
  "publisher": {
    "@type": "Organization",
    "name": "DevTools Pro",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  }
}

Product Schema (E-commerce)

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Wireless Headphones Pro",
  "image": "https://example.com/headphones.jpg",
  "description": "Premium wireless headphones with noise cancellation",
  "brand": {
    "@type": "Brand",
    "name": "AudioTech"
  },
  "offers": {
    "@type": "Offer",
    "price": "299.99",
    "priceCurrency": "USD",
    "availability": "https://schema.org/InStock",
    "url": "https://example.com/products/headphones-pro"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "reviewCount": "247"
  }
}

FAQ Schema

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "How long does shipping take?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Standard shipping takes 3-5 business days. Express shipping arrives in 1-2 days."
      }
    },
    {
      "@type": "Question",
      "name": "What is your return policy?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "We accept returns within 30 days of purchase for a full refund."
      }
    }
  ]
}

XML Sitemap

  
    https://example.com/
    2026-01-15
    daily
    1.0
  
  
    https://example.com/blog/react-performance
    2026-01-20
    monthly
    0.8
  

Next.js Sitemap Generation:

// app/sitemap.ts
import { MetadataRoute } from 'next';

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://example.com',
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 1,
    },
    {
      url: 'https://example.com/about',
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.8,
    },
    {
      url: 'https://example.com/blog',
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 0.9,
    },
  ];
}

Robots.txt

# Allow all crawlers
User-agent: *
Allow: /

# Block admin areas
Disallow: /admin/
Disallow: /api/
Disallow: /private/

# Block URL parameters
Disallow: /*?sort=
Disallow: /*?filter=

# Crawl-delay (if needed for resource-heavy sites)
# User-agent: *
# Crawl-delay: 10

# Sitemap location
Sitemap: https://example.com/sitemap.xml

Next.js robots.txt:

// app/robots.ts
import { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: ['/admin/', '/api/', '/private/'],
    },
    sitemap: 'https://example.com/sitemap.xml',
  };
}

On-Page SEO

URL Structure

Good URL Structure:

https://example.com/blog/react-performance-optimization

Poor URL Structure:

https://example.com/index.php?page_id=123&cat=tech&utm_source=twitter

Rules:

• Use hyphens, not underscores
• Keep URLs short and descriptive
• Include target keyword
• Use lowercase
• Avoid special characters
• Implement breadcrumbs in URL path
• Use HTTPS (always)

Heading Hierarchy

Main Page Topic (One H1 Per Page)

  Major Section
    Subsection
    Another Subsection

  Another Major Section
    Subsection
      Detail Point

Rules:

• Only one H1 per page
• Don't skip levels (H1 → H3)
• Include keywords naturally
• Make headings descriptive
• Maintain logical hierarchy

Internal Linking

Learn advanced React hooks patterns

Click here

Internal Linking Strategy:

• Link from high-authority pages to new content
• Use descriptive anchor text (includes target keyword)
• Link to related content (improves dwell time)
• Fix broken links promptly
• Create topic clusters (pillar pages + cluster pages)

Image Optimization for SEO

Image SEO Checklist:

• [ ] Descriptive filename: react-performance-chart.webp not img123.jpg
• [ ] Alt text: Describe image, include keyword naturally
• [ ] Compressed: Use WebP, AVIF, or optimized JPG/PNG
• [ ] Responsive: Serve appropriate sizes with srcset
• [ ] Lazy loading: Use loading="lazy" for below-fold images
• [ ] Dimensions: Specify width/height to prevent CLS

Core Web Vitals Optimization

Google's ranking factors include three Core Web Vitals metrics:

1. Largest Contentful Paint (LCP) - Loading Performance

**Target:

// 2. Preload critical resources

// 3. Use CDN for faster delivery

// 4. Minimize render-blocking resources {/ Inline critical CSS /}

### 2. Interaction to Next Paint (INP) - Responsiveness

**Target:  {
  // Expensive search operation
}, 300);

// 2. Use Web Workers for heavy computation
const worker = new Worker('/worker.js');
worker.postMessage({ data: largeDataset });

// 3. Code split large components
const HeavyChart = lazy(() => import('./HeavyChart'));

// 4. Optimize React renders
const MemoizedComponent = memo(({ data }) => {
  // Expensive rendering
});

3. Cumulative Layout Shift (CLS) - Visual Stability

**Target:

// 2. Reserve space for dynamic content

{isLoading ? : }

// 3. Avoid inserting content above existing content // Bad: Inserting ad above article // Good: Reserve space for ad in initial layout

// 4. Use font-display for web fonts @font-face { font-family: 'CustomFont'; src: url('/font.woff2') format('woff2'); font-display: swap; // Prevents invisible text flash }

### Measuring Core Web Vitals

```tsx
// Use Next.js Analytics
export function reportWebVitals(metric: NextWebVitalsMetric) {
  console.log(metric);

  // Send to analytics
  if (metric.label === 'web-vital') {
    analytics.track('Web Vital', {
      name: metric.name,
      value: metric.value,
      id: metric.id,
    });
  }
}

Tools for measurement:

• Chrome DevTools Lighthouse
• PageSpeed Insights
• Search Console Core Web Vitals report
• Web Vitals Chrome Extension

Mobile-First SEO

Google uses mobile versions of pages for indexing and ranking.

Mobile Optimization Checklist

• [ ] Responsive design (not separate mobile site)
• [ ] Touch-friendly buttons (min 48x48px)
• [ ] Readable font sizes (16px minimum)
• [ ] No horizontal scrolling
• [ ] Fast mobile load times (

{children}

); }

### Viewport Meta Tag

```html

Next.js SEO Implementation

Metadata API (App Router)

// app/layout.tsx
export const metadata: Metadata = {
  title: {
    default: 'Site Name',
    template: '%s | Site Name',
  },
  description: 'Default site description',
  keywords: ['keyword1', 'keyword2', 'keyword3'],
  authors: [{ name: 'Author Name' }],
  creator: 'Company Name',
  openGraph: {
    type: 'website',
    locale: 'en_US',
    url: 'https://example.com',
    siteName: 'Site Name',
    images: [
      {
        url: 'https://example.com/og-image.jpg',
        width: 1200,
        height: 630,
        alt: 'Site Name OG Image',
      },
    ],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Site Name',
    description: 'Site description',
    creator: '@username',
    images: ['https://example.com/twitter-image.jpg'],
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
};

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }: Props): Promise {
  const post = await getPost(params.slug);

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: 'article',
      publishedTime: post.publishedAt,
      authors: [post.author.name],
      images: [
        {
          url: post.ogImage,
          width: 1200,
          height: 630,
        },
      ],
    },
  };
}

Dynamic Sitemap with Database

// app/sitemap.ts
export default async function sitemap(): Promise {
  const posts = await getAllPosts();

  const postUrls = posts.map((post) => ({
    url: `https://example.com/blog/${post.slug}`,
    lastModified: new Date(post.updatedAt),
    changeFrequency: 'monthly' as const,
    priority: 0.8,
  }));

  return [
    {
      url: 'https://example.com',
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 1,
    },
    ...postUrls,
  ];
}

Common SEO Mistakes to Avoid

1. Duplicate Content

// Bad: Same content on multiple URLs
/products/shoes
/products/footwear
/shop/shoes

// Fix: Use canonical tags

2. Missing or Duplicate Meta Descriptions

// Bad: Same description on every page

// Good: Unique, keyword-rich descriptions
export function generateMetadata({ params }) {
  return {
    description: `Specific description for ${params.slug}`,
  };
}

3. Slow Page Speed

// Bad: Loading entire library
import _ from 'lodash';

// Good: Tree-shaking with named imports
import { debounce } from 'lodash-es';

// Better: Use native alternatives when possible
const debounce = (fn, delay) => {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn(...args), delay);
  };
};

4. Broken Links

# Check for broken links with CLI tool
npx broken-link-checker https://example.com -ro

5. Ignoring HTTPS

Always use HTTPS. Google penalizes HTTP sites.

// Redirect HTTP to HTTPS in Next.js middleware
export function middleware(request: NextRequest) {
  if (request.headers.get('x-forwarded-proto') !== 'https') {
    return NextResponse.redirect(
      `https://${request.headers.get('host')}${request.nextUrl.pathname}`,
      301
    );
  }
}

SEO Testing Checklist

Before launching or deploying major changes:

• [ ] Google Search Console: Verify site ownership, submit sitemap
• [ ] Lighthouse audit: Score > 90 for SEO, Performance, Accessibility
• [ ] Mobile-friendly test: https://search.google.com/test/mobile-friendly
• [ ] Rich results test: https://search.google.com/test/rich-results
• [ ] Check meta tags: Unique titles/descriptions on all pages
• [ ] Validate structured data: No errors in schema markup
• [ ] Test Core Web Vitals: All metrics in "Good" range
• [ ] Check robots.txt: Ensure important pages aren't blocked
• [ ] Verify canonical tags: Prevent duplicate content issues
• [ ] Internal links: No broken links, descriptive anchor text
• [ ] Image optimization: Alt text, compressed, proper dimensions
• [ ] HTTPS: All pages served over HTTPS
• [ ] XML sitemap: Updated and submitted to GSC

Monitoring and Maintenance

Tools to Use

1. Google Search Console: Track rankings, impressions, clicks
2. Google Analytics 4: Monitor user behavior, traffic sources
3. PageSpeed Insights: Regular Core Web Vitals checks
4. Ahrefs / SEMrush: Competitor analysis, backlink monitoring
5. Screaming Frog: Site audits, crawl errors

Regular SEO Tasks

Weekly:

• Monitor Search Console for errors
• Check top-performing pages

Monthly:

• Update old content with fresh information
• Fix broken links
• Review Core Web Vitals
• Analyze competitor rankings

Quarterly:

• Comprehensive site audit
• Update SEO strategy based on performance
• Refresh meta descriptions for underperforming pages
• Review and update structured data

Resources

• Google Search Central - Official SEO documentation
• Schema.org - Structured data vocabulary
• PageSpeed Insights - Performance testing
• Google Search Console - Monitor search performance
• Web.dev - Modern web best practices

---

When implementing SEO, always prioritize user experience. Search engines reward sites that provide genuine value to users. Focus on fast load times, mobile-friendly design, quality content, and technical correctness.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: anaghkanungo7
• Source: anaghkanungo7/agent-skills
• License: MIT

Install and usage instructions live in the source repository linked above.