@alloylab/seo Playground

Interactive playground for testing SEO package functionality

ā† Back to Documentation
React
Next.js
SvelteKit
Vanilla JS

Input Data

{ "siteSettings": { "siteName": "My Awesome Site", "siteDescription": "A modern website with great SEO" }, "page": { "id": "1", "title": "About Us", "slug": "about", "status": "published", "excerpt": "Learn more about our company and mission", "seo": { "title": "About Our Company | My Awesome Site", "description": "Learn more about our company, mission, and values", "keywords": "about, company, mission, values" }, "createdAt": "2024-01-01T00:00:00.000Z", "updatedAt": "2024-01-01T00:00:00.000Z" }, "baseUrl": "https://myawesomesite.com", "type": "page" }

Generated Output

React Usage

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 Usage

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 Usage

// +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 };
};

Vanilla JavaScript Usage

import { generateSEO, generateMetaTags } from '@alloylab/seo';

const seo = generateSEO(data, siteSettings, 'page', baseUrl);
const metaTags = generateMetaTags(seo);

// Insert into document head
document.head.insertAdjacentHTML('beforeend', metaTags);