Open Graph Preview
NuevoMira cómo se ve tu enlace cuando se comparte en Facebook, LinkedIn, WhatsApp, Slack y Discord.
Sin título
Sin descripción
Herramientas relacionadas
Insertar esta herramienta
Agrega esta herramienta a tu sitio web con un fragmento iframe.
<iframe src="https://dukotools.com/tools/open-graph-preview?embed=1" width="100%" height="600" frameborder="0" allow="clipboard-write" loading="lazy" title="open-graph-preview tool"></iframe>
About Open Graph Preview
Open Graph Preview muestra cómo aparecerá su enlace cuando se comparta en Facebook, LinkedIn, WhatsApp, Slack y Discord. Cada plataforma representa los datos de Open Graph de manera diferente. Facebook usa una tarjeta rectangular con una imagen en la parte superior. LinkedIn aplica su propia tipografía y espaciado. WhatsApp muestra una vista previa en miniatura compacta de una sola línea. Slack genera una inserción con borde con una barra de acento de color a la izquierda. Discord muestra un estilo de tarjeta incrustado con un borde izquierdo en el color de acento. Ver los cinco simultáneamente revela discrepancias antes de publicarlos. El panel de validación advierte si su imagen OG no coincide con la proporción recomendada de 1200x630. La sección de salida HTML muestra las metaetiquetas og: exactas para una máxima compatibilidad.
Características clave
Cinco vistas previas de plataformas
Muestra maquetas precisas para Facebook, LinkedIn, WhatsApp, Slack y Discord en pestañas.
Diseños específicos de plataforma
Cada maqueta coincide con las dimensiones reales de la tarjeta, el estilo de tipografía y el diseño de su plataforma.
Validación de proporción de imagen
Advierte si la imagen original no coincide con la relación de aspecto recomendada de 1200x630 1,91:1.
Salida de etiqueta HTML OG
Genera etiquetas og:title, og:description, og:image, og:url, og:site_name, og:type y og:locale.
URL compartible
Codifica todos los valores de OG en la URL para marcarlos o compartirlos.
Cómo utilizar
- 1
Ingrese los detalles de la página
Complete el título, la descripción, la URL de la imagen, la URL de la página, el nombre del sitio, el tipo de contenido y la configuración regional.
- 2
Revisar cada pestaña de la plataforma
Haga clic en las pestañas de Facebook, LinkedIn, WhatsApp, Slack y Discord para ver cómo se representa la tarjeta.
- 3
Corregir la proporción de la imagen si se le advierte
Si el panel de validación muestra una advertencia de proporción, actualice su imagen a 1200x630 píxeles.
- 4
Copiar etiquetas HTML
Haga clic en el botón Copiar para tomar todas las metaetiquetas og: y pegarlas en el encabezado de su página.
Casos de uso del mundo real
Distribución de contenido multiplataforma
Un administrador de redes sociales verifica que la tarjeta se vea profesional en las cinco plataformas antes de programar una publicación de contenido.
Pruebas de desarrollador
Un desarrollador que agrega etiquetas OG a una nueva página usa la herramienta para ver todas las representaciones de la plataforma sin esperar a que se actualice el caché de cada plataforma.
Revisión de la campaña de marketing
Un equipo de marketing revisa las imágenes originales para el lanzamiento de un producto en todas las plataformas para garantizar la coherencia de la marca antes de su lanzamiento.
Preguntas frecuentes
Related Free Tools
Explore these tools that work great alongside Open Graph Preview: