SEO et meta

Génération programmatique de balises meta et JSON-LD pour serveurs, scripts et templates. Pour des balises déclaratives <head> dans les composants, utilisez le composant <Head> — documenté dans Head.

Métadonnées de route

Le pipeline SSR par défaut supporte aussi export const metadata = { title, description } sur les modules de route. Voir SSR et SSG.

generateMeta

generateMeta retourne une chaîne HTML de <title>, <meta>, Open Graph, Twitter et balises canoniques :

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',
});

Injectez le résultat dans le <head> de votre document (serveur personnalisé, template statique, 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',
  },
});

URLs canoniques

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

Données structurées (JSON-LD)

Schéma Article

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

Schéma Product

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',
});

Fil d'Ariane

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' },
]);

Prochaines étapes

Head — <Head> déclaratif en JSX
SSR et SSG — Export metadata intégré et pipeline SSR
Markdown/MDX — Frontmatter pour pages de contenu