JSPM

@grellium/seo

1.0.1
    • ESM via JSPM
    • ES Module Entrypoint
    • Export Map
    • Keywords
    • License
    • Repository URL
    • TypeScript Types
    • README
    • Created
    • Published
    • Downloads 12
    • Score
      100M100P100Q36423F
    • License MIT

    Lightweight SEO metadata builder for Next.js and TypeScript projects.

    Package Exports

    • @grellium/seo
    • @grellium/seo/dist/index.js

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@grellium/seo) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    @grellium/seo

    Simple, flexible SEO metadata helper for Next.js 14+ applications.

    Installation

    npm install @grellium/seo

    Quick Start

    import { buildMetadata } from "@grellium/seo";

export const metadata = buildMetadata({
  title: "Grellium Store",
  description: "Premium products for modern developers",
  urlPath: "/products",
  image: "/og-image.png"
});

    API Reference

    buildMetadata(options)

    Generates comprehensive metadata object for Next.js pages.

    Parameters

    Parameter Type Required Default Description
    title string ✅ - Page title (used for <title> and Open Graph)
    description string ❌ "Premium products for modern developers" Page description for meta tags
    urlPath string ❌ "/" Relative path for canonical URL
    image string ❌ "/default-og.png" Open Graph image path

    Returns

    Returns a metadata object compatible with Next.js App Router's generateMetadata() function.

    Environment Setup

    Set your base domain in .env.local:

    NEXT_PUBLIC_BASE_URL=https://yourdomain.com

    For development, it defaults to http://localhost:3000.

    Examples

    Basic Page Metadata

    import { buildMetadata } from "@grellium/seo";

export const metadata = buildMetadata({
  title: "About Us",
  description: "Learn about our company and mission",
  urlPath: "/about"
});

    Product Page with Custom Image

    import { buildMetadata } from "@grellium/seo";

export const metadata = buildMetadata({
  title: "Premium Headphones - Grellium Store",
  description: "High-quality wireless headphones with noise cancellation",
  urlPath: "/products/headphones",
  image: "/images/headphones-og.jpg"
});

    Dynamic Metadata Generation

    import { buildMetadata } from "@grellium/seo";

export async function generateMetadata({ params }: { params: { slug: string } }) {
  const product = await getProduct(params.slug);
  
  return buildMetadata({
    title: `${product.name} - Grellium Store`,
    description: product.description,
    urlPath: `/products/${params.slug}`,
    image: product.image
  });
}

    Features

    • 🧼 Clean Metadata: Generates Open Graph and Twitter Card metadata
    • 🔁 Environment Aware: Uses NEXT_PUBLIC_BASE_URL for absolute URLs
    • 🧩 Next.js Compatible: Works seamlessly with App Router's generateMetadata()
    • 🧘‍♀️ Flexible: Optional parameters with sensible defaults
    • 📱 Social Ready: Optimized for social media sharing
    • 🔍 SEO Friendly: Includes canonical URLs and proper meta tags

    TypeScript Support

    Full TypeScript support with proper type definitions included.

    interface MetadataOptions {
  title: string;
  description?: string;
  urlPath?: string;
  image?: string;
}

    Framework Integration

    This package is part of the Grellium eCommerce framework ecosystem.

    • @grellium/analytics - Google Analytics integration (coming soon)
    • @grellium/ui - UI component library (coming soon)
    • @grellium/auth - Authentication utilities (coming soon)

    Requirements

    • Next.js 14+
    • React 18+
    • TypeScript (recommended)

    License

    MIT © Grellium

    Contributing

    Contributions are welcome! Please read our contributing guidelines before submitting PRs.

    Support