Generador de Open Graph — etiquetas OG y Twitter Card con vista previa
DesarrolloUn generador de Open Graph crea las meta etiquetas og:* y twitter:* que las plataformas sociales leen para mostrar tarjetas de enlace, a partir de un título, una descripción, una URL y una imagen.
Esta página se tradujo con ayuda de IA y aún no ha recibido revisión profesional. Consulta las fuentes citadas antes de usarla para una decisión importante.
Qué es
Open Graph es el protocolo de meta etiquetas que leen Facebook, Slack, KakaoTalk y servicios similares al dibujar una tarjeta de vista previa de enlace (título, descripción, imagen), y las Twitter Cards son la extensión específica de X. Esta herramienta genera las etiquetas og:title, og:description, og:url, og:image, og:site_name y twitter:card, y muestra una vista previa de la tarjeta a partir de tus datos. El resultado real puede variar según la caché y la política de cada plataforma.
Cómo se usa
- 1Introduce el título de la tarjeta, la descripción, la URL de la página y la URL de la imagen.
- 2Elige el og:type y el formato de Twitter Card.
- 3Genera, copia las etiquetas en el <head> y verifícalas con el validador de Open Graph.
Referencia
| Etiqueta | Obligatoria | Notas |
|---|---|---|
| og:title | obligatoria | título de la tarjeta para compartir |
| og:type | obligatoria | tipo de contenido (website, article, ...) |
| og:image | obligatoria | imagen de la tarjeta — se recomienda 1200×630px (1.91:1) |
| og:url | obligatoria | URL canónica de la página |
| twitter:card | recomendada | formato de tarjeta de X (summary, summary_large_image) |
Fuentes y estándares
- The Open Graph protocol - Open Graph protocol
- About X Cards - X Developer Platform
Preguntas frecuentes
¿Se envían mis datos o la URL de la imagen a un servidor?
No. La generación de etiquetas y la vista previa de la tarjeta se ejecutan en tu navegador. La imagen de vista previa la carga directamente tu navegador desde la URL que escribiste y nunca pasa por este servicio.
¿Cuál es el tamaño recomendado para og:image?
1200×630 píxeles (proporción 1.91:1) es la recomendación más usada; las imágenes deben tener al menos 600×315 píxeles para mostrar una tarjeta grande en la mayoría de las plataformas.
¿Necesito etiquetas de Twitter Card si ya tengo etiquetas OG?
X recurre a las etiquetas Open Graph cuando faltan las etiquetas twitter:*, pero definir twitter:card de forma explícita es la manera segura de controlar el formato de la tarjeta.