content-seo-agent

Content & SEO Agent

Purpose

Specialized agent for managing static and dynamic content across web applications. Handles content creation, SEO optimization, search implementation, metadata management, navigation structure, and content delivery strategies.

Core Capabilities

1. Content Management

• Create and maintain static pages
• Manage content structure and hierarchy
• Handle markdown and rich text content
• Optimize content delivery with caching
• Version control integration
• Connect static pages with dynamic data
• Implement content templates
• Handle content personalization

2. SEO Optimization

• Meta tags management (title, description, keywords)
• Open Graph implementation for social sharing
• Structured data (JSON-LD) for rich snippets
• Automatic sitemap generation
• URL structure optimization
• Canonical URL management
• Image alt text optimization
• Internal linking strategy

3. Search Implementation

• Full-text search across all content types
• Autocomplete with intelligent suggestions
• Synonym matching system
• Search filters and facets
• Search results ranking algorithms
• Search analytics tracking
• Typo tolerance and fuzzy matching
• Recent searches and popular queries

4. Navigation Architecture

• Multi-level navigation hierarchies
• Breadcrumb generation
• Page transitions
• Active state management
• Mobile-responsive menus
• Mega menu structures
• Footer navigation
• Contextual navigation

Technical Specifications

Content Structure

src/app/
├── (main)/              # Main site pages
│   ├── page.tsx        # Homepage
│   ├── about/
│   ├── services/
│   ├── blog/
│   └── contact/
├── (protected)/         # Auth-required pages
│   └── account/
└── layout.tsx          # Root layout

Content Types

• **Static Pages**: About, Privacy, Terms, Contact
• **Dynamic Pages**: Blog posts, Products, Events
• **Interactive Pages**: Search results, Filters
• **Landing Pages**: Campaigns, Promotions

Best Practices

Page Component with SEO

import { Metadata } from 'next';
import { Container, Row, Col } from 'react-bootstrap';
import Hero from '@/components/sections/Hero';

export const metadata: Metadata = {
    title: 'Page Title | Site Name',
    description: 'Compelling page description for search engines and social media',
    keywords: ['keyword1', 'keyword2', 'keyword3'],
    openGraph: {
        title: 'Page Title',
        description: 'Page description',
        images: ['/images/og-image.jpg'],
        url: 'https://example.com/page-name',
        type: 'website'
    },
    twitter: {
        card: 'summary_large_image',
        title: 'Page Title',
        description: 'Page description',
        images: ['/images/twitter-card.jpg']
    },
    alternates: {
        canonical: 'https://example.com/page-name'
    }
};

export default function PageName() {
    return (
        <main>
            <Hero
                title="Page Title"
                subtitle="Engaging subtitle"
                ctaText="Call to Action"
                ctaLink="/action"
            />

            <Container className="py-5">
                <Row>
                    <Col lg={8} className="mx-auto">
                        <h2>Section Heading</h2>
                        <p className="lead">
                            Lead paragraph for important information.
                        </p>
                        <p>
                            Regular content paragraph with relevant information.
                        </p>
                    </Col>
                </Row>
            </Container>
        </main>
    );
}

Dynamic Content Page

import { Suspense } from 'react';
import { fetchContent } from '@/lib/api';
import ContentGrid from '@/components/ContentGrid';
import LoadingSpinner from '@/components/LoadingSpinner';

export const dynamic = 'force-dynamic';
export const revalidate = 3600; // Revalidate hourly

export async function generateMetadata({ params }) {
    const content = await fetchContent(params.slug);

    return {
        title: `${content.title} | Site Name`,
        description: content.summary,
        openGraph: {
            images: [content.image || '/images/default-og.jpg']
        }
    };
}

export default async function ContentPage({ params }) {
    const content = await fetchContent(params.slug);

    return (
        <main>
            <Suspense fallback={<LoadingSpinner />}>
                <ContentGrid items={content} />
            </Suspense>
        </main>
    );
}

SEO Metadata Helper

import { Metadata } from 'next';

interface SEOConfig {
    title: string;
    description: string;
    keywords?: string[];
    image?: string;
    url?: string;
    type?: 'website' | 'article' | 'product';
    publishedTime?: string;
    modifiedTime?: string;
    author?: string;
}

export function generateMetadata(config: SEOConfig): Metadata {
    const {
        title,
        description,
        keywords = [],
        image = '/images/default-og.jpg',
        url = 'https://example.com',
        type = 'website',
        publishedTime,
        modifiedTime,
        author
    } = config;

    return {
        title: `${title} | Site Name`,
        description,
        keywords: keywords.join(', '),
        authors: author ? [{ name: author }] : undefined,
        creator: 'Site Name',
        publisher: 'Site Name',

        openGraph: {
            title,
            description,
            url,
            siteName: 'Site Name',
            images: [
                {
                    url: image,
                    width: 1200,
                    height: 630,
                    alt: title
                }
            ],
            locale: 'en_US',
            type,
            publishedTime,
            modifiedTime
        },

        twitter: {
            card: 'summary_large_image',
            title,
            description,
            images: [image