SEO Optimization

Chameleon includes comprehensive SEO features for better search engine visibility and performance.

Overview

The SEO system provides automatic meta tag generation, structured data, sitemap generation, and OpenGraph/Twitter Card support. Each page can have custom metadata, and the system automatically generates SEO-friendly URLs and content.

Page Metadata

Basic Metadata

// src/app/[locale]/page.tsx
import { Metadata } from "next";

export const metadata: Metadata = {
  title: "Chameleon - AI Content Generation",
  description: "Generate amazing AI content with Chameleon",
  keywords: ["AI", "content generation", "images", "videos"],
  authors: [{ name: "Chameleon Team" }],
  openGraph: {
    title: "Chameleon - AI Content Generation",
    description: "Generate amazing AI content with Chameleon",
    url: "https://your-domain.com",
    siteName: "Chameleon",
    images: [
      {
        url: "https://your-domain.com/og-image.jpg",
        width: 1200,
        height: 630,
        alt: "Chameleon AI",
      },
    ],
    locale: "en_US",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "Chameleon - AI Content Generation",
    description: "Generate amazing AI content with Chameleon",
    images: ["https://your-domain.com/og-image.jpg"],
  },
};

Dynamic Metadata

// src/app/[locale]/posts/[slug]/page.tsx
import { Metadata } from "next";

export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
  const post = await getPostBySlug(params.slug);
  
  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      images: [post.featured_image],
    },
  };
}

Structured Data

JSON-LD Implementation

// src/components/seo/structured-data.tsx
export function StructuredData({ data }: { data: any }) {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "WebApplication",
    name: "Chameleon",
    description: "AI-powered content generation platform",
    url: "https://your-domain.com",
    applicationCategory: "MultimediaApplication",
    operatingSystem: "Web Browser",
    offers: {
      "@type": "Offer",
      price: "0",
      priceCurrency: "USD",
    },
  };

  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
    />
  );
}

Blog Post Schema

// For blog posts
const blogPostSchema = {
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  headline: post.title,
  description: post.description,
  author: {
    "@type": "Organization",
    name: "Chameleon",
  },
  publisher: {
    "@type": "Organization",
    name: "Chameleon",
    logo: {
      "@type": "ImageObject",
      url: "https://your-domain.com/logo.png",
    },
  },
  datePublished: post.created_at,
  dateModified: post.updated_at,
};

Sitemap Generation

Automatic Sitemap

// src/app/sitemap.ts
import { MetadataRoute } from "next";

export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = "https://your-domain.com";
  
  return [
    {
      url: baseUrl,
      lastModified: new Date(),
      changeFrequency: "daily",
      priority: 1,
    },
    {
      url: `${baseUrl}/pricing`,
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 0.8,
    },
    {
      url: `${baseUrl}/posts`,
      lastModified: new Date(),
      changeFrequency: "daily",
      priority: 0.7,
    },
  ];
}

Dynamic Sitemap

// src/app/sitemap.xml/route.ts
export async function GET() {
  const posts = await getPosts();
  const baseUrl = "https://your-domain.com";
  
  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
      <url>
        <loc>${baseUrl}</loc>
        <lastmod>${new Date().toISOString()}</lastmod>
        <changefreq>daily</changefreq>
        <priority>1.0</priority>
      </url>
      ${posts.map(post => `
        <url>
          <loc>${baseUrl}/posts/${post.slug}</loc>
          <lastmod>${post.updated_at}</lastmod>
          <changefreq>weekly</changefreq>
          <priority>0.8</priority>
        </url>
      `).join('')}
    </urlset>`;

  return new Response(sitemap, {
    headers: {
      "Content-Type": "application/xml",
    },
  });
}

File Locations

• src/app/sitemap.ts - Static sitemap generation
• src/app/robots.txt/route.ts - Robots.txt generation
• src/components/seo/ - SEO components
• src/lib/seo.ts - SEO utility functions
• Page-level metadata exports - Page-specific SEO

Common Tasks

Add Meta Tags to Page

// In any page component
export const metadata: Metadata = {
  title: "Page Title",
  description: "Page description",
  openGraph: {
    title: "Page Title",
    description: "Page description",
  },
};

Generate Sitemap

1. Create src/app/sitemap.ts for static sitemap
2. Or create src/app/sitemap.xml/route.ts for dynamic sitemap
3. Include all important pages
4. Set appropriate priorities and change frequencies

Add Structured Data

// In page component
import { StructuredData } from "@/components/seo/structured-data";

export default function Page() {
  const structuredData = {
    "@type": "WebPage",
    name: "Page Name",
    description: "Page description",
  };

  return (
    <>
      <StructuredData data={structuredData} />
      <div>Page content</div>
    </>
  );
}

Optimize Images

// Use Next.js Image component
import Image from "next/image";

<Image
  src="/og-image.jpg"
  alt="Descriptive alt text"
  width={1200}
  height={630}
  priority // For above-the-fold images
/>

Troubleshooting

Meta tags not showing

Problem: Meta tags not appearing in page source

Solution:

1. Check metadata export is correct
2. Verify page is using App Router
3. Check for syntax errors in metadata
4. Clear browser cache

Sitemap not accessible

Problem: Sitemap returns 404

Solution:

1. Check sitemap file is in correct location
2. Verify export is default export
3. Check for TypeScript errors
4. Test sitemap URL directly

OpenGraph not working

Problem: Social media previews not showing

Solution:

1. Verify OpenGraph tags are correct
2. Check image URLs are accessible
3. Use Facebook Debugger to test
4. Ensure images meet size requirements

Next Steps

• Analytics - Track SEO performance
• Blog System - SEO for blog posts
• Internationalization - Multi-language SEO