@alloylab/seo

A comprehensive SEO package for React, Next.js, SvelteKit, and vanilla JavaScript with Payload CMS integration.

v1.0.0

🚀 Features

@alloylab/seo provides everything you need for comprehensive SEO management across different frameworks.

⚛️

React Integration

Custom hooks like useSEO() for seamless React integration with automatic meta tag management.

▲

Next.js App Router

Built-in support for Next.js App Router with generateMetadata() and HOC patterns.

🟠

SvelteKit Support

Native SvelteKit integration with load functions, stores, and SSR support.

📊

Structured Data

Generate JSON-LD structured data for Articles, Products, FAQs, Local Business, and more.

🗺️

Sitemap & Robots

Automatic sitemap generation and robots.txt creation with CLI tools.

🔌

Payload CMS Plugin

Native Payload CMS integration with automatic SEO fields, hooks, and admin UI.

📦 Installation

Install the package using your preferred package manager:

# npm
npm install @alloylab/seo

# yarn
yarn add @alloylab/seo

# pnpm
pnpm add @alloylab/seo

🎯 Usage

React Hook

import { useSEO } from '@alloylab/seo';

function MyPage({ page }) {
  const { title, description, metaTags } = useSEO({
    siteSettings: { siteName: 'My Site' },
    page,
    baseUrl: 'https://mysite.com',
    type: 'page'
  });

  return (
    <div>
      <head>{metaTags}</head>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  );
}

Next.js App Router

import { generateMetadata } from '@alloylab/seo/nextjs';

export async function generateMetadata({ params }) {
  const page = await getPage(params.slug);

  return generateMetadata({
    siteSettings: { siteName: 'My Site' },
    page,
    baseUrl: 'https://mysite.com',
    type: 'page'
  });
}

SvelteKit

// +page.ts
import { generateSEOData } from '@alloylab/seo/sveltekit';

export const load = async () => {
  const seo = generateSEOData({
    siteSettings: { siteName: 'My Site' },
    baseUrl: 'https://mysite.com',
    type: 'home'
  });

  return { seo };
};

🎮 Interactive Playground

Try out the SEO package with our interactive playground. Test different configurations and see the generated output in real-time.

Live Demo

Experience the full power of @alloylab/seo with our interactive playground.

🚀 Open Playground

📚 API Reference

Core Functions

  • generateSEO(page, siteSettings, type, baseUrl) - Generate SEO data
  • generateMetaTags(seo) - Generate HTML meta tags
  • generateStructuredData(type, data) - Generate JSON-LD structured data

React Hooks

  • useSEO(options) - React hook for SEO management
  • useSEOManager(options) - Advanced SEO state management

Framework Integrations

  • generateMetadata() - Next.js App Router metadata
  • generateSEOData() - SvelteKit SEO data generation
  • createSEOStore() - SvelteKit reactive store

🔌 Payload CMS Integration

@alloylab/seo includes a complete Payload CMS plugin for seamless integration. 

import { seoPlugin } from '@alloylab/seo/payload';

export default buildConfig({
  plugins: [
    seoPlugin({
      collections: ['pages', 'posts'],
      globals: ['site']
    })
  ]
});

Ready to Get Started?

Start building better SEO into your applications today.

Try the Playground View on GitHub