Generador de Open Graph
Genera etiquetas meta Open Graph y Twitter con vista previa de tarjeta social.
Los valores de tus campos se convierten en etiquetas meta localmente en tu navegador, y nada de lo que introduces se sube a un servidor.
¿Necesitas inspeccionar las partes de un enlace? Prueba el Analizador de URL.
Acerca de Generador de Open Graph
Este generador de Open Graph crea las etiquetas meta de Open Graph y Twitter Card que tus páginas necesitan para mostrar vistas previas de enlaces enriquecidas en las plataformas sociales. Completa el título, la descripción, la URL canónica, la og:image, el tipo, el nombre del sitio y el estilo de Twitter card, y observa cómo una vista previa de tarjeta social en vivo se actualiza mientras escribes antes de copiar el HTML terminado. Es útil para desarrolladores, profesionales de marketing y equipos de contenido que quieren etiquetas meta sociales correctas sin escribir a mano cada propiedad. Como generador de etiquetas meta og y generador de twitter card cubre las etiquetas og:image y las etiquetas meta sociales comunes para que los enlaces compartidos en Facebook, LinkedIn, Slack y X se vean pulidos. Todo se ejecuta localmente en tu navegador, así que lo que escribes se procesa en tu dispositivo y nada se sube a un servidor.
Características
- Genera etiquetas de Open Graph (og:title, og:description, og:type, og:url, og:image, og:site_name)
- Agrega etiquetas de Twitter Card correspondientes (twitter:card, title, description, image)
- Vista previa de tarjeta social en vivo que se actualiza mientras escribes
- Genera un bloque meta HTML limpio y listo para copiar
- Escapa correctamente los caracteres especiales en títulos, descripciones y URLs
- Te deja elegir el og:type y el estilo de twitter:card (como summary_large_image)
- Copia al portapapeles o descarga las etiquetas como meta-tags.html
- Omite los campos vacíos para que el marcado generado quede ordenado
Cómo usar Generador de Open Graph
- Introduce el título de tu página, la descripción, la URL y la URL de la imagen en los campos de entrada.
- Define el og:type y el estilo de Twitter card, luego agrega el nombre de tu sitio.
- Revisa la vista previa de tarjeta social en vivo para confirmar cómo aparecerá el enlace.
- Haz clic en Copiar para tomar el HTML o usa Descargar para guardar meta-tags.html.
- Pega las etiquetas generadas en la sección <head> de tu página.
Ejemplo
Entrada
title: Launch Day
url: https://acme.dev/launch
image: https://acme.dev/og.png
Salida
<title>Launch Day</title>
<!-- Open Graph -->
<meta property="og:title" content="Launch Day" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://acme.dev/launch" />
<meta property="og:image" content="https://acme.dev/og.png" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Launch Day" />
<meta name="twitter:image" content="https://acme.dev/og.png" />
Los campos vacíos se omiten, y og:type tiene como valor predeterminado website.
Errores comunes y solución de problemas
- La og:image no aparece en las vistas previas en Facebook o LinkedIn. — Usa una URL absoluta completa (https://...) para la imagen, no una ruta relativa, y asegúrate de que la imagen sea accesible públicamente.
- Twitter muestra una imagen pequeña en lugar de una tarjeta grande. — Define el valor de twitter:card como summary_large_image para que las plataformas muestren el diseño de imagen a todo el ancho.
- El título o la descripción se ven cortados en la vista previa. — Mantén los títulos en torno a 60 caracteres y las descripciones en torno a 110-160 caracteres para que las plataformas no los trunquen.
- Caracteres especiales como & o < rompen el marcado. — Escribe los caracteres tal cual; el generador los escapa automáticamente a entidades HTML válidas en la salida.
- Las plataformas siguen mostrando datos de vista previa antiguos después de actualizar las etiquetas. — Vuelve a rastrear la URL con el depurador de la plataforma (como el Facebook Sharing Debugger) para limpiar la vista previa en caché.
Preguntas frecuentes
- ¿Qué es el Generador de Open Graph?
- El Generador de Open Graph es una herramienta que produce un bloque HTML listo para pegar con etiquetas meta de Open Graph y Twitter Card construidas a partir de tu título, descripción, URL, imagen, tipo y nombre del sitio.
- ¿Cómo uso el Generador de Open Graph para crear etiquetas meta?
- Completa el título de tu página, la descripción, la URL canónica, la og:image, el tipo y el nombre del sitio, observa cómo se actualiza la vista previa en vivo, luego haz clic en Copiar o Descargar y pega las etiquetas en el <head> de tu página.
- ¿Cuál es la diferencia entre las etiquetas de Open Graph y de Twitter Card?
- Las etiquetas de Open Graph (og:) las leen Facebook, LinkedIn, Slack y muchas otras, mientras que las etiquetas twitter: son específicas de X/Twitter. Esta herramienta genera ambas para que las vistas previas funcionen en todas partes.
- ¿Qué tamaño de og:image funciona mejor?
- Una imagen de 1200x630 píxeles con una URL absoluta es la opción segura para las tarjetas summary_large_image en la mayoría de las plataformas.
- ¿Por qué mis cambios no aparecen cuando comparto el enlace?
- Las plataformas sociales guardan las vistas previas en caché, así que pega tu URL en su depurador de uso compartido para forzar un nuevo rastreo tras actualizar las etiquetas meta.
- ¿Se mantiene privado lo que escribo en el Generador de Open Graph?
- Sí. Las etiquetas se construyen localmente en tu navegador, tus datos nunca salen de tu dispositivo y nada de lo que introduces se sube a un servidor.
Herramientas relacionadas
Todas las herramientas de ArrayKit