Tarjeta social editorial

Editorial OG Card

Una imagen de previsualización de enlace coherente por cada publicación. Cada tarjeta incluye:

• Una regla superior con un kicker (la serie o sección), el tema y una línea de metadatos (tiempo de lectura o fecha),
• El titular en una serif grande, representado como texto real para que siempre esté bien escrito, reducido solo lo necesario para que quepa, con una o dos palabras en el color de acento,
• Una línea de autor con iniciales o una foto, y la URL de la publicación,
• Arte a la derecha: una de cuatro composiciones de bloques elegidas según el slug del artículo (para que cada publicación mantenga su tarjeta), una imagen que tú elijas, o nada, con el titular ocupando más espacio.

Un script lee tus publicaciones en cards.json, lo revisas, y un segundo script renderiza cada tarjeta con el Chrome ya instalado en la máquina. Nada que instalar.

Lo que necesitas

• Node.js 18 o más reciente.
• Chrome, Chromium o Edge. El script lo encuentra en las ubicaciones habituales; configura CHROME_PATH si no lo encuentra.
• Acceso a Internet durante el renderizado, para la hoja de estilo de Google Fonts (Instrument Serif, Inter, IBM Plex Mono). Consulta Solución de problemas para renderizar sin conexión.

La carpeta de esta skill es <skill> a continuación: la carpeta donde se encuentra este SKILL.md.

Pasos

1. Crear cards.json

Desde publicaciones en Markdown (Astro, Hugo, Jekyll, Eleventy, Next.js MDX, cualquier formato con front matter):

node <skill>/scripts/from-posts.mjs content/blog --site=yourblog.example --path=/blog/ --out-dir=public/og

Lee todos los archivos .md, .mdx y .markdown dentro de la carpeta y crea una tarjeta por cada publicación, ordenadas de la más reciente a la más antigua. Las publicaciones con draft: true se omiten. Del front matter toma:

Campo de la tarjeta	De
slug	slug, si no permalink, si no el nombre del archivo (o la carpeta para index.md), sin una fecha inicial
title	og_title, si no title
kicker	kicker, si no series, si no --kicker=..., si no "Artículo"
topic	topic, si no la primera category, si no la primera etiqueta
meta	reading_time, si no el recuento de palabras a 230 palabras por minuto: "8 min de lectura"
author	author (texto, o name debajo de él), si no --author=...
url	--site + --path + slug, mostrado debajo del autor
out	<out-dir>/<slug>.png; sin --out-dir, junto a la publicación como <nombre>.og.png (u og.png junto a un index.md)

Ejecútalo de nuevo cada vez que se agreguen publicaciones: las tarjetas ya existentes en cards.json conservan tus ediciones, las nuevas se agregan y las eliminadas se descartan.

A mano, para páginas que no son Markdown (un boletín, páginas de aterrizaje, secciones de documentación), escribe la misma estructura tú mismo:

{
  "theme": { "paper": "#131313", "ink": "#f2ede4", "accent": "#ff7a45" },
  "defaults": { "kicker": "Night Desk", "author": "Ines Varga" },
  "cards": [
    {
      "slug": "issue-41",
      "title": "Why every newsroom is quietly *rebuilding its CMS*",
      "topic": "Issue 41",
      "meta": "Oct 2026",
      "url": "nightdesk.example/41",
      "tags": ["#media", "№ 41"]
    }
  ]
}

defaults completa cualquier campo que una tarjeta omita.

2. Editar las tarjetas

Abre cards.json y revisa los títulos:

• Encierra entre *asteriscos* la palabra o dos que transmitan el mensaje; se muestran en cursiva con el color de acento. "Shipping a design system *in a week*".
• Los titulares se leen mejor con menos de 70 caracteres; el límite es 110. A partir de unos 80 caracteres, el texto se vuelve más pequeño. Acórta los con og_title en el front matter de la publicación, o directamente en cards.json.

Todos los campos que puede tener una tarjeta:

Campo	Qué es	Límite
title	El titular (obligatorio)	110
slug	Nombra el archivo y elige el diseño (obligatorio a menos que se configure out)	–
out	Dónde va el PNG, relativo a cards.json (por defecto og/<slug>.png)	–
kicker	Etiqueta superior izquierda, en el color de acento	24
topic	Después del kicker; también el hashtag predeterminado en el arte	28
meta	Superior derecha: tiempo de lectura, fecha, número de edición	20
author	Nombre del autor; las iniciales van en el círculo	32
avatar	Una foto para el círculo en lugar de las iniciales (ruta o URL)	–
url	Se muestra debajo del nombre	48
art	blocks (predeterminado), image o none	–
image	La imagen para "art": "image" (ruta o URL); se recorta a 390×430	–
layout	Del 1 al 4, para elegir tú mismo la composición de bloques	–
tags	Hasta dos etiquetas pequeñas en el arte, ej. ["#css", "Part 2"]	16 cada una

El tema define el aspecto de cada tarjeta: paper (fondo), ink (texto) y accent, como hexadecimal, además de serif, sans y mono para otras familias de Google Fonts. El color de acento se usa tal cual para los bloques; para el texto, la tarjeta lo oscurece o aclara hasta que sea legible. Dos temas para empezar: el azul tinta predeterminado (#fafaf7, #17181c, #2433e8) y el nocturno (#131313, #f2ede4, #ff7a45).

3. Renderizar

node <skill>/scripts/render.mjs cards.json

Primero verifica cada tarjeta y enumera todos los problemas a la vez, luego renderiza las tarjetas de cuatro en cuatro (aproximadamente un segundo cada una) y comprueba que cada PNG tenga 1200×630. Agrega --scale=2 para imágenes de 2400×1260 (más nítidas en pantallas de alta densidad, aproximadamente el doble de tamaño de archivo), o --only=slug,slug para rehacer algunas tarjetas.

4. Visualizar

Abre og-preview.html, escrito junto a cards.json: todas las tarjetas una al lado de la otra. Verifica que los titulares no se hayan reducido demasiado (acórtalos), que las palabras de acento no hayan caído en la frase equivocada y que las tarjetas vecinas sean lo suficientemente diferentes. Cambia layout en una tarjeta para elegir otra composición.

5. Integrarlas en el sitio

Las tarjetas solo aparecen en las previsualizaciones una vez que cada página apunte a su imagen con una URL absoluta. En el <head> de la página:

<meta
  property="og:image"
  content="https://yourblog.example/og/design-system-in-a-week.png"
/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Shipping a design system in a week" />
<meta name="twitter:card" content="summary_large_image" />

Hazlo una vez en el diseño o plantilla de la publicación, construido a partir del slug, no por publicación:

• Next.js (App Router): en generateMetadata de la ruta de la publicación, devuelve openGraph: { images: [{ url: /og/${slug}.png, width: 1200, height: 630 }] } y twitter: { card: 'summary_large_image' }, con metadataBase configurado en el diseño raíz para que la URL sea absoluta.
• Astro, Eleventy, Jekyll, Hugo: agrega las etiquetas al <head> del diseño base, usando la URL del sitio más /og/ más el slug de la página.
• Imágenes junto a la publicación (sin --out-dir): usa la ruta que tu framework sirve para archivos ubicados en el mismo directorio.

Después de implementar, pega la URL de una publicación en un verificador de previsualización de enlaces, o en un borrador en X, LinkedIn o Slack, para ver la tarjeta. Las plataformas almacenan en caché las previsualizaciones; una imagen cambiada puede tardar un tiempo en mostrarse.

6. Mantenerlo en funcionamiento (opcional)

Para generar tarjetas para nuevas publicaciones en cada compilación, copia las carpetas scripts/ y template/ de esta skill en el repositorio (por ejemplo, tools/og/) y ejecuta ambos scripts antes de la compilación, por ejemplo como un script prebuild en package.json:

"prebuild": "node tools/og/scripts/from-posts.mjs content/blog --site=yourblog.example --path=/blog/ --out-dir=public/og && node tools/og/scripts/render.mjs cards.json"

La máquina de compilación necesita Chrome; la mayoría de las imágenes de CI lo tienen, o configura CHROME_PATH.

Solución de problemas

• render: fix cards.json first: cada línea indica la tarjeta, el campo y el límite.
• No se encontró Chrome: instala Chrome o Chromium, o configura CHROME_PATH con la ruta al ejecutable.
• El titular aparece en una serif simple o las etiquetas en una fuente del sistema: la hoja de estilo de Google Fonts no se cargó. Para renderizar sin conexión, instala Instrument Serif, Inter e IBM Plex Mono (todas gratuitas de Google Fonts) y configura "fonts": "" en el tema. "fonts" también puede ser la URL de tu propia hoja de estilo para otras familias.
• La previsualización en una plataforma muestra la imagen antigua o ninguna: verifica que la URL og:image se abra en un navegador y sea absoluta (con https:// y tu dominio), luego pide a la plataforma que vuelva a escanear la página o espera a que su caché expire.

Archivos

• scripts/from-posts.mjs: de front matter a cards.json, conservando tus ediciones en ejecuciones posteriores. Sin dependencias.
• scripts/render.mjs: verifica cards.json, renderiza los PNG y escribe og-preview.html. Sin dependencias.
• scripts/chrome.mjs: encuentra Chrome y toma las capturas de pantalla.
• template/: la tarjeta en sí. card.html y card.css son el diseño, card.js completa el texto, elige colores legibles, dibuja el arte y ajusta el titular.
• examples/field-notes/: un blog pequeño (posts/) y el cards.json creado a partir de él con from-posts.mjs, con palabras de acento añadidas. examples/night-desk/: un cards.json escrito a mano para un boletín, en modo oscuro. Las previsualizaciones en Lookbk se renderizan a partir de estos.
• NOTICE.md: las fuentes y el software que utiliza esta skill.