Previsualización de Etiquetas OG - Verificador de Meta Etiquetas Open Graph
Ingresa tus valores de Open Graph y Twitter Card para ver vistas previas en vivo en redes sociales. Genera código de meta etiquetas listo para usar al instante.
¿Qué son las Meta Etiquetas Open Graph?
Las meta etiquetas Open Graph (OG) son elementos meta HTML que controlan cómo aparecen tus páginas web cuando se comparten en plataformas de redes sociales como Facebook, Twitter, LinkedIn y Discord. Definen el título, la descripción, la imagen y la URL que aparecen en las tarjetas de vista previa de las redes sociales. Las etiquetas OG configuradas correctamente pueden mejorar significativamente las tasas de clics de las acciones sociales.
Cómo Usar Esta Herramienta de Previsualización de Etiquetas OG
- Ingresa los Valores OG — Completa og:title, og:description, URL de og:image, og:url, og:type y og:site_name
- Agrega Etiquetas de Twitter Card — Opcionalmente, anula el título, la descripción y la imagen para las tarjetas de Twitter/X
- Verifica las Vistas Previas en Vivo — Observa exactamente cómo se verá tu página en Facebook, Twitter, LinkedIn y Discord
- Copia el Código Generado — Haz clic en Copiar Código para obtener meta etiquetas HTML listas para pegar en tu página
¿Por Qué Usar Este Previsualizador de Etiquetas OG?
- Vistas Previas en 4 Plataformas — Ve vistas previas de Facebook, Twitter/X, LinkedIn y Discord simultáneamente
- Actualizaciones en Tiempo Real — Las vistas previas se actualizan instantáneamente mientras escribes, sin necesidad de recargar la página
- Generación de Código — Genera automáticamente código HTML de meta etiquetas con el formato correcto
- Soporte para Twitter Card — Campos separados para anulaciones específicas de Twitter (twitter:title, twitter:image, etc.)
- No Se Requiere Servidor — Todo se ejecuta en tu navegador. No se envían datos a ningún servidor
- Guías de Tamaño — Recomendaciones integradas para dimensiones de imagen óptimas (1200x630px)
FreeToolbox vs Otras Herramientas de Vista Previa OG
| Característica | FreeToolbox | OpenGraph.xyz | MetaTags.io |
|---|---|---|---|
| Plataformas | 4 (FB, TW, LI, DC) | 3 (FB, TW, LI) | 3 (Google, FB, TW) |
| Vista Previa en Tiempo Real | Sí | Sí | Sí |
| Generación de Código | Sí | Sí | Sí |
| Vista Previa de Discord | Sí | No | No |
| No Se Requiere Cuenta | Sí | Sí | Nivel gratuito limitado |
| Anuncios | Mínimos | Moderados | Elevados |
Preguntas frecuentes
¿Cuál es el tamaño recomendado para og:image?
El tamaño recomendado es de 1200 x 630 píxeles (relación de aspecto 1.91:1). Esto funciona bien en Facebook, Twitter, LinkedIn y Discord. Utiliza el formato PNG o JPG y mantén el tamaño del archivo por debajo de 8 MB.
¿Por qué esta herramienta no puede obtener etiquetas OG de una URL?
La seguridad del navegador (política CORS) impide que JavaScript obtenga contenido de otros dominios. Esta herramienta utiliza la entrada manual en su lugar, lo que en realidad es mejor para obtener una vista previa de las etiquetas antes de publicarlas.
¿Necesito etiquetas OG y Twitter Card?
Twitter/X recurrirá a las etiquetas OG si faltan etiquetas específicas de Twitter. Sin embargo, se recomienda agregar twitter:card para controlar el tipo de tarjeta. Usa etiquetas específicas de Twitter solo si deseas contenido diferente en Twitter en comparación con otras plataformas.
¿Qué og:type debo usar?
Usa 'website' para páginas de inicio y páginas generales, 'article' para publicaciones de blog y noticias, 'product' para páginas de productos. El valor predeterminado 'website' funciona en la mayoría de los casos.
¿Cómo pruebo mis etiquetas OG reales en vivo?
Después de agregar las meta etiquetas a tu página, usa el Depurador de contenido compartido de Facebook (developers.facebook.com/tools/debug), el Validador de tarjetas de Twitter y el Inspector de publicaciones de LinkedIn para verificar que las etiquetas funcionen correctamente.