¿Qué es Vista previa Open Graph?

Open Graph Preview te muestra exactamente cómo aparecerá tu URL al compartirla en Facebook, Twitter, LinkedIn y otras plataformas sociales. Introduce los valores de tus etiquetas OG y visualiza una maqueta en tiempo real de la tarjeta de compartición antes de publicar.

La previsualización lee tus etiquetas og:title, og:description, og:image, og:site_name y og:url, y reproduce el aspecto exacto que cada red usa. Facebook corta los títulos alrededor de 88 caracteres, la tarjeta grande de Twitter requiere proporción 2:1 y LinkedIn recorta la descripción a unos 200 caracteres añadiendo puntos suspensivos.

Cómo usar

1. Introduce tus etiquetas Open Graph: título, descripción, URL de imagen, nombre del sitio y URL.
2. Visualiza en paralelo las vistas previas en tiempo real de los formatos de tarjeta de Google, Facebook, Twitter, LinkedIn, WhatsApp, Slack, Discord y Pinterest.
3. Ajusta la longitud del título, la descripción y las dimensiones de la imagen hasta que la vista previa se vea perfecta en todas las plataformas.

Cuándo usar

• Antes de publicar un artículo o página de marketing que se compartirá en redes.
• Al auditar un sitio existente cuyas vistas previas se ven rotas o sin imagen.
• Al diseñar una plantilla de imagen OG nueva, para comprobar que el título no tapa lo visual.

Resultado

Antes de compartir tu nueva entrada de blog en LinkedIn, comprueba que la imagen OG no se recorta de forma extraña y que la descripción se lee bien dentro del límite de 200 caracteres de la tarjeta de Twitter.

Preguntas frecuentes

¿Qué tamaño debe tener mi imagen de Open Graph?

1200x630 píxeles es el valor seguro. Facebook y LinkedIn la muestran a 1,91:1 y la tarjeta summary_large_image de Twitter mantiene la misma proporción. Pesa el archivo por debajo de 5 MB y usa JPEG o PNG.

¿Por qué Facebook no actualiza la vista previa después de cambiar las metaetiquetas?

Facebook cachea los datos OG durante unas 24 horas. Pega la URL en el Sharing Debugger de Meta y pulsa «Scrape Again» para forzar la relectura. LinkedIn ofrece lo mismo con su Post Inspector.

¿Necesito etiquetas twitter:* si ya tengo etiquetas og:*?

Twitter recurre a og:title, og:description y og:image cuando no hay etiquetas twitter:*, así que una página básica funciona sin ellas. Añade twitter:card y twitter:image solo si quieres un titular o imagen distinta específicamente para Twitter.

¿En qué se diferencian summary y summary_large_image en Twitter?

summary muestra una miniatura cuadrada junto al texto, ideal para noticias y artículos. summary_large_image coloca una imagen ancha encima del texto, mejor para contenidos visuales como landing pages o vídeos.

¿Puedo usar un GIF animado como og:image?

Las redes aceptan el GIF pero solo muestran el primer fotograma. Usa un PNG o JPEG estático con la información clave visible en ese cuadro, o convierte la animación en un MP4 corto y enlázalo con og:video.

Herramientas relacionadas