---
title: Vistas previas de imágenes OG
description: Configura imágenes Open Graph dinámicas para las vistas previas de enlaces en redes sociales.
url: https://docs.thally.io/es/guides/og-images
---

# Vistas previas de imágenes OG

Configura imágenes Open Graph dinámicas para las vistas previas de enlaces en redes sociales.

Thally genera imágenes OG dinámicas para cada página, de modo que tu documentación luzca impecable cuando se comparte en Twitter, Slack, Discord y otras plataformas. Cada imagen incluye el título de la página, la descripción, la etiqueta del grupo y la marca de tu sitio.

## Cómo funciona

Cada página de documentación obtiene automáticamente una URL de imagen OG en sus metadatos:

```
/api/og?title=Quickstart&description=Get+started+in+five+minutes&group=Getting+Started
```

La ruta `/api/og` se ejecuta en el edge y renderiza un PNG de 1200×630 usando [Satori](https://github.com/vercel/satori). Lee los colores de tu marca desde `src/data/site.ts` para que la imagen coincida con tu tema sin configuración adicional.

## Comportamiento predeterminado

Sin ninguna configuración, Thally:

- Usará la paleta de colores de tu **tema oscuro** para el fondo de la imagen, la barra de acento y los colores del texto
- Mostrará el **nombre del sitio** y el **dominio** (desde `THALLY_SITE_URL`) en la barra inferior
- Obtendrá la fuente **Inter** de Google Fonts con peso 700
- Inyectará las etiquetas meta `og:image` y `twitter:image` en cada página de documentación

## Personalizar la imagen OG

Agrega un objeto `ogImage` a la configuración de tu sitio en `src/data/site.ts`. Todos los campos son opcionales — cualquier valor que no especifiques recurrirá a tu paleta de marca.

```ts
export const siteConfig: SiteConfig = {
  name: 'My Product',
  // ...
  ogImage: {
    accent: '#FF6B00',
    domain: 'docs.myproduct.com',
    fontFamily: 'Poppins',
    fontWeight: '600',
  },
}
```

## Referencia de configuración

| Opción | Descripción | Valor predeterminado |
| --- | --- | --- |
| `backgroundStart` | Color inicial del degradado (hex) | Fondo oscuro de la marca |
| `backgroundEnd` | Color final del degradado (hex) | Tono oscuro apagado de la marca |
| `accent` | Color de la barra superior y el orbe (hex) | Acento oscuro de la marca |
| `titleColor` | Color del texto del título (hex) | Primer plano oscuro de la marca |
| `descriptionColor` | Color del texto de la descripción (hex) | Primer plano con 60% de opacidad |
| `groupColor` | Color de la etiqueta del grupo (hex) | Igual que el acento |
| `domain` | Dominio mostrado en la barra inferior | Nombre de host desde `THALLY_SITE_URL` |
| `logoText` | Texto del logotipo en la barra inferior | Nombre del sitio |
| `fontFamily` | Familia de fuente de Google Fonts | `Inter` |
| `fontWeight` | Peso de la fuente de Google Fonts | `700` |

## Configurar la URL del sitio

> **Importante para producción:**
Configura `THALLY_SITE_URL` en tu entorno de alojamiento. Sin ella, los rastreadores resuelven la URL relativa `/api/og?...` contra `localhost`, que no es accesible.

#### Agrega la variable de entorno

En el panel de tu servicio de alojamiento o en `.env.local` para pruebas locales:

```bash
THALLY_SITE_URL=https://docs.myproduct.com
```

#### Reconstruye y despliega

```bash
npm run build
```

El `metadataBase` en el layout raíz usa esta URL para resolver todas las rutas relativas de imágenes OG en URLs absolutas que los rastreadores puedan obtener.

## Pruebas en local

Inicia el servidor de desarrollo y visita el endpoint OG directamente en tu navegador:

```
http://localhost:3040/api/og?title=My+Page&description=A+test+page&group=Guides
```

Verás el PNG renderizado. También puedes usar herramientas como el [Validador de Twitter Cards](https://cards-dev.twitter.com/validator) o [OpenGraph.xyz](https://www.opengraph.xyz/) para verificar tus vistas previas desplegadas.

## Ejemplos de personalización

### Adaptar a una marca morada

```ts
ogImage: {
  accent: '#8B5CF6',
  backgroundStart: '#0F0B2E',
  backgroundEnd: '#1A1145',
}
```

### Usar una fuente y dominio personalizados

```ts
ogImage: {
  fontFamily: 'Space Grotesk',
  fontWeight: '700',
  domain: 'developer.example.com',
  logoText: 'Example Docs',
}
```

### Sobreescribir todos los colores del texto

```ts
ogImage: {
  titleColor: '#FFFFFF',
  descriptionColor: '#94A3B8',
  groupColor: '#F59E0B',
}
```