Imagen Open Graph
Envía una plantilla junto con los datos de cada página a nuestra API de imagen Open Graph y recibe de vuelta una tarjeta social renderizada, con el tamaño correcto para las vistas previas de enlaces en las plataformas principales. Existe para que una entrada de blog, una página de producto o una oferta de empleo no tengan que compartir siempre la misma imagen genérica cuando alguien pega su enlace.
Ejecútela online
Ejecute esto en nuestros servidores con su cuenta. Las herramientas gratuitas corren en su navegador; esta cobra de su saldo del KIT según el precio de arriba.
El problema de las imágenes de compartición estáticas
Durante años, el camino fácil fue usar una sola imagen estática repetida en las etiquetas Open Graph de todo un sitio, lo que hacía que cada artículo, cada producto y cada página de aterrizaje se vieran idénticos al compartirse en un chat o una red social. Eso aplana justo el contenido que debería destacar. POST /image/og existe para renderizar una tarjeta distinta por página, tomando el título, un extracto o un precio en el momento de la generación y no en el momento del diseño.
Cómo se construye una tarjeta
Envía una referencia de plantilla junto con los valores dinámicos de esa página específica, la tarea se encola de forma asíncrona y devuelve un task_id de inmediato, y la imagen terminada se entrega mediante un webhook firmado o un enlace firmado válido por 24 horas una vez que finaliza el renderizado. Ese flujo mantiene rápida la generación de páginas, porque su aplicación nunca espera a que termine el renderizado de la imagen para completar una respuesta.
De dónde viene el protocolo Open Graph
Las etiquetas Open Graph se introdujeron en 2010 para que cualquier página web pudiera describirse como un objeto enriquecido al compartirse en redes sociales, estandarizando el título, la descripción y la imagen que debe mostrar la vista previa de un enlace. Más de quince años después, esa misma etiqueta og:image sigue controlando la tarjeta de vista previa en aplicaciones de chat, redes sociales y plataformas de mensajería, y por eso una imagen incorrecta o genérica ahí representa una oportunidad desperdiciada tan visible.
Cómo encaja en un flujo de publicación
Como el endpoint recibe una plantilla y datos en lugar de una imagen diseñada a mano, se integra sin fricción en el hook de publicación de un CMS: cada vez que se crea o actualiza un artículo, producto o evento, se dispara un renderizado, se guarda la imagen devuelta y se actualiza la etiqueta og:image de la página antes del siguiente rastreo o compartición. Ningún diseñador tiene que tocar cada página individual.
Qué determina el aspecto final
El diseño de la tarjeta proviene enteramente de la plantilla que usted proporciona: el endpoint renderiza su diseño con sus datos, no inventa decisiones estéticas. Eso mantiene el resultado predecible y fiel a la marca en cientos o miles de tarjetas generadas, en lugar de producir un aspecto que se va desviando de página en página.
Qué puede hacer con ella
Publicación de blogs y noticias
Renderizar una tarjeta con el titular y la imagen destacada de cada artículo en el momento de publicarlo, en lugar de un solo banner compartido en todo el sitio.
Páginas de producto en e-commerce
Generar una tarjeta con la foto, el nombre y el precio actual del producto para que los enlaces compartidos muestren una vista previa precisa.
Bolsas de trabajo y listados
Producir una tarjeta distinta por cada oferta de empleo con el puesto y la empresa para que los listados compartidos destaquen en un feed.
Páginas de eventos y webinars
Crear una tarjeta con el nombre del evento, la fecha y el ponente para cada página de evento al momento de publicarse.
Preguntas frecuentes
¿Cómo genera una tarjeta la API de imagen Open Graph?
Envía una plantilla y los datos específicos de la página a POST /image/og; devuelve un task_id de inmediato y entrega la imagen renderizada después vía webhook o un enlace firmado válido por 24 horas.
¿Generar imágenes OG es gratis?
No hay capa gratuita: las capas gratis se abusan y ralentizan a todos. El acceso funciona con un saldo prepago de ForHosting KIT: se recarga desde $10.00 (no caduca) y cada solicitud se cobra a su precio publicado, así que una llamada sin saldo devuelve HTTP 402. Sin suscripción, sin tokens ni créditos inventados, y una tarea fallida no se cobra.
¿Cuánto cuesta cada imagen OG?
Cada solicitud cuesta $0.040 más $0.001 por imagen renderizada, y solo se cobra cuando la tarjeta se genera con éxito.
¿Puedo diseñar mi propia plantilla?
Sí, la tarjeta renderizada refleja la plantilla y el diseño que usted proporcione; la API la llena con sus datos dinámicos en lugar de imponer un diseño fijo.
¿De qué tamaño son las imágenes generadas?
Las tarjetas se renderizan en las dimensiones esperadas para el uso estándar de og:image en las principales plataformas de vista previa de enlaces.
¿Se cobra si falla un renderizado?
No. Un renderizado fallido se reintenta automáticamente hasta tres veces y nunca se factura si finalmente no se logra completar.
¿Puedo generar imágenes OG en volumen para todo un catálogo?
Sí, como cada llamada es asíncrona e independiente, puede encolar un renderizado por cada producto, artículo o listado del catálogo y rastrear cada uno por su propio task_id.
¿En qué se diferencia de una og:image estática?
Una imagen estática es el mismo archivo para todas las páginas; esta genera una tarjeta única por página a partir de datos en vivo, que es justo el punto cuando el contenido varía pero la imagen de compartición tradicionalmente no lo hacía.
Para desarrolladores — acceso por API
Todo lo de esta página está disponible por programación. Esta sección es para equipos que quieren integrarlo en sus sistemas; el resto puede usar la herramienta de arriba sin más.
Endpoint de API
¿Prefiere automatizarlo? Un POST autenticado crea la tarea; el resultado llega por webhook o enlace firmado. La misma capacidad también se ejecuta aquí en la web, y pronto desde nuestra app, el email y Telegram.
Llámela desde su stack
curl -X POST https://api.kit.forhosting.com/image/og \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"image":"https://ejemplo.com/imagen.jpg"}'const res = await fetch("https://api.kit.forhosting.com/image/og", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"image": "https://ejemplo.com/imagen.jpg"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/image/og",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"image": "https://ejemplo.com/imagen.jpg"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/og", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"image":"https://ejemplo.com/imagen.jpg"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"image":"https://ejemplo.com/imagen.jpg"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/og", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Ejemplo de solicitud
{
"image": "https://ejemplo.com/imagen.jpg"
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.og",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}La API es asíncrona: la llamada devuelve un task_id al instante y el resultado llega por webhook. El polling está limitado a 1 req/s por tarea.
Precio
Precio publicado — sin tokens ni créditos inventados. Una tarea fallida no se cobra.
Límites
max_mb | 15 |
max_megapixels | 12 |
Errores
| HTTP | Código | Significado |
|---|---|---|
401 | unauthorized | API key ausente o inválida. |
402 | insufficient_balance | El saldo no cubre el precio de la tarea. |
404 | unknown_type | El tipo de tarea no existe. |
429 | rate_limited | Demasiadas peticiones. Use el webhook en vez de sondear. |
422 | task_failed | La tarea falló tras 3 reintentos. No se cobra. |