# Imágenes Open Graph

Genera una imagen Open Graph para cada página: la tarjeta que muestra un enlace a tu sitio en un chat, en una red social o en un resultado de búsqueda.

### Sintaxis

```
$ vela enable og
```

No depende de otras funciones ni necesita backend. En un sitio estático las tarjetas se escriben como archivos al compilar; en un servidor se generan la primera vez que se piden.

### Qué obtienes

- `src/lib/og/card.svelte`, la tarjeta: un componente de Svelte con su propio bloque `<style>`, que puedes rediseñar a tu gusto.
- `src/lib/server/og.ts`, que convierte el componente en un PNG de 1200 × 630 con [Takumi](https://github.com/kane50613/takumi).
- Una ruta en `src/routes/og/[...path].png` que sirve la tarjeta de cada página en la misma ruta que la página: `/og/about.png` para `/about`, `/og/index.png` para `/`.
- `withCard` alrededor de las etiquetas meta en `src/routes/+layout.svelte`, que apunta el `og:image` de cada página a su tarjeta.
- El paquete `@takumi-rs/core`, en `dependencies`.

### De dónde sale el texto de la tarjeta

La ruta se lo pide a la página. El título y la descripción que define una página están en las etiquetas meta que genera, y la tarjeta los lee de ahí, así que una página nueva tiene su tarjeta sin configurar nada:

```ts
// src/routes/pricing/+page.ts
import { definePageMetaTags } from 'svelte-meta-tags';

export const load = () => ({
	...definePageMetaTags({ title: 'Precios', description: 'Un solo plan, con cobro mensual.' })
});
```

Una página sin título recibe una tarjeta con el nombre del sitio. Una ruta sin página, o una página que redirige (por ejemplo, una que exige iniciar sesión), no tiene tarjeta.

### Diseñar la tarjeta

Edita `src/lib/og/card.svelte`. Recibe `title`, `description` y `siteName`, y se genera fuera del navegador, así que:

- Usa flexbox para la maquetación y da estilo en el bloque `<style>` del propio componente. Las clases de Tailwind y `app.css` no le llegan.
- Funcionan las propiedades personalizadas, los degradados, `oklch()` y `color-mix()`.
- El texto se dibuja en Geist, que el renderizador incluye. Para usar otra fuente, registra su archivo en `src/lib/server/og.ts`; el comentario de ese archivo muestra cómo.

Abre `/og/index.png` con `vela dev` en marcha para ver el resultado.

### Una página con su propia imagen

Una página que define una imagen Open Graph la conserva. La tarjeta solo sustituye a la imagen por defecto del sitio (`static/og.jpg`):

```ts
definePageMetaTags({
	title: 'Día del lanzamiento',
	openGraph: { images: [{ url: 'https://example.com/launch.jpg', width: 1200, height: 630 }] }
});
```

### Antes de desplegar

La URL de la imagen en las etiquetas meta se construye a partir de `url` en `src/lib/site.ts`. Ponle la dirección en la que se despliega el sitio; si no, los servicios que leen `og:image` irán al host equivocado.

Para quitarlo, ejecuta [`vela disable og`](/es/docs/disable/og).