¿Cómo genero una imagen para cada página de mi sitio?
Con el comando, después de construir tu sitio. Lee el <title> de cada página, dibuja su imagen y, si la página no tiene og:image, le agrega las etiquetas. Es lo que hace gabrielneuman.com en cada build.
npm i -D github:gneuman/fabrica-ogimage
npx fabrica-ogimage dist --url https://tusitio.com --plantilla articulo --marca "Acme"Funciona con cualquier generador que deje HTML en una carpeta: Astro, Next en modo estático, Hugo, Eleventy, Jekyll. En Netlify, Vercel o Cloudflare Pages lo agregas al final del comando de build:
npm run build && npx fabrica-ogimage dist --url https://tusitio.com| Opción | Qué hace |
|---|---|
--url | URL pública de tu sitio. Con ella, a las páginas sin og:image se les agregan las etiquetas. |
--plantilla | Cuál usar: marca, articulo, titular, emoji, icono, perfil, boton, captura, telefono, ciudad, cita, cifra, versus, evento, duelo, cohort, miniatura, escaparate, tweet, ruta, lista, entrevista, ceoagentico, ceoportada, ceopromo, alianza, caja, recibo, podcast, contactos, equipo, precio. Por defecto, marca. |
--marca | Texto que se quita del título: "Precios | Acme" queda en "Precios". |
--autor, --sitio, --foto | Iguales en todas las imágenes. |
--fondo, --texto, --acento | Tus colores, sin #. |
--carpeta | Dónde quedan las imágenes dentro del build. Por defecto, og. |
Si una página ya declara un og:image de tu sitio dentro de /og/, el comando dibuja la imagen en esa ruta y no toca el HTML.
¿Y si mi sitio es Astro?
Usa la integración: corre lo mismo al terminar cada build y toma la URL de tu astro.config.
import fabricaOg from 'fabrica-ogimage/astro'
export default defineConfig({
site: 'https://tusitio.com',
integrations: [fabricaOg({ plantilla: 'marca', marca: 'Acme', fijos: { sitio: 'tusitio.com' } })],
})¿Cómo monto la API por URL en mi servidor?
La API sirve cuando las páginas se crean solas y no hay un build donde correr el comando: una tienda, un CMS, una app. La imagen sale de una dirección que pegas en tu og:image:
<meta property="og:image" content="https://tu-dominio.com/og/articulo?titulo=Mi%20primer%20post&autor=Ana%20L%C3%B3pez&acento=3b5bdb" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />Cada dirección se dibuja una vez y se guarda; la segunda petición sale de la caché. Elige dónde correrla: