Inicio > Previsualizador de Enlaces OpenGraph
✓ Procesamiento local en navegador (Zero-Server)

Previsualizador de Enlaces OpenGraph

Diseña y previsualiza cómo se mostrará tu web al compartirse en WhatsApp, Twitter/X, LinkedIn y Google, generando las etiquetas HTML.

Arquitectura y privacidad de esta herramienta:

Esta utilidad se ejecuta íntegramente en tu navegador web sin subir tus archivos ni datos personales a servidores externos. Si tienes JavaScript habilitado, la interfaz interactiva cargará automáticamente a continuación.

Cómo simular y generar etiquetas Open Graph y Twitter Cards para tus enlaces web

Controla cómo se ve tu página web cuando alguien comparte el enlace

Cuando compartes una dirección URL en WhatsApp, LinkedIn, X (Twitter), Facebook, Telegram o Discord, la plataforma lee el código HTML de tu página buscando los metadatos del protocolo Open Graph (og:title, og:description, og:image) y Twitter Cards para construir una tarjeta visual clicable. Si tu web carece de estas etiquetas o tiene una imagen mal dimensionada, el enlace se mostrará como un texto gris sin atractivo o con un recorte defectuoso que reduce drásticamente el porcentaje de clics (CTR).

Cómo diseñar y probar tu tarjeta social en tres pasos

  1. Redacta el título y la descripción pensando en el corte visual: procura que las primeras 55–60 letras del título (og:title) y los primeros 110–150 caracteres de la descripción (og:description) transmitan la propuesta de valor sin quedar cortados por puntos suspensivos en pantallas móviles.
  2. Utiliza la proporción de imagen estándar 1,91:1: el tamaño universal recomendado para tarjetas grandes (summary_large_image) es de 1200 × 630 píxeles en formato JPG, PNG o WebP y con un peso inferior a 1 MB para que WhatsApp y las redes la carguen al instante.
  3. Copia el bloque HTML y pégalo dentro de la etiqueta <head> de tu web: recuerda que la dirección de la imagen (og:image) debe ser una URL absoluta y pública en tu servidor (con https://), no una ruta relativa ni un archivo local de tu ordenador.

Ten en cuenta que este simulador construye la vista previa a partir de los textos e imagen que introduces en el formulario en vivo; no rastrea tu servidor ni vacía la memoria caché que LinkedIn, Meta o X puedan tener guardada de una versión anterior de tu URL.

Preguntas Frecuentes sobre Previsualizador de Enlaces OpenGraph

He pegado las etiquetas en mi web pero WhatsApp o LinkedIn siguen mostrando la foto antigua, ¿por qué?

Las redes sociales guardan en caché las tarjetas de cada URL durante días para ahorrar tráfico. Una vez actualizado el código en tu servidor, pasa tu enlace por el Post Inspector de LinkedIn o el Sharing Debugger de Meta para forzar la actualización de su caché, o añade un parámetro de versión a la URL de la imagen.

¿Qué tamaño exacto debe tener la imagen Open Graph (og:image)?

El estándar más compatible para que la tarjeta se vea grande y nítida en alta definición en Facebook, X, LinkedIn y WhatsApp es 1200 x 630 píxeles (relación de aspecto 1.91:1).

¿Subir una foto desde mi ordenador a este previsualizador la aloja en internet?

No. Cargar una imagen local sirve únicamente para que veas cómo encaja el diseño en las tarjetas de ejemplo dentro de tu navegador. Antes de copiar el código HTML definitivo a tu web, debes subir esa imagen a tu propio hosting o CDN y pegar su URL pública https://.

Herramientas complementarias