SEO Optimizer Skill

This Skill helps optimize search engine visibility, metadata, and structured data for the IsLeapYear application.

When to Use

• Adding or updating meta tags
• Configuring Open Graph and Twitter Cards
• Implementing Schema.org structured data
• Updating sitemap.xml configuration
• Modifying robots.txt rules
• Optimizing page titles and descriptions
• Improving social media previews

SEO Configuration Files

Root Layout (src/app/layout.tsx)

Base metadata configuration for the entire application:

export const metadata: Metadata = {
  title: {
    default: "IsLeapYear - High-Performance Leap Year Detection API",
    template: "%s | IsLeapYear"
  },
  description: "Enterprise-grade leap year detection API...",
  keywords: ["leap year", "calendar", "API", "gregorian calendar"],
  authors: [{ name: "IsLeapYear Team" }],
  openGraph: {
    type: "website",
    locale: "en_US",
    url: "https://isleapyear.app",
    siteName: "IsLeapYear",
    images: [{ url: "/og-image.png", width: 1200, height: 630 }]
  },
  twitter: {
    card: "summary_large_image",
    title: "IsLeapYear",
    description: "...",
    images: ["/twitter-image.png"]
  }
};

Dynamic Sitemap (src/app/sitemap.ts)

Generates XML sitemap automatically:

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://isleapyear.app',
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 1,
    },
    // ... more routes
  ];
}

Properties:

• url - Full URL of the page
• lastModified - Last update date
• changeFrequency - How often the page changes
• priority - 0.0 to 1.0 (importance relative to other pages)

Robots Configuration (src/app/robots.ts)

Controls search engine crawling:

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: '/private/',
    },
    sitemap: 'https://isleapyear.app/sitemap.xml',
  };
}

Web App Manifest (src/app/manifest.ts)

PWA configuration for mobile devices:

export default function manifest(): MetadataRoute.Manifest {
  return {
    name: 'IsLeapYear',
    short_name: 'IsLeapYear',
    description: 'Leap year detection API',
    start_url: '/',
    display: 'standalone',
    background_color: '#ffffff',
    theme_color: '#000000',
    icons: [/* ... */],
  };
}

Structured Data (Schema.org)

Located in src/components/structured-data.tsx

Usage Pattern

import { StructuredData } from "@/components/structured-data";
import type { WebPage, Organization } from "schema-dts";

const pageSchema: WebPage = {
  "@type": "WebPage",
  name: "Page Title",
  description: "Page description",
  url: "https://isleapyear.app/page",
};

// In your component:
<StructuredData data={pageSchema} />

Common Schema Types

WebPage:

{
  "@type": "WebPage",
  name: "Page Title",
  description: "Description",
  url: "https://isleapyear.app/page"
}

Organization:

{
  "@type": "Organization",
  name: "IsLeapYear",
  url: "https://isleapyear.app",
  logo: "https://isleapyear.app/logo.png",
  sameAs: ["https://twitter.com/...", "https://github.com/..."]
}

WebAPI:

{
  "@type": "WebAPI",
  name: "IsLeapYear API",
  description: "Leap year detection API",
  documentation: "https://isleapyear.app/docs"
}

FAQPage:

{
  "@type": "FAQPage",
  mainEntity: [
    {
      "@type": "Question",
      name: "What is a leap year?",
      acceptedAnswer: {
        "@type": "Answer",
        text: "A leap year is..."
      }
    }
  ]
}

Page-Specific Metadata

Each page can export its own metadata:

// src/app/docs/page.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "API Documentation",
  description: "Complete API documentation for IsLeapYear",
  openGraph: {
    title: "API Documentation | IsLeapYear",
    description: "...",
  },
};

SEO Best Practices

1. Title Tags

• Keep under 60 characters
• Include primary keyword
• Make it compelling for clicks
• Use template syntax for consistency

2. Meta Descriptions

• Keep between 150-160 characters
• Include call-to-action
• Use primary and secondary keywords naturally
• Unique for each page

3. Open Graph Images

• Dimensions: 1200 x 630 pixels
• File size: Under 1MB
• Format: PNG or JPEG
• Include branding and text overlay

4. Twitter Cards

• Use summary_large_image for rich previews
• Provide card-specific images (1200 x 628 pixels)
• Test with Twitter Card Validator

5. Structured Data

• Use schema-dts for type safety
• Validate with Google's Rich Results Test
• Include Organization schema on homepage
• Add WebAPI schema on API documentation

6. Sitemap

• Update lastModified when content changes
• Set appropriate priority (homepage = 1.0)
• Use realistic changeFrequency
• Include all public pages

Testing SEO

Tools

• Google Search Console - Monitor search performance
• Google Rich Results Test - Validate structured data
• PageSpeed Insights - Check Core Web Vitals
• Twitter Card Validator - Test Twitter previews
• LinkedIn Post Inspector - Test LinkedIn previews

Local Testing

# View sitemap
curl http://localhost:3000/sitemap.xml

# View robots.txt
curl http://localhost:3000/robots.txt

# View manifest
curl http://localhost:3000/manifest.webmanifest

# Check meta tags
curl http://localhost:3000 | grep "<meta"

Common Tasks

1. Adding a New Page to Sitemap

Edit src/app/sitemap.ts:

{
  url: 'https://isleapyear.app/new-page',
  lastModified: new Date(),
  changeFrequency: 'weekly',
  priority: 0.8,
}

2. Updating Page Metadata

Create or update metadata in the page file:

export const metadata: Metadata = {
  title: "New Page Title",
  description: "New description",
};

3. Adding Structured Data

1. Import types from schema-dts
2. Create schema object
3. Use StructuredData component

import { StructuredData } from "@/components/structured-data";
import type { WebPage } from "schema-dts";

const schema: WebPage = { /* ... */ };

<StructuredData data={schema} />

Important Notes

• All metadata uses Next.js built-in Metadata API
• Structured data uses schema-dts for type safety
• Images should be optimized (WebP format preferred)
• Test all changes with SEO validation tools
• Update sitemap when adding/removing pages
• Keep the satirical brand tone even in meta descriptions
• Domain: https://isleapyear.app (production)