Softonic

Vista previa de Open Graph

Paso 1 / 2
Siguiente

Escribe el título, la descripción, el nombre del sitio, la URL de la página y la URL de la imagen, y esta herramienta renderiza en vivo una tarjeta de Facebook y otra de X (Twitter) que se actualiza con cada pulsación. Es un laboratorio de diseño para tus etiquetas Open Graph: no se solicita ni se publica nada, así que puedes ensayar la longitud del titular y el recorte de la imagen hasta que la tarjeta quede bien, y luego copiar el texto en tus etiquetas og: reales.

Cómo se compone la vista previa

  1. 1

    Escribe los campos de la tarjeta

    Título, nombre del sitio, descripción, URL de la página y URL de la imagen. Cada campo se corresponde con una etiqueta og:.

  2. 2

    Observa cómo se actualizan las tarjetas

    Las maquetas de Facebook y X se vuelven a renderizar mientras escribes, usando el diseño y el recorte reales de cada plataforma.

  3. 3

    Añade una URL de imagen

    Pega una dirección de imagen https absoluta para ver el recorte; déjala vacía y la tarjeta de Facebook muestra un marcador de posición.

  4. 4

    Copia en tus etiquetas og:

    Cuando la tarjeta se lea bien, traslada el mismo título, descripción e imagen a las etiquetas meta de tu página.

En qué se convierte cada campo

Campo Etiqueta Open Graph Aparece en la tarjeta
Título og:title Titular en negrita, recortado a una línea
Descripción og:description Subtítulo gris, limitado a dos líneas
Nombre del sitio og:site_name Etiqueta pequeña sobre el titular de Facebook
URL og:url Se muestra el dominio; lo determina el host
URL de imagen og:image Recortada a 1.91:1 en ambas maquetas

La herramienta extrae el host de la URL que escribes, así que https://blog.example.com/post muestra blog.example.com en la tarjeta.

Las dos tarjetas y en qué se diferencian

  • Facebook muestra la imagen recortada a 1.91:1, luego el dominio en versalitas, el título en negrita en una línea y la descripción en hasta dos líneas. Sin URL de imagen renderiza un marcador de posición gris, que es la causa más común de un enlace plano y sin imagen que se ve por ahí.
  • X (Twitter) muestra una tarjeta summary_large_image con esquinas redondeadas: la imagen en un recorte 2:1, el dominio, el título y la descripción debajo.

Cómo lograr que el texto encaje

  • Título: apunta a entre 60 y 70 caracteres. Facebook corta hacia los 88 y X hacia los 70, así que un título de menos de 70 se mantiene entero en todas partes.
  • Descripción: mantenla por debajo de unos 160 caracteres; la tarjeta la limita a dos líneas y descarta el resto.
  • Imagen: diséñala a 1200 x 630 px para que el recorte 1.91:1 quede limpio, y alójala en una URL https:// absoluta. Una ruta relativa no cargará una vez que las etiquetas estén en producción.
  • Nombre del sitio: corto y solo la marca, sin eslogan. Va sobre el titular a modo de etiqueta.

Lista de comprobación para el día de publicación

  • [ ] Título por debajo de 70 caracteres
  • [ ] Descripción por debajo de 160 caracteres
  • [ ] La URL de la imagen es absoluta (https, no // ni una ruta relativa)
  • [ ] Imagen diseñada a 1200 x 630 px, JPG o PNG
  • [ ] La URL coincide con la canónica que vas a publicar
  • [ ] Texto copiado en las etiquetas og: reales y luego verificado con un verificador

Preguntas frecuentes

No. Escribes los campos de la tarjeta a mano y la herramienta maqueta cómo se verían. Es un laboratorio de diseño, no un rastreador, así que también funciona antes de que la página esté en línea. Para leer las etiquetas que ya tiene una página, pega el HTML de esa página en el Verificador de Open Graph.

Una tarjeta de Facebook y una tarjeta de imagen grande de X (Twitter). Usan los mismos valores de Open Graph, así que una tarjeta que se lea bien aquí es una buena referencia para LinkedIn, Slack, Discord y otras apps que despliegan a partir de las mismas etiquetas og:, cada una con límites ligeramente distintos.

Porque el campo de imagen está vacío o la URL que pegaste no es una dirección https absoluta que funcione. Añade una URL de imagen https completa y el recorte aparece al instante. Cuando esté en producción, mantén el archivo por debajo de 5 MB y sírvelo con un content-type público image/*.

Cada plataforma corta en un punto distinto (Facebook cerca de 88 caracteres, X cerca de 70), y la tarjeta de la maqueta lo refleja. Recorta el título a entre 60 y 70 caracteres y se mantendrá entero en todas las plataformas.

Herramientas relacionadas

Extractor de enlaces externos

Pega HTML en bruto, fija opcionalmente una URL base y obtén una lista limpia y sin duplicados de todos los enlaces externos http/https del código, para auditorías de enlaces y revisiones de SEO.

Verificador de Longitud de Meta Descripción

Mide una meta descripción en caracteres y píxeles estimados, compárala con referencias editoriales y revisa maquetas para ordenador y móvil.

Validador de sitemaps XML

Comprueba en tu navegador si un sitemap XML tiene errores de sintaxis, ubicaciones ausentes, URL duplicadas o valores habituales no válidos.

Verificador de URL Canónica

Pega el HTML de una página y comprueba su etiqueta rel=canonical: ¿está presente, es una URL absoluta válida, coincide con la URL de la página?

Generador de Etiquetas Canónicas

Genera una etiqueta de enlace rel=canonical válida para cualquier URL. Incluye la validación de la URL y los errores comunes a evitar.

Simulador de SERP de Google

Previsualiza un snippet aproximado al estilo de Google con límites de caracteres para móvil y escritorio. Tu borrador queda en esta sesión del navegador.

Herramienta disponible en otros idiomas