SEO y meta

Generación programática de meta tags y JSON-LD para servidores, scripts y plantillas. Para tags declarativos de <head> en componentes, usa el componente <Head> — documentado en Head.

generateMeta

generateMeta devuelve una cadena HTML de <title>, <meta>, Open Graph, Twitter y tags canónicos:

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

Inyecta el resultado en el <head> de tu documento (servidor personalizado, plantilla estática, 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 canónicas

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

Datos estructurados (JSON-LD)

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

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

Migas de pan

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

Próximos pasos

  • Head — <Head> declarativo en JSX
  • SSR y SSG — Export metadata integrado y pipeline SSR
  • Markdown/MDX — Frontmatter para páginas de contenido