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 < 2.5s)
• Interactivity (FID < 100ms, INP < 200ms)
• Visual stability (CLS < 0.1)
• Mobile usability
• HTTPS security
• No intrusive interstitials

Technical SEO Implementation

Meta Tags (Critical)

Title Tag (Most Important)

<title>Primary Keyword - Secondary Keyword | Brand</title>

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:

<!-- Good -->
<title>React Performance Optimization Guide | DevTools Pro</title>

<!-- Bad: Too generic, too long -->
<title>React - A JavaScript Library for Building User Interfaces - DevTools Pro Solutions</title>

Meta Description

<meta name="description" content="Concise, compelling summary under 160 characters that includes target keywords and encourages clicks." />

Rules:

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

Example:

<meta
  name="description"
  content="Learn proven React optimization techniques: code splitting, lazy loading, memoization, and profiling. Boost your app's performance by 60%."
/>

Canonical URL

<link rel="canonical" href="https://example.com/preferred-url" />

Use for:

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

Open Graph (Social Sharing)

<meta property="og:title" content="Compelling Title for Social Media" />
<meta property="og:description" content="Engaging description for social posts." />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="article" />

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

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Title optimized for Twitter" />
<meta name="twitter:description" content="Description under 200 characters." />
<meta name="twitter:image" content="https://example.com/twitter-image.jpg" />

Structured Data (Schema.org)

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

Article Schema

<script type="application/ld+json">
{
  "@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"
    }
  }
}
</script>

Product Schema (E-commerce)

<script type="application/ld+json">
{
  "@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"
  }
}
</script>

FAQ Schema

<script type="application/ld+json">
{
  "@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."
      }
    }
  ]
}
</script>

XML Sitemap

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/</loc>
    <lastmod>2026-01-15</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://example.com/blog/react-performance</loc>
    <lastmod>2026-01-20</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

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

<h1>Main Page Topic (One H1 Per Page)</h1>

  <h2>Major Section</h2>
    <h3>Subsection</h3>
    <h3>Another Subsection</h3>

  <h2>Another Major Section</h2>
    <h3>Subsection</h3>
      <h4>Detail Point</h4>

Rules:

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

Internal Linking

<!-- Good: Descriptive anchor text -->
<a href="/blog/react-hooks-guide">Learn advanced React hooks patterns</a>

<!-- Bad: Generic anchor text -->
<a href="/blog/react-hooks-guide">Click here</a>

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

<img
  src="/optimized-image.webp"
  alt="Descriptive alt text with target keyword"
  width="800"
  height="600"
  loading="lazy"
/>

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

<!-- Responsive image with srcset -->
<img
  src="/hero-800.webp"
  srcset="
    /hero-400.webp 400w,
    /hero-800.webp 800w,
    /hero-1200.webp 1200w
  "
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  alt="React performance optimization dashboard"
  width="1200"
  height="630"
  loading="lazy"
/>

Core Web Vitals Optimization

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

1. Largest Contentful Paint (LCP) - Loading Performance

Target: < 2.5 seconds

What it measures: Time until the largest content element is rendered.

How to optimize:

// 1. Optimize images (largest culprit)
<Image
  src="/hero.jpg"
  alt="Hero image"
  priority // Preloads above-fold images
  width={1200}
  height={600}
/>

// 2. Preload critical resources
<link rel="preload" href="/critical-font.woff2" as="font" type="font/woff2" crossorigin />

// 3. Use CDN for faster delivery
<Image src="https://cdn.example.com/hero.jpg" ... />

// 4. Minimize render-blocking resources
<link rel="stylesheet" href="/critical.css" /> {/* Inline critical CSS */}
<link rel="stylesheet" href="/non-critical.css" media="print" />

2. Interaction to Next Paint (INP) - Responsiveness

Target: < 200ms

What it measures: Time from user interaction to visual response.

How to optimize:

// 1. Debounce expensive operations
import { useDebouncedCallback } from 'use-debounce';

const handleSearch = useDebouncedCallback((query) => {
  // 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: < 0.1

What it measures: Unexpected layout shifts during page load.

How to optimize:

// 1. Always specify image dimensions
<img src="/banner.jpg" width="1200" height="400" alt="..." />

// 2. Reserve space for dynamic content
<div style={{ minHeight: '200px' }}>
  {isLoading ? <Skeleton /> : <Content />}
</div>

// 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

// 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 (< 3s)
• No intrusive interstitials
• Mobile-friendly navigation

// Responsive component example
export function MobileOptimizedButton({ children, onClick }: ButtonProps) {
  return (
    <button
     
      className="min-h-[48px] min-w-[48px] px-4 text-base"
      {/* Meets touch target size requirements */}
    >
      {children}
    </button>
  );
}

Viewport Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

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<Metadata> {
  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<MetadataRoute.Sitemap> {
  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
<link rel="canonical" href="https://example.com/products/shoes" />

2. Missing or Duplicate Meta Descriptions

// Bad: Same description on every page
<meta name="description" content="Welcome to our website" />

// 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.

Converted and distributed by TomeVault — claim your Tome and manage your conversions.