SEO | Design System Docs

Componentes modulares para SEO siguiendo el principio de composición sobre configuración. Totalmente tipados con TypeScript y extensibles mediante slots.

Componente Unificado (<SEO />)

Componente orquestador que incluye MetaTags, OpenGraph y TwitterCard.

Code Snippet

---
import { SEO } from '@rubenvillar/design-system-astro';
---

<SEO 
  title="Mi Página Increíble"
  description="Descripción optimizada para SEO"
  image="/images/og-cover.png"
  canonicalURL="https://midominio.com/mi-pagina"
  type="article"
  twitterCardType="summary_large_image"
  locale="es-ES"
  siteName="Mi Sitio"
/>

SEO con JsonLd (Slots)

Usa el slot json-ld para inyectar structured data.

Code Snippet

---
import { SEO, JsonLd, type ArticleSchema } from '@rubenvillar/design-system-astro';

const schema: ArticleSchema = {
  '@context': 'https://schema.org',
  '@type': 'Article',
  headline: 'Mi Artículo',
  description: 'Descripción del artículo',
  author: { '@type': 'Person', name: 'Autor' },
  datePublished: '2024-01-15'
};
---

<SEO
  title="Artículo SEO"
  description="Optimiza tu contenido"
  type="article"
  locale="es-ES"
>
  <JsonLd slot="json-ld" schema={schema} />
</SEO>

Composición Atómica

Usa componentes separados para control granular sobre cada meta tag.

Code Snippet

---
import { MetaTags, OpenGraph, TwitterCard, JsonLd } from '@rubenvillar/design-system-astro';

const schema = {
  '@context': 'https://schema.org',
  '@type': 'WebSite',
  name: 'Mi Sitio',
  url: 'https://midominio.com'
};
---

<head>
  <MetaTags 
    title="Título" 
    description="Descripción" 
    canonicalURL="https://midominio.com"
    charset="UTF-8"
    viewport="width=device-width, initial-scale=1.0"
  />
  
  <OpenGraph 
    title="Título OG" 
    description="Descripción OG" 
    image="/og-image.png"
    type="website"
    locale="es_ES"
    siteName="Mi Sitio"
  />
  
  <TwitterCard 
    title="Título Twitter" 
    description="Descripción Twitter" 
    cardType="summary_large_image"
    site="@micuenta"
    creator="@autor"
  />

  <JsonLd schema={schema} />
</head>

MetaRobots y Favicons

Controla indexación y define iconos de forma tipada.

Code Snippet

---
import { MetaRobots, Favicons } from '@rubenvillar/design-system-astro';

const faviconItems = [
  { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
  { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
  { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
  { rel: 'manifest', href: '/site.webmanifest' }
];
---

<head>
  <MetaRobots 
    index={true} 
    follow={true}
    noarchive={false}
    maxImagePreview="large"
  />
  
  <Favicons 
    items={faviconItems}
    themeColor="#000000"
  />
</head>

Tipos TypeScript

Utiliza los tipos para validar schemas y props en tu IDE.

Code Snippet

import { 
  type ArticleSchema,
  type ProductSchema,
  type FAQPageSchema,
  type BreadcrumbListSchema,
  type SEOProps,
  type MetaTagsProps,
  type OpenGraphProps,
  type TwitterCardProps,
  type FaviconItem
} from '@rubenvillar/design-system-astro';

// Usar tipos para validar schemas
const articleSchema: ArticleSchema = {
  '@context': 'https://schema.org',
  '@type': 'Article',
  headline: 'Título del artículo',
  description: 'Descripción',
  author: { '@type': 'Person', name: 'Autor' }
};

Props del Componente SEO

title * Título de la página (requerido)

description * Descripción meta (requerido)

canonicalURL URL canónica (default: Astro.url.href)

image URL de imagen OG/Twitter

type 'website' | 'article' | 'profile' | 'book'

twitterCardType 'summary' | 'summary_large_image' | 'app' | 'player'

locale Locale OG (ej: 'es-ES')

siteName Nombre del sitio para OG

Slots Disponibles

metatags-prepend Contenido antes de meta tags base

opengraph Meta tags OG custom adicionales

twitter Meta tags Twitter custom

json-ld JSON-LD structured data

Tipos JSON-LD Disponibles

ArticleSchema ProductSchema FAQPageSchema BreadcrumbListSchema OrganizationSchema