Generador de gráficos abiertos

<meta property="og:title" content="">
<meta property="og:site_name" content="">
<meta property="og:url" content="">
<meta property="og:description" content="">
<meta property="og:type" content="">

Acerca de Generador de gráficos abiertos

El generador de Open Graph de ToolsPivot crea las meta etiquetas que controlan como se ve tu web al compartirla en Facebook, LinkedIn, WhatsApp o Pinterest. Sin estas etiquetas, las redes sociales muestran imagenes aleatorias y textos cortados que espantan a los clics. Con esta herramienta produces codigo OG valido en segundos, sin tocar una linea de HTML.

Que hace el generador de Open Graph y por que lo necesitas

Las etiquetas Open Graph son fragmentos de codigo que indican a las redes sociales que titulo, descripcion e imagen mostrar cuando alguien comparte un enlace. Facebook creo este protocolo en 2010, y hoy lo usan LinkedIn, WhatsApp, Telegram, Discord y Slack.

El problema es que si tu pagina no tiene etiquetas OG, cada plataforma elige lo que le parece. A veces muestra la foto del banner publicitario. Otras veces recorta el titulo a mitad de frase.

Con el generador de ToolsPivot rellenas los campos (titulo, URL, descripcion, imagen) y recibes el codigo listo para copiar en la seccion de tu web. Tambien puedes analizar etiquetas existentes para detectar errores antes de compartir.

Y lo mejor: no necesitas saber HTML. El codigo sale formateado y validado, preparado para funcionar en cualquier CMS, ya sea WordPress, Shopify o PrestaShop.

Ventajas de usar un generador de etiquetas OG

Codigo generado al instante. Introduces los datos y en segundos tienes las meta etiquetas completas, con la sintaxis correcta.

Vista previa en tiempo real. Compruebas como se vera tu enlace en Facebook y LinkedIn antes de publicar nada.

Cero errores de sintaxis. Las comillas mal cerradas o las propiedades incompletas son la causa numero uno de que las etiquetas OG no funcionen. Aqui eso no pasa.

Compatible con todas las plataformas. El codigo funciona en Facebook, LinkedIn, Pinterest, WhatsApp, Slack, Discord y Telegram sin modificaciones.

Coherencia de marca. Decides exactamente que imagen, titulo y descripcion aparecen cada vez que alguien comparte tu contenido.

Sin conocimientos tecnicos. Cualquier persona con acceso al de su web puede implementar las etiquetas, aunque no sepa escribir HTML.

Mejora indirecta del SEO. Las etiquetas OG no afectan directamente al posicionamiento, pero un enlace con buena pinta en redes atrae mas clics, mas trafico y mas enlaces naturales. Y eso si cuenta para Google.

Funcionalidades del generador Open Graph

Etiqueta og:title. Define el titulo que aparece en la vista previa social. El generador incluye un contador de caracteres para no pasarte de los 60 recomendados.

Etiqueta og:description. Crea la descripcion que acompana al enlace compartido. Si necesitas ideas para redactarla, el generador de meta descripciones con IA puede ayudarte.

Etiqueta og:image. Especifica la URL de la imagen destacada. El tamano optimo es 1.200 x 630 pixeles para que se muestre como tarjeta grande.

Etiqueta og:url. Establece la URL canonica de la pagina para evitar problemas de contenido duplicado en redes.

Selector de og:type. Elige entre articulo, sitio web, producto, video, musica y otros tipos para que las plataformas clasifiquen bien tu contenido.

Etiqueta og:site_name. Anade el nombre de tu sitio para que aparezca como referencia en cada enlace compartido.

Soporte para multiples imagenes. Genera etiquetas para varias imagenes con especificaciones de ancho y alto.

Soporte og:locale. Configura el idioma y region del contenido, algo clave si tu web tiene versiones en varios idiomas.

Codigo listo para copiar. Un clic y tienes todas las etiquetas en el portapapeles, preparadas para pegar en tu web.

Compatibilidad con generador de titulos con IA. Combina ambas herramientas para optimizar titulo SEO y titulo social de forma coordinada.

Como funciona paso a paso

Paso 1: Escribe el titulo. Introduce el titulo de tu contenido. Mantenlo por debajo de 60 caracteres para que no se corte en las vistas previas.

Paso 2: Anade la descripcion. Redacta un resumen atractivo de entre 155 y 160 caracteres que invite a hacer clic.

Paso 3: Pega la URL de la imagen. Usa una imagen de 1.200 x 630 pixeles en formato JPEG o PNG. Si pesa demasiado, pasala por el compresor de imagenes antes de subirla.

Paso 4: Introduce la URL de la pagina. Anade la direccion canonica donde vive el contenido de forma permanente.

Paso 5: Selecciona el tipo de contenido. Elige articulo, sitio web, producto o video segun corresponda.

Paso 6: Genera y copia el codigo. Pulsa generar, revisa la vista previa y copia las etiquetas directamente a la seccion de tu pagina.

Cuando usar el generador de etiquetas OG

Este generador es util cada vez que publicas contenido pensado para difundirse en redes sociales. Pero hay momentos en los que resulta especialmente critico.

Articulos de blog nuevos. Antes de publicar, genera las etiquetas para que el primer enlace compartido ya muestre la imagen y el titulo correctos.

Lanzamiento de productos en e-commerce. En MercadoLibre, Amazon Espana o tu tienda Shopify, un enlace con buena vista previa convierte mucho mas.

Campanas de marketing. Si tu equipo o tus clientes van a compartir URLs en LinkedIn o WhatsApp Business, las etiquetas OG garantizan coherencia visual.

Redisenos web. Cuando cambias la identidad visual de tu sitio, hay que actualizar tambien las etiquetas OG o seguiran mostrando el logo antiguo.

Promocion de eventos. Crea vistas previas con fecha, lugar e imagen del evento para que destaquen en el feed.

Portafolios profesionales. Freelancers en Workana o disenadores que comparten su trabajo en LinkedIn necesitan que cada enlace muestre su mejor imagen.

Paginas de aterrizaje. Cada landing page de una campana merece su propia etiqueta OG personalizada, no la generica del sitio.

Casos de uso reales

Community manager preparando contenido para redes

Situacion: Un community manager de una pyme en Madrid necesita compartir la nueva entrada del blog corporativo en LinkedIn y Facebook.

Como lo resuelve:

• Abre el generador y escribe un titulo llamativo de 55 caracteres
• Anade una descripcion orientada a generar clics en profesionales del sector
• Sube la imagen del articulo a 1.200 x 630 px

Resultado: El enlace se muestra con tarjeta grande en ambas plataformas, logrando el doble de interacciones que las publicaciones sin OG personalizado.

Tienda online en MercadoLibre y Shopify

Situacion: Un vendedor en Buenos Aires que opera en MercadoLibre y tiene su propia tienda Shopify quiere que sus productos se vean bien al compartirlos por WhatsApp.

Como lo resuelve:

• Genera etiquetas og:type "product" con imagen de fondo blanco
• Incluye el nombre del producto y precio en la descripcion
• Hace una auditoria SEO completa antes del lanzamiento

Resultado: Los enlaces compartidos por WhatsApp Business muestran una vista previa profesional con foto del producto, nombre y precio visible.

Agencia de marketing digital en CDMX

Situacion: Una agencia en Ciudad de Mexico gestiona las redes de 12 clientes y necesita estandarizar las vistas previas sociales de todos.

Como lo resuelve:

• Crea plantillas de etiquetas OG por cliente con colores y logos corporativos
• Usa el redimensionador de imagenes para ajustar cada foto al tamano optimo
• Implementa las etiquetas en WordPress con Yoast o Rank Math

Resultado: Todos los enlaces compartidos de todos los clientes mantienen coherencia visual, reforzando la imagen de marca.

Estudiante compartiendo su TFG en redes

Situacion: Una estudiante de la Universidad Complutense termina su Trabajo de Fin de Grado y quiere compartir la version web en LinkedIn para buscar empleo.

Como lo resuelve:

• Genera etiquetas OG con un titulo profesional y una descripcion del proyecto
• Incluye una imagen representativa del trabajo
• Verifica el resultado con el verificador de Open Graph

Resultado: El enlace en LinkedIn muestra una tarjeta profesional que destaca entre las publicaciones genericas del feed.

Especificaciones de imagen para Open Graph

La etiqueta og:image exige dimensiones concretas para que la vista previa se muestre bien. Facebook recomienda 1.200 x 630 pixeles con proporcion 1,91:1, que genera una tarjeta grande. Las imagenes por debajo de 600 x 315 aparecen como miniaturas diminutas.

El tamano minimo aceptado es 200 x 200 pixeles, pero el resultado es practicamente invisible. No merece la pena.

Cada plataforma tiene sus preferencias: LinkedIn trabaja con 1.200 x 627 px, Twitter con 1.200 x 675 px (proporcion 16:9) y Pinterest prefiere 1.000 x 1.500 px en vertical. Lo mas practico es usar 1.200 x 630 como estandar y ajustar solo si Pinterest es tu canal principal.

En cuanto al formato, JPEG funciona mejor para fotografias y PNG para graficos con texto o transparencia. Si la imagen supera los 5 MB, la plataforma puede ignorarla. Incluir las etiquetas og:image:width y og:image:height permite que las redes hagan pre-caching y tu imagen se muestre bien desde el primer momento.

Como verificar que tus etiquetas OG funcionan

Generar las etiquetas es solo la mitad del trabajo. La otra mitad es comprobar que se ven bien en cada plataforma.

Facebook tiene su Sharing Debugger, que muestra exactamente como aparecera tu URL y senala las etiquetas que faltan o tienen errores. LinkedIn ofrece el Post Inspector, que hace algo parecido y ademas limpia la cache.

Para Twitter (X), puedes revisar las Twitter Cards con el verificador de Twitter Graph y asegurarte de que todo funciona.

Los errores mas habituales son: imagen que no carga (URL relativa en vez de absoluta), titulo cortado (mas de 60 caracteres) y descripcion vacia. Si algo falla, comprueba que las etiquetas estan dentro de la seccion y que todas las URLs empiezan con https://.

Eso si: despues de corregir cualquier error, vuelve a pasar el debugger. Las redes cachean la primera version que leen, y si no fuerzas un nuevo rastreo, seguiran mostrando la vista previa antigua.

Herramientas relacionadas

Completa tu flujo de trabajo con estas herramientas complementarias de ToolsPivot:

• Generador de Capturas de Pantalla: Captura pantallazos de tu web para usarlos como imagenes OG.
• Generador de Twitter Cards: Crea meta etiquetas especificas para X/Twitter.
• Generador de Meta Tags: Genera el conjunto completo de meta etiquetas HTML.
• Generador de Schema Markup: Implementa datos estructurados para resultados enriquecidos en Google.
• Verificador de Estadisticas Sociales: Mide el rendimiento social de cualquier URL.

Preguntas frecuentes

Que son las etiquetas Open Graph?

Son fragmentos de codigo HTML que controlan como se muestra tu pagina web cuando alguien la comparte en redes sociales. Definen el titulo, la descripcion, la imagen y otros datos de la vista previa.

Es gratis el generador de Open Graph de ToolsPivot?

Si, completamente gratis y sin necesidad de registro. Introduces los datos, generas el codigo y lo copias.

Sirven las etiquetas OG para mejorar el SEO?

No afectan directamente al posicionamiento en Google, pero un enlace con buena vista previa atrae mas clics y compartidos, lo que genera trafico y enlaces naturales.

Que tamano debe tener la imagen og:image?

El tamano recomendado es 1.200 x 630 pixeles con proporcion 1,91:1. Las imagenes menores de 600 x 315 se muestran como miniaturas pequenas.

Puedo usar etiquetas OG distintas del meta title y meta description?

Si, y de hecho es recomendable. El titulo SEO busca posicionar en Google, mientras que el og:title puede ser mas llamativo para redes sociales.

Funcionan las etiquetas Open Graph en WhatsApp?

Si. Cuando compartes un enlace en WhatsApp o WhatsApp Business, la aplicacion lee las etiquetas OG para generar la vista previa con imagen, titulo y descripcion.

Donde se colocan las etiquetas OG en el codigo HTML?

Dentro de la seccion de tu pagina, antes del cierre . En WordPress puedes hacerlo con plugins como Yoast SEO o Rank Math sin tocar codigo.

Con que frecuencia hay que actualizar las etiquetas OG?

Cada vez que cambies el titulo, la imagen destacada o la descripcion de una pagina. Si no las actualizas, las redes seguiran mostrando la version anterior desde su cache.

Que diferencia hay entre Open Graph y Twitter Cards?

Open Graph fue creado por Facebook y lo usan la mayoria de plataformas. Twitter tiene su propio sistema de Twitter Cards, aunque si no las encuentra, recurre a las etiquetas OG como respaldo.

Se puede usar el generador desde el movil?

Si, la herramienta funciona en cualquier navegador, tanto en ordenador como en movil o tablet. Generas el codigo y lo copias para pegarlo donde necesites.

Que pasa si no pongo etiquetas OG en mi pagina?

Las redes sociales intentaran extraer la informacion por su cuenta, eligiendo imagenes y textos de forma aleatoria. El resultado suele ser poco atractivo y poco profesional.

Puedo generar etiquetas OG para paginas en varios idiomas?

Si, usando la propiedad og:locale. Puedes especificar es_ES para espanol de Espana, es_MX para Mexico o en_US para ingles, entre otros.