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)** ```html <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: ```html <!-- 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** ```html <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: ```html <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** ```html <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)** ```html <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](https://svggenie.com) that can quickly create optimized graphics **Twitter Cards** ```html <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** ```html <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)** ```html <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** ```html <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 <?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:** ```tsx // 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 ```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:** ```tsx // 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 ```html <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 ```html <!-- 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 ```html <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 ```html <!-- 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:** ```tsx // 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