SEO Optimization Guide

Create a reusable SEOHead component using react-helmet-async that I can use
across all pages. The component should:

1. Accept these props with sensible defaults:
   - title (with site name suffix pattern: "Page Title | Site Name")
   - description (max 160 chars, with fallback default)
   - keywords (array of strings)
   - canonicalUrl (auto-generate from current path if not provided)
   - ogImage (with fallback to default site image)
   - ogType (default: "website", support "article" for blog posts)
   - noindex (boolean, default false)
   - structuredData (JSON-LD object)

2. Include these meta tags:
   - Basic: title, description, keywords, robots, viewport, charset
   - Open Graph: og:title, og:description, og:image, og:url, og:type,
     og:site_name
   - Twitter Cards: twitter:card, twitter:title, twitter:description,
     twitter:image, twitter:site
   - Canonical URL

3. Support JSON-LD structured data injection with these common schemas:
   - Organization (for homepage)
   - WebPage (default for all pages)
   - Article/BlogPosting (for blog posts)
   - Product (for product pages)
   - BreadcrumbList
   - FAQPage

4. Include helper functions to generate structured data for common page types

5. Wrap the app with HelmetProvider in the main App component

Use my site's canonical domain for all absolute URLs. Make the component
TypeScript-friendly with proper type definitions.

Extend the SEOHead component to better support article/blog content with:

1. Article-specific meta tags:
   - article:published_time, article:modified_time
   - article:author, article:section
   - article:tag (multiple)

2. Article JSON-LD schema including:
   - headline, description, image
   - datePublished, dateModified
   - author (Person schema), publisher (Organization schema with logo)
   - mainEntityOfPage

3. Reading time estimation based on word count
4. Support for multiple authors
5. Breadcrumb generation for article category hierarchy

Create a dynamic sitemap system using backend functions that handles large
datasets. Requirements:

1. Create a sitemap index at /sitemap.xml that references:
   - /sitemap-static.xml (static pages)
   - /sitemap-posts-1.xml, /sitemap-posts-2.xml, etc. (paginated dynamic
     content)
   - /sitemap-[entity]-N.xml for each entity type with 1000+ records

2. For the dynamic sitemap edge functions:
   - Query Supabase in batches of 1000
   - Include proper lastmod dates from updated_at columns
   - Set appropriate changefreq and priority values
   - Handle pagination: if entity count > 50000, create multiple sitemap files

3. The backend function should:
   - Accept entity type and page number as parameters
   - Return proper XML content-type header
   - Include XML declaration and urlset namespace
   - Use the canonical domain: [YOUR_DOMAIN]

4. Include these entity types in dynamic sitemaps:
   - [List your entities, e.g., /blog/[slug], /products/[id],
     /users/[username]]

Provide both the backend function code and the static sitemap index file.

Create a static sitemap.xml file for my site that has no database-dependent
pages. Include:

1. A sitemap.xml file at the public root directory containing:
   - All public pages with their full canonical URLs using [YOUR_DOMAIN]
   - Appropriate lastmod dates
   - changefreq values (daily for homepage, weekly for main pages, monthly
     for static)
   - priority values (1.0 for homepage, 0.8 for main sections, 0.6 for
     subpages)

2. These pages:
   - Homepage (/)
   - [List all your static pages, e.g., /about, /pricing, /contact,
     /features, /blog]

Make sure the sitemap validates against the sitemap protocol specification.

Create a sitemap system for my site that has both static pages and some
dynamic content from Supabase, but not enough to require pagination (under
1000 items per entity).

1. Create an edge function at /api/sitemap.xml that:
   - Fetches all dynamic entities from Supabase in a single query per entity
   - Combines with hardcoded static page URLs
   - Returns complete sitemap XML
   - Caches the response for 1 hour
   - Uses canonical domain: [YOUR_DOMAIN]

2. Include static pages:
   - [List your static pages]

3. Include dynamic entities:
   - [List your dynamic routes, e.g., blog posts at /blog/[slug]]

4. For each URL include:
   - loc (full canonical URL)
   - lastmod (from database updated_at or static date)
   - changefreq (based on content type)
   - priority (based on page importance)

5. Also create a fallback static sitemap.xml in public/ in case the edge
   function fails

Create a robots.txt file at the public root directory with:

1. Allow all legitimate crawlers to access the site
2. Block crawling of:
   - /api/* (API routes)
   - /admin/* (if exists)
   - /_next/* (Next.js internals, if applicable)
   - /private/* (any private routes)
   - Query parameters that create duplicate content (?ref=, ?utm_*, etc.)

3. Include sitemap location: [YOUR_DOMAIN]/sitemap.xml

4. Specific rules for:
   - Googlebot (allow all public content)
   - Bingbot (allow all public content)
   - GPTBot, ChatGPT-User, CCBot (block if desired for AI training)

Use this format:
User-agent: [bot]
Allow: /
Disallow: /path

Sitemap: https://[YOUR_DOMAIN]/sitemap.xml

Create a robots.txt that includes specific rules for AI/LLM crawlers:

1. Standard search engine bots (Googlebot, Bingbot, etc.): Allow all public
   content
2. Include standard disallows for API routes, admin areas, user private data,
   and duplicate content paths
3. Sitemap reference

Provide clear comments explaining each section.

Create an edge function or API route that generates dynamic Open Graph images
for social sharing. Requirements:

1. Create an endpoint at /api/og that accepts query parameters:
   - title (required), description (optional)
   - type (e.g., "article", "product", "default")
   - image (optional background or featured image URL)

2. Generate a 1200x630 pixel image with:
   - Site branding (logo, colors)
   - Dynamic title text (auto-size to fit)
   - Optional description
   - Gradient or branded background

3. Use @vercel/og, Satori, or similar for image generation
4. Cache generated images appropriately
5. Return proper content-type: image/png

6. Create pre-made templates for:
   - Blog posts (title + author + date)
   - Products (title + price + image)
   - Default pages (title + site name)

Then update the SEOHead component to use this endpoint for pages without
custom OG images.

Set up static Open Graph images for my site:

1. Create an /public/og/ directory structure:
   - /og/default.png (1200x630, site default)
   - /og/home.png (homepage specific)
   - /og/[page-name].png (for key pages)

2. Update the SEOHead component to:
   - Check if a page-specific OG image exists
   - Fall back to default if not
   - Use absolute URLs with the canonical domain

3. Ensure images are: 1200x630px, under 1MB, PNG or JPG format

List the pages I should create custom OG images for based on my site
structure.

Implement proper canonical URL handling across the site:

1. Add canonical link tags to every page via SEOHead component
2. Handle these scenarios:
   - Query parameters: canonical should exclude tracking params (?utm_*,
     ?ref=)
   - Trailing slashes: pick one format and stick to it (recommend no trailing
     slash)
   - Protocol: always use https
   - WWW: pick one (recommend non-www) and redirect the other
   - Case sensitivity: lowercase all URLs
3. Create a utility function getCanonicalUrl(path, params) that constructs
   the full canonical URL, strips unwanted query parameters, and normalizes
   the URL format

Create a library of JSON-LD structured data generators for common page types:

1. Organization (homepage/about): name, url, logo, sameAs (social profiles)
2. WebSite (homepage): name, url, potentialAction (SearchAction)
3. WebPage (all pages): name, description, url, isPartOf
4. BreadcrumbList (all non-homepage): generate from URL path
5. Article/BlogPosting: headline, datePublished, dateModified, author,
   publisher
6. Product (if e-commerce): name, description, image, offers, aggregateRating
7. FAQPage: array of Question/Answer pairs
8. LocalBusiness (if applicable): name, address, telephone, openingHours

Create each as a TypeScript function that returns the JSON-LD object. Include
a helper to inject multiple schemas on one page.

Improve internal linking and navigation for SEO:

1. Create a breadcrumb component that generates from URL path, includes
   JSON-LD BreadcrumbList schema, uses semantic nav element with aria-label
2. Implement proper heading hierarchy check: single H1 per page, no skipped
   heading levels
3. Add semantic HTML5 elements: header, nav, main, article, aside, footer
4. Create a related content component that links to 3-5 related pages with
   proper anchor text (not "click here")

Optimize for Core Web Vitals and page speed (important for SEO):

1. Image optimization: lazy loading, WebP with fallbacks, width/height to
   prevent layout shift (CLS)
2. Font optimization: font-display: swap, preload critical fonts
3. JavaScript optimization: code split by route, defer non-critical JS
4. Resource hints: preconnect for critical third-party domains, prefetch for
   likely navigation

Create SEO-friendly error pages:

1. Custom 404 page with helpful content, navigation back to main sections,
   and a noindex meta tag via React Helmet
2. React error boundary that catches runtime errors, displays a friendly
   fallback UI with navigation options, and adds a noindex meta tag to
   prevent error states from being indexed