Generador de Open Graph
Genera meta etiquetas Open Graph (og:) y Twitter Card con vista previa en vivo del enlace, dimensiones de imagen y campos de artículo/producto/vídeo.
Vista previa del enlace
El Generador de Open Graph crea las meta etiquetas og: y Twitter Card que controlan cómo se ve tu enlace cuando se comparte en Facebook, LinkedIn, Twitter/X, Slack, WhatsApp y Discord. Elige el tipo de contenido, añade un título, una descripción, una URL y una o más imágenes de vista previa con dimensiones y texto alternativo, y copia un fragmento limpio para el
de tu página — con una tarjeta de vista previa en vivo que refleja lo que verá la gente.¿Qué es Open Graph?
Open Graph es un protocolo creado por Facebook que permite que cualquier página web se convierta en un objeto enriquecido dentro de un grafo social. Al añadir meta etiquetas og: al
de tu página, le indicas a las plataformas sociales exactamente qué título, descripción, imagen y URL mostrar cuando se comparte tu enlace, en lugar de dejar que lo adivinen. Twitter/X lee los mismos datos junto con sus propias etiquetas twitter: para representar una Card.Cómo generar etiquetas Open Graph
Rellena los campos de la izquierda y copia el fragmento en tu
.- Elige tu og:type — website para la mayoría de las páginas, o article, product o video para desbloquear etiquetas específicas de cada tipo.
- Introduce el og:title, el og:description y el og:url, además de un nombre de sitio y un locale opcionales.
- Añade una o más imágenes con URL, texto alternativo y ancho/alto (se recomienda 1200×630).
- Revisa la tarjeta de vista previa en vivo, haz clic en Copiar y pega las etiquetas dentro del de tu página.
Tamaño de imagen Open Graph recomendado
La mayoría de las plataformas muestran mejor una vista previa grande a 1200×630 píxeles (una proporción 1.91:1). Declarar og:image:width y og:image:height ayuda a las plataformas a reservar el espacio correcto antes de que la imagen cargue, y og:image:alt proporciona una descripción accesible. Puedes incluir varias etiquetas og:image para que las plataformas elijan la más adecuada.
¿Por qué usar este generador de Open Graph?
- Centrado en Open Graph y Twitter Cards, con una tarjeta de vista previa en vivo para que veas el resultado antes de publicar.
- Campos específicos por tipo para artículo (autor, fecha de publicación, sección, etiquetas), producto (precio) y vídeo (duración).
- Admite varias entradas og:image con URL segura, ancho, alto y texto alternativo.
- Escapa los caracteres especiales automáticamente para que las comillas y los corchetes angulares queden seguros.
- Funciona por completo en tu navegador — no se sube nada y el fragmento es tuyo para copiar.
Preguntas frecuentes
¿Cuál es la diferencia entre Open Graph y las meta etiquetas?
Las etiquetas Open Graph son una familia específica de meta etiquetas que usan el atributo property (como og:title y og:image) para describir cómo aparece tu página al compartirla en redes sociales. Las meta etiquetas de SEO normales (como meta description) le informan a los buscadores sobre tu página. Esta herramienta se centra en las etiquetas de vista previa social; si también necesitas etiquetas básicas de SEO y charset, usa el Generador de Meta Tags.
¿Cuál es el mejor tamaño de imagen para Open Graph?
1200×630 píxeles es la opción más segura y se muestra como una vista previa grande en la mayoría de las plataformas. Mantén el contenido importante lejos de los bordes, no superes unos pocos megabytes y añade og:image:alt para la accesibilidad. Puedes proporcionar más de una imagen y las plataformas elegirán la que mejor encaje.
¿Necesito etiquetas Twitter Card si ya tengo Open Graph?
Twitter/X recurre a las etiquetas Open Graph cuando faltan las etiquetas twitter:, así que las vistas previas básicas siguen funcionando. Añadir twitter:card y twitter:site te da control explícito sobre el tipo de tarjeta y la atribución, por eso este generador las incluye de forma predeterminada. Puedes desactivarlas si solo quieres etiquetas og:.
¿Qué hace og:type?
og:type le indica a las plataformas qué tipo de contenido es la página — website, article, product, video, profile o book. Algunos tipos desbloquean campos estructurados adicionales, como article:published_time y article:author para artículos, o product:price:amount para productos. Esta herramienta muestra los campos relevantes cuando cambias el tipo.
¿Es gratuito y privado este generador de Open Graph?
Sí. Es completamente gratuito y funciona por completo en tu navegador con JavaScript. Nada de lo que introduces se sube ni se almacena — las etiquetas y la vista previa se generan localmente en tu dispositivo.