SEO & Meta

Programmatic meta tag and JSON-LD generation for servers, scripts, and templates. For declarative <head> tags in components, use the <Head> component — documented in Head.

Route metadata

The default SSR pipeline also supports export const metadata = { title, description } on route modules. See SSR & SSG.

generateMeta

generateMeta returns an HTML string of <title>, <meta>, Open Graph, Twitter, and canonical tags:

import { generateMeta } from '@emberkit/core';

const metaHtml = generateMeta({
  title: 'My Page - EmberKit',
  description: 'A page built with EmberKit',
  keywords: ['emberkit', 'framework', 'typescript'],
  author: 'EmberKit Team',
  robots: 'index, follow',
});

Inject the result into your document <head> (custom server, static template, etc.).

Open Graph

const metaHtml = generateMeta({
  title: 'My Page',
  description: 'Page description',
  openGraph: {
    title: 'My Page',
    description: 'Page description for social sharing',
    type: 'article',
    url: 'https://example.com/my-page',
    images: [
      { url: 'https://example.com/og-image.png', width: 1200, height: 630, alt: 'My Page' },
    ],
    locale: 'en_US',
    siteName: 'My Site',
  },
});

Twitter Cards

const metaHtml = generateMeta({
  twitter: {
    card: 'summary_large_image',
    site: '@emberkit',
    creator: '@author',
    title: 'My Page',
    description: 'Page description',
    image: 'https://example.com/twitter-image.png',
    imageAlt: 'My Page',
  },
});

Canonical URLs

const metaHtml = generateMeta({
  canonical: 'https://example.com/my-page',
});

Structured Data (JSON-LD)

Article Schema

import { generateArticleSchema } from '@emberkit/core';
import { Head } from '@emberkit/core';

function ArticlePage() {
  const schema = generateArticleSchema({
    title: 'My Article',
    description: 'Article description',
    author: 'John Doe',
    publishedAt: '2025-01-15',
    url: 'https://example.com/article',
    image: 'https://example.com/article.png',
  });

  return (
    <>
      <Head>
        <title>My Article</title>
        <script type="application/ld+json">{schema}</script>
      </Head>
      <article>...</article>
    </>
  );
}

Product Schema

import { generateProductSchema } from '@emberkit/core';

const jsonLd = generateProductSchema({
  name: 'EmberKit Pro',
  description: 'Premium features',
  price: '29.99',
  currency: 'USD',
  image: 'https://example.com/product.png',
});

Breadcrumbs

import { generateBreadcrumbs } from '@emberkit/core';

const breadcrumbs = generateBreadcrumbs([
  { name: 'Home', url: 'https://example.com' },
  { name: 'Docs', url: 'https://example.com/docs' },
  { name: 'SEO', url: 'https://example.com/docs/meta' },
]);

Next Steps

Head — Declarative <Head> in JSX
SSR & SSG — Built-in metadata export and SSR pipeline
Markdown/MDX — Frontmatter for content pages