Un nuevo artículo. Una imagen que compartir.

Dale a cada página publicada su propia vista previa. Diseña una vez, envía el siguiente título como JSON y crea una imagen Open Graph con tu identidad visual.

Crear tu plantilla de imagen Ver la petición JSON

PRODUCT NOTESTu próximo lanzamiento, listo para compartir.

Composición ilustrativa de 1200 × 630. Recréala o usa tu propia plantilla; la petición inferior cambia title y category.

JSON
Render PNG
URL pública
og:image

Tu contenido cambia. Tu diseño sigue siendo reconocible.

Conecta un blog, un catálogo de productos o tus novedades. Un paso de publicación en servidor aporta los datos, genera el archivo y guarda su URL pública junto al artículo.

En el editor, crea una plantilla de una página de 1200 × 630. Nombra title a la capa del titular y category a la de categoría. Usa nombres únicos.
Guarda la plantilla, copia su UUID y crea una API key en la misma cuenta de Pikstrapi.
Genera una imagen antes de publicar el artículo. Comprueba un título largo al tamaño previsto y después conecta el disparador de tu CMS.

De JSON a un archivo PNG.

Guarda el cuerpo como og-render.json y sustituye YOUR_TEMPLATE_ID. Las dimensiones de la imagen proceden de la plantilla guardada; esta petición PNG cambia su contenido.

{
  "templateId": "YOUR_TEMPLATE_ID",
  "exportFormat": "png",
  "mode": "immediate",
  "layers": {
    "title": {
      "text": "Tu próximo lanzamiento, listo para compartir."
    },
    "category": {
      "text": "PRODUCT NOTES"
    }
  }
}

curl --fail-with-body --request POST "https://api.pikstrapi.com/api/v1/templates/generate-image" \
  --header "x-api-key: $PIKSTRAPI_API_KEY" \
  --header "Content-Type: application/json" \
  --data @og-render.json \
  --output article-001.png

Configura PIKSTRAPI_API_KEY en tu servidor. Si aparece, sustituye YOUR_API_BASE_URL por tu URL base con /api/v1. El comando usa sintaxis POSIX; en Windows puedes usar el ejemplo generado por el API playground.

Una petición inmediata correcta devuelve HTTP 200 con image/png y los bytes del archivo. Sube article-001.png a una ubicación HTTPS pública antes de actualizar los metadatos de tu página. Mantén las credenciales fuera de la URL de imagen y del código de la página.

Ver la guía API completa y el modo diferido

Conecta la imagen pública a tu página.

Sustituye las URLs de ejemplo por las del artículo y la imagen publicados. Incluye estas etiquetas en el head renderizado en servidor y escapa el texto dinámico con las herramientas HTML de tu framework.

Open Graph define URL, dimensiones, formato y texto alternativo de imagen. 1200 × 630 es la composición de esta guía, no un tamaño obligatorio del protocolo.

Protocolo Open Graph: propiedades de imagen

<meta property="og:type" content="article" />
<meta property="og:url" content="YOUR_PUBLIC_ARTICLE_URL" />
<meta property="og:title" content="Tu próximo lanzamiento, listo para compartir." />
<meta property="og:image" content="YOUR_PUBLIC_IMAGE_URL" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Tu próximo lanzamiento, listo para compartir." />

Comprueba la vista previa antes de compartir.

Un render terminado es solo una parte del flujo de publicación. El rastreador social debe poder acceder a tu página y a su imagen.

Abre la URL de imagen sin iniciar sesión. Confirma una respuesta correcta, image/png y las dimensiones reales de 1200 × 630.
Revisa og:image en el código fuente de la página. No dependas de JavaScript que inserte metadatos después de cargarla.
Usa una URL nueva para cada versión modificada, conserva una imagen de respaldo y revisa la vista previa del servicio donde compartas.
Si falla la generación, conserva la imagen anterior y revisa el error antes de repetir. No publiques la confirmación inicial de un trabajo como si fuera una imagen.

Dudas antes de conectar tu CMS.

¿La API devuelve una URL Open Graph?

El modo inmediato devuelve los bytes del PNG, no una URL en JSON. Sube la imagen a tu almacenamiento público o CDN y añade esa URL HTTPS estable a og:image. El modo diferido entrega un trabajo y puede avisarte por webhook; comprueba el acceso a su archivo antes de usarlo para los rastreadores sociales.

¿Necesito mantener mi propia infraestructura Chrome?

Pikstrapi renderiza tu plantilla guardada. Tu aplicación envía JSON y publica el resultado en su destino público. Mantén la API key en tu servidor o en las credenciales de tu automatización.

¿La imagen se actualiza en cuanto cambio el artículo?

Tu flujo debe generar y publicar la nueva versión. Los servicios sociales guardan vistas previas en caché. Usa una URL de imagen nueva para cada versión y comprueba la vista previa en el servicio donde vayas a compartirla; ese servicio controla cuándo se actualiza.

Prepara tu próxima página para compartir.

Empieza con una plantilla y un artículo. Después conecta la misma petición a la herramienta de automatización que ya utilizas.

Crear tu cuenta de Pikstrapi n8n Make Zapier