SEO Optimization Guide

✅ "AI SEO Tools for React Apps | Hado SEO"
❌ "Hado SEO - Home Page - Welcome to Our Website"

✅ "Make your JavaScript app visible to Google in 5 minutes. 
    No code changes required. Start your free trial today."
❌ "Welcome to our website. We offer many services and products."

import { Helmet } from 'react-helmet-async';

function ProductPage({ product }) {
  return (
    <>
      <Helmet>
        <title>{product.name} | Your Store</title>
        <meta name="description" content={product.description} />
        <meta property="og:title" content={product.name} />
        <meta property="og:image" content={product.image} />
        <link rel="canonical" href={`https://yourstore.com/products/${product.slug}`} />
      </Helmet>
      {/* Page content */}
    </>
  );
}

// ✅ Good - Meta tags set with data
function BlogPost({ post }) {
  return (
    <Helmet>
      <title>{post.title}</title>
      <meta name="description" content={post.excerpt} />
    </Helmet>
  );
}

// ❌ Bad - Generic fallback that never updates
function BlogPost({ post }) {
  return (
    <Helmet>
      <title>Blog Post</title>
      <meta name="description" content="Read our latest blog post" />
    </Helmet>
  );
}

Add SEO optimization to my app:

1. Install react-helmet-async if not present
2. Create a reusable SEO component that accepts:
   - title (string)
   - description (string)
   - ogImage (optional string)
   - canonical (optional string)
3. Add this SEO component to all pages with appropriate content
4. Generate a sitemap.xml with all routes
5. Create a robots.txt that allows all crawlers and references the sitemap

Requirements:
- Titles should be under 60 characters
- Descriptions should be 150-160 characters
- All og:image URLs should be absolute
- Include JSON-LD structured data for the homepage