# Technical SEO ## Overview Technical SEO is the process of optimizing a website for crawling and indexing by search engines. This guide covers all aspects of technical SEO implementation. --- ## 1. SEO Fundamentals ### How Search Engines Work ```markdown # Search Engine Crawling Process ## 1. Discovery - Search engines find URLs through: - Links from other pages - Sitemaps - Direct submission - Social media links ## 2. Crawling - Bots (spiders) visit pages - Download page content - Follow links to other pages - Respect robots.txt rules - Follow crawl-delay rules ## 3. Processing - Extract content from HTML - Parse structured data - Identify key elements - Process images and media - Extract links ## 4. Indexing - Store page in database - Analyze content and context - Rank for relevant queries - Update search index - Remove outdated content ## 5. Ranking - Match query to indexed pages - Apply ranking algorithms - Consider 200+ ranking factors - Return relevant results - Personalize for user ``` ### Key SEO Concepts ```markdown # SEO Concepts ## Indexing vs. Crawling ### Crawling - Search engine bots visiting your site - Following links to discover pages - Downloading page content - Happens before indexing ### Indexing - Adding pages to search database - Making pages available in search results - Happens after crawling - Not all crawled pages are indexed ## Organic vs. Paid Search ### Organic Search - Free search results - Based on relevance and quality - Long-term sustainable - Requires SEO optimization ### Paid Search (PPC) - Advertisements in search results - Based on bid amount and quality - Immediate results - Requires ongoing payment ## On-Page vs. Off-Page SEO ### On-Page SEO - Content optimization - Technical optimization - User experience - Under your control ### Off-Page SEO - Backlinks - Social signals - Brand mentions - Outside your control ## White Hat vs. Black Hat SEO ### White Hat SEO - Follows search engine guidelines - Focuses on user value - Long-term sustainable - Recommended approach ### Black Hat SEO - Violates search engine guidelines - Focuses on manipulating rankings - Short-term gains - Risk of penalties ``` --- ## 2. Crawlability and Indexability ### Crawlability ```markdown # Crawlability Optimization ## What is Crawlability? Ability of search engine bots to discover and access your website content. ## Crawlability Best Practices ### 1. Site Structure - Clear navigation hierarchy - Logical URL structure - Internal linking - Sitemap submission ### 2. Robots.txt - Allow crawling of important pages - Block unnecessary pages - Specify crawl-delay - Point to sitemap ### 3. Server Response - Fast server response times - Proper HTTP status codes - Handle errors gracefully - Avoid server errors ### 4. JavaScript Rendering - Server-side rendering preferred - Progressive enhancement - Avoid blocking resources - Test with Google tools ### 5. URL Parameters - Use canonical URLs - Avoid duplicate content - Handle parameters correctly - Use URL rewriting ## Crawl Budget Optimization ### What is Crawl Budget? Number of pages search engine will crawl on your site per day. ### Factors Affecting Crawl Budget - Site size - Site authority - Update frequency - Server performance - Number of errors ### Optimization Tips - Fix crawl errors - Improve site speed - Remove duplicate content - Prioritize important pages - Use sitemaps ``` ### Indexability ```markdown # Indexability Optimization ## What is Indexability? Ability of search engines to add your pages to their search index. ## Indexability Best Practices ### 1. Meta Robots Tag ```html ``` ### 2. Canonical Tags ```html ``` ### 3. Noindex Rules - Use for: - Duplicate content - Test pages - Admin pages - Thin content - Search result pages ### 4. Index Status Monitoring - Use Google Search Console - Check "Coverage" report - Monitor "Indexed, not submitted" - Fix indexing errors ### 5. Freshness - Update content regularly - Add new content - Remove outdated content - Update publication dates ``` --- ## 3. URL Structure ### Best Practices ```markdown # URL Structure Best Practices ## URL Characteristics ### Good URLs ``` https:\/\/example.com\/blog\/how-to-optimize-seo https:\/\/example.com\/products\/red-shoes https:\/\/example.com\/category\/electronics\/laptops ``` ### Bad URLs ``` https:\/\/example.com\/p=123 https:\/\/example.com\/2023\/01\/15\/article?id=456 https:\/\/example.com\/products?category=shoes&color=red ``` ## URL Best Practices ### 1. Keep it Short - Aim for 50-60 characters - Remove unnecessary words - Use concise language - Focus on keywords ### 2. Use Hyphens - Use hyphens to separate words - Never use underscores - Avoid special characters - Keep it lowercase ### 3. Include Keywords - Use target keyword - Keep it natural - Don't overstuff - Focus on user intent ### 4. Use HTTPS - Secure your site - Boost rankings - Build trust - Required for modern browsers ### 5. Avoid Parameters - Use clean URLs - Rewrite dynamic URLs - Use URL routing - Avoid session IDs ## URL Structure Examples ### E-commerce ``` \/products\/category\/product-name \/products\/shoes\/red-running-shoes \/products\/electronics\/laptops ``` ### Blog ``` \/blog\/year\/month\/post-title \/blog\/2023\/12\/how-to-optimize-seo \/blog\/category\/seo-tips ``` ### Service Pages ``` \/services\/service-name \/services\/web-development \/services\/digital-marketing ``` ``` ### URL Rewriting ```markdown # URL Rewriting ## Apache (.htaccess) ```apache # Remove .php extension RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME}.php -f RewriteRule ^(.*)$ $1.php [L] # Remove trailing slash RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_URI} (.+)\/$ RewriteRule ^ %1 [L,R=301] # Force HTTPS RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https:\/\/%{HTTP_HOST}%{REQUEST_URI} [L,R=301] # Remove www RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC] RewriteRule ^(.*)$ https:\/\/%1\/$1 [R=301,L] ``` ## Nginx ```nginx # Remove .php extension location ~ \.php$ { try_files $uri =404; fastcgi_pass unix:\/var\/run\/php\/php7.4-fpm.sock; fastcgi_index index.php; include fastcgi_params; } # Remove trailing slash rewrite ^\/(.*)\/$ \/$1 permanent; # Force HTTPS if ($scheme != "https") { return 301 https:\/\/$host$request_uri; } # Remove www if ($host ~* ^www\.(.*)) { set $host_without_www $1; rewrite ^(.*)$ https:\/\/$host_without_www$1 permanent; } ``` ## Next.js (next.config.js) ```javascript module.exports = { async rewrites() { return [ { source: '\/old-path\/:path*', destination: '\/new-path\/:path*', }, ]; }, }; ``` ``` --- ## 4. HTTPS and Security ### HTTPS Implementation ```markdown # HTTPS Implementation ## Why HTTPS Matters for SEO ### Ranking Factor - Google uses HTTPS as ranking signal - Secure sites rank higher - Required for modern features - Builds user trust ### Security Benefits - Encrypts data in transit - Protects user privacy - Prevents data tampering - Required for payment processing ## Implementation Steps ### 1. Get SSL Certificate - Let's Encrypt (free) - Commercial certificate - Wildcard certificate - Multi-domain certificate ### 2. Install Certificate - On server - Configure web server - Test SSL configuration - Verify installation ### 3. Force HTTPS - Redirect HTTP to HTTPS - Update internal links - Update sitemaps - Update canonical tags ### 4. Update External Links - Update backlinks if possible - Update social media profiles - Update directory listings - Update marketing materials ## Server Configuration ### Apache ```apache ServerName example.com DocumentRoot \/var\/www\/html SSLEngine on SSLCertificateFile \/path\/to\/cert.pem SSLCertificateKeyFile \/path\/to\/key.pem SSLCertificateChainFile \/path\/to\/chain.pem <\/VirtualHost> ServerName example.com Redirect permanent \/ https:\/\/example.com\/ <\/VirtualHost> ``` ### Nginx ```nginx server { listen 443 ssl http2; server_name example.com; ssl_certificate \/path\/to\/cert.pem; ssl_certificate_key \/path\/to\/key.pem; ssl_protocols TLSv1.2 TLSv1.3; ssl_ciphers HIGH:!aNULL:!MD5; root \/var\/www\/html; } server { listen 80; server_name example.com; return 301 https:\/\/$server_name$request_uri; } ``` ## Mixed Content - Fix mixed content warnings - Update HTTP resources to HTTPS - Use protocol-relative URLs - Test with browser dev tools ``` ### Security Headers ```markdown # Security Headers ## Essential Security Headers ### 1. X-Frame-Options ```http X-Frame-Options: DENY ``` Prevents clickjacking attacks ### 2. X-Content-Type-Options ```http X-Content-Type-Options: nosniff ``` Prevents MIME-type sniffing ### 3. X-XSS-Protection ```http X-XSS-Protection: 1; mode=block ``` Enables XSS filtering ### 4. Content-Security-Policy ```http Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:; ``` Controls resource loading ### 5. Strict-Transport-Security ```http Strict-Transport-Security: max-age=31536000; includeSubDomains ``` Enforces HTTPS connections ## Implementation ### Apache (.htaccess) ```apache Header set X-Frame-Options "DENY" Header set X-Content-Type-Options "nosniff" Header set X-XSS-Protection "1; mode=block" Header set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:;" Header set Strict-Transport-Security "max-age=31536000; includeSubDomains" <\/IfModule> ``` ### Nginx ```nginx add_header X-Frame-Options "DENY" always; add_header X-Content-Type-Options "nosniff" always; add_header X-XSS-Protection "1; mode=block" always; add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:;" always; add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always; ``` ## Testing - Use securityheaders.com - Use Mozilla Observatory - Test with browser dev tools - Check with online scanners ``` --- ## 5. Mobile-First Indexing ### Mobile-First Indexing ```markdown # Mobile-First Indexing ## What is Mobile-First Indexing? Google primarily uses the mobile version of your site for indexing and ranking. ## Why It Matters - Mobile traffic > desktop - Google's default approach - Affects all sites - Requires mobile-friendly design ## Implementation Requirements ### 1. Responsive Design - Use CSS media queries - Flexible layouts - Scalable images - Touch-friendly navigation ### 2. Mobile-Friendly Content - Readable text size - Adequate spacing - No horizontal scrolling - Accessible buttons ### 3. Mobile Performance - Fast loading on mobile - Optimized images - Minimal JavaScript - Efficient CSS ### 4. Mobile SEO - Mobile sitemap - Mobile-specific content - Mobile-friendly meta tags - Mobile-optimized structured data ## Testing Tools - Google Mobile-Friendly Test - Chrome DevTools Device Mode - Responsive design checker - Mobile performance tools ``` ### Responsive Design ```markdown # Responsive Design for SEO ## Viewport Meta Tag ```html ``` ## Media Queries ```css \/* Mobile First Approach *\/ .container { width: 100%; padding: 1rem; } \/* Tablet *\/ @media (min-width: 768px) { .container { width: 750px; margin: 0 auto; } } \/* Desktop *\/ @media (min-width: 1024px) { .container { width: 960px; margin: 0 auto; } } \/* Large Desktop *\/ @media (min-width: 1200px) { .container { width: 1140px; margin: 0 auto; } } ``` ## Responsive Images ```html Description

technical-seo