@m13v/seo-components

42 animated React components for programmatic SEO pages. Ships as TypeScript source (no build step); Next.js transpiles it directly.

Install

npm install @seo/components@npm:@m13v/seo-components

This aliases the package so you import from @seo/components everywhere.

Usage

// Client components
import { Breadcrumbs, ArticleMeta, FaqSection, ComparisonTable } from "@seo/components";
import { SitemapSidebar, GuideChatPanel, HeadingAnchors } from "@seo/components";
import { AnimatedBeam, MorphingText, NumberTicker, Particles } from "@seo/components";

// Server utilities (API routes, server components)
import { walkPages, createGuideChatHandler, discoverGuides } from "@seo/components/server";

Components

Trust & Content

Animation (Magic UI style)

Layout & Display

Code & Technical

CTA

Interactive

Video

Server Utilities

import { walkPages, createGuideChatHandler, logAiUsage } from "@seo/components/server";

Sitemap + robots (canonical setup)

Every site should ship a dynamic sitemap and a robots.txt that references it. The library provides both as one-liners so you never hand-roll either again.

// src/app/sitemap.ts
import type { MetadataRoute } from "next";
import { generateSitemap } from "@seo/components/server";

export default function sitemap(): MetadataRoute.Sitemap {
  return generateSitemap({ baseUrl: "https://yourdomain.com" });
}

// src/app/robots.ts
import type { MetadataRoute } from "next";
import { generateRobots } from "@seo/components/server";

export default function robots(): MetadataRoute.Robots {
  return generateRobots({ baseUrl: "https://yourdomain.com" });
}

generateSitemap() walks src/app/ for page.tsx files (skipping route groups, dynamic segments, api/, underscore-prefixed dirs) and applies priority tiers. For dynamic routes like /blog/[slug], pass extraEntries:

return generateSitemap({
  baseUrl: "https://yourdomain.com",
  extraEntries: posts.map((p) => ({ url: `https://yourdomain.com/blog/${p.slug}` })),
});

generateRobots() emits the default User-agent: * rule, a 13-bot AI allowlist (GPTBot, ChatGPT-User, ClaudeBot, Claude-Web, anthropic-ai, PerplexityBot, CCBot, Google-Extended, Bytespider, cohere-ai, Applebot, Applebot-Extended), and a sitemap URL derived from baseUrl. Override aiAllowlist, disallow, extraRules, or sitemap as needed.

Verify live after deploy:

curl -s -o /dev/null -w "%{http_code}\n" https://yourdomain.com/sitemap.xml  # 200
curl -s https://yourdomain.com/robots.txt | grep sitemap.xml                 # non-empty

JSON-LD Helpers

import { breadcrumbListSchema, faqPageSchema, articleSchema, howToSchema } from "@seo/components";

Theming

Components use CSS variables for brand colors. Override in your globals.css:

:root {
  --seo-accent: #0d9488;       /* teal-600 default */
  --seo-accent-light: #ccfbf1; /* teal-100 */
  --seo-accent-dark: #134e4a;  /* teal-900 */
}

Peer Dependencies

Required: next >= 14, react >= 18, framer-motion >= 11

Optional: remotion, @remotion/player, lottie-react, @google/generative-ai, posthog-js

License

MIT