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.
• 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:

// 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):

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.