Vista previa y generador de Open Graph (OG) Previsualiza el aspecto de la tarjeta de Open Graph para Facebook, LinkedIn y otras plataformas.

📱

Vista previa de Open Graph

Previsualiza el aspecto de la tarjeta de Open Graph para Facebook, LinkedIn y otras plataformas.

Introducir detalles de la página

Agregar título, descripción, URL, URL de imagen y tipo de OG.

Previsualizar la tarjeta

Ver cómo se mostrará su página cuando se comparta en Facebook y LinkedIn.

Copiar etiquetas meta

Copiar las etiquetas meta og: generadas para su sitio web.

Loading tool...

What Is Vista previa de Open Graph?

La herramienta de vista previa de Open Graph te permite ver exactamente cómo se mostrará tu página web cuando se comparta en Facebook, LinkedIn y otras plataformas que utilizan el protocolo de Open Graph. Las etiquetas meta de Open Graph controlan la información del título, descripción, imagen y tipo que se muestra en las vistas previas de los enlaces. Una vista previa de OG bien elaborada puede aumentar drásticamente las tasas de clics desde las comparticiones sociales - las publicaciones con imágenes y descripciones optimizadas obtienen mucho más compromiso. Esta herramienta proporciona una vista previa visual que imita el formato de tarjeta de Facebook/LinkedIn y genera el conjunto completo de etiquetas meta og: que necesitas agregar a tu sitio web HTML.

Why Use Vista previa de Open Graph?

Previsualización visual que coincide con los diseños de tarjetas de Facebook y LinkedIn
Genera todas las etiquetas meta og: requeridas
Múltiples tipos de OG: sitio web, artículo, producto, perfil, video
Orientación sobre el recuento de caracteres para un título y descripción óptimos
Configuración del nombre del sitio y la URL para una configuración completa de OG

Common Use Cases

Lanzamiento de sitio web

Asegúrese de que todas las páginas tengan etiquetas og: adecuadas antes de ir en vivo.

Publicación de blog

Optimice cómo se muestran los artículos cuando se comparten en redes sociales.

Comercio electrónico

Haga que las páginas de productos se compartan de manera hermosa con etiquetas og: de tipo producto.

Campañas de marketing

Controlar el mensaje exacto que aparece en las vistas previas de enlaces sociales.

Technical Guide

El protocolo de Open Graph fue creado por Facebook en 2010 y ahora es utilizado por la mayoría de las plataformas sociales para vistas previas de enlaces. Etiquetas básicas requeridas: og:title, og:type, og:image y og:url. Etiquetas adicionales recomendadas: og:description, og:site_name, og:locale. Para imágenes, el tamaño recomendado es 1200×630 píxeles (relación 1.91:1) para una visualización óptima en todas las plataformas. Facebook almacena en caché los datos de OG durante unos 30 días - utiliza el Depurador de compartición de Facebook (developers.facebook.com/tools/debug/) para actualizar. LinkedIn tiene su propio Inspector de publicaciones para funcionalidad similar. Las etiquetas de OG deben estar en la sección <head> de tu HTML. Si están presentes tanto las etiquetas de OG como las Tarjetas de Twitter, Twitter preferirá sus propias etiquetas mientras que Facebook utiliza las etiquetas de OG. La mejor práctica es implementar ambas para tener el máximo control en todas las plataformas.

Tips & Best Practices

1
Utilice imágenes de 1200×630 píxeles para una visualización óptima en todas las plataformas
2
Mantenga og:title por debajo de 60 caracteres y og:description por debajo de 160 caracteres
3
Utilice el Depurador de compartición de Facebook para forzar la actualización de los datos de OG en caché
4
Implemente tanto etiquetas og: como twitter: para un control completo entre plataformas
5
Pruebe con varias plataformas - Facebook, LinkedIn y Slack se renderizan de manera diferente

Related Tools

Vista previa de tarjeta de Twitter

Previsualiza cómo se mostrará tu enlace como una tarjeta de Twitter/X con título, descripción e imagen.

📱 Social Media

Constructor de enlaces UTM

Crea URL con parámetros UTM para rastrear campañas de marketing en Google Analytics.

📱 Social Media

Generador de botones para compartir en redes sociales

Genera botones para compartir en redes sociales con HTML/CSS para tu sitio web, con múltiples estilos y plataformas.

📱 Social Media

Generador de Página de Enlace en Biografía

Genera una página HTML personalizable de enlace en biografía con tus enlaces, colores y marca.

📱 Social Media

Frequently Asked Questions

Q ¿Qué son las etiquetas Open Graph?

Las etiquetas meta de Open Graph son etiquetas HTML que controlan cómo se muestra su página web cuando se comparte en plataformas de redes sociales como Facebook y LinkedIn.

Q ¿Cuál es el mejor tamaño de imagen OG?

El tamaño recomendado es 1200×630 píxeles (relación de aspecto 1.91:1) para una visualización óptima en la mayoría de las plataformas.

Q ¿Cómo actualizo los datos de OG en caché en Facebook?

Utilice el Depurador de compartición de Facebook en developers.facebook.com/tools/debug/ para volver a analizar su URL y actualizar la caché.

Q ¿Necesito tanto etiquetas og: como tarjetas de Twitter?

Idealmente sí. Las etiquetas og: se utilizan en Facebook, LinkedIn y la mayoría de las plataformas. Twitter prefiere sus propias etiquetas twitter:, pero vuelve a utilizar OG si están ausentes.

About This Tool

Vista previa de Open Graph is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.