@geenius/seo

Metadata builders, document-head helpers, preview surfaces, score cards, and sitemap tooling for Geenius applications.

Overview

@geenius/seo packages the shared SEO contract together with React, SolidJS, vanilla CSS, and Convex variants behind one stable root export map. It is designed for page metadata composition, structured data, preview review, SEO score feedback, and sitemap management.

Installation

pnpm add @geenius/seo

Imports

import { createSEOConfig, createPageMeta } from '@geenius/seo'
import { buildCanonical, calcSEOScore } from '@geenius/seo/shared'
import { MetaEditor, SEOPreview, SEOScoreCard, SeoProvider, useSEO } from '@geenius/seo/react'
import { JsonLd, MetaEditor as MetaEditorCss, SEOPreview as SEOPreviewCss } from '@geenius/seo/react-css'
import { createCanonical, createSEO, SEOHead as SolidSEOHead } from '@geenius/seo/solidjs'
import { JsonLd as SolidCssJsonLd, createSEO as createSEOCss, SEOPreview as SolidCssPreview } from '@geenius/seo/solidjs-css'
import { getSEOMeta, seoTables, upsertSEOMeta } from '@geenius/seo/convex'

Quick Start

import { createSEOConfig, createPageMeta } from '@geenius/seo'
import { SEOHead, SEOPreview, SeoProvider, useCanonical } from '@geenius/seo/react'

const seoConfig = createSEOConfig()
  .withSiteName('Geenius')
  .withSiteUrl('https://geenius.dev')
  .withTitleTemplate('%s | Geenius')
  .build()

function ProductRoute() {
  const canonical = useCanonical('/products/seo')
  const meta = createPageMeta(
    seoConfig,
    'SEO Toolkit',
    'Review metadata, score issues, and publish consistent search previews.',
  )
    .withCanonical(canonical)
    .withKeywords(['seo', 'metadata', 'sitemap'])
    .build()

  return <SEOHead meta={meta} />
}

export function App() {
  return (
    <SeoProvider config={seoConfig}>
      <div>
        <ProductRoute />
        <SEOPreview meta={createPageMeta(seoConfig, 'SEO Toolkit', 'Review metadata, score issues, and publish consistent search previews.').build()} />
      </div>
    </SeoProvider>
  )
}

Storybook

The package ships React and SolidJS Storybook apps that render the runtime and vanilla CSS variants side by side through the shared @geenius/storybook shell bridge.

• React app: apps/storybook-react/
• SolidJS app: apps/storybook-solidjs/
• Shared navigation surface: apps/storybook-surface.ts

Build checks:

pnpm --filter ./apps/storybook-react build
pnpm --filter ./apps/storybook-solidjs build

Package Contract

• Root imports map to the shared SEO contract.
• Framework variants are consumed through stable subpath imports only.
• React and SolidJS Storybook apps compare the Tailwind and vanilla CSS variants side by side.
• Storybook workspaces are development-only and excluded from root build, lint, test, and publish flows.

License

MIT