Previsualizador de Open Graph
EXAMPLE WEBSITE
Ejemplo de Título de Página
Este es un ejemplo de descripción del contenido de la página que aparecería cuando se comparte en redes sociales.
https://example.com/page
Ejemplo de Título de Página
Este es un ejemplo de descripción del contenido de la página que aparecería cuando se comparte en redes sociales.
example.com
websiteCómo usar Open Graph Previewer
- 1
Introduce la URL de una página
Pega en el campo de URL del sitio web la URL completa de la página que quieres comprobar.
- 2
Obtén los datos de OG
Haz clic en "Obtener datos de OG" para extraer el título, la descripción, la imagen y el nombre del sitio de Open Graph existentes en la página.
- 3
Edita manualmente si es necesario
Cambia a Editar manualmente para ajustar el título, la descripción, la URL de la imagen, el tipo y otros campos y ver cómo se actualiza la vista previa.
- 4
Previsualiza y copia las etiquetas
Revisa las vistas previas de las tarjetas de Facebook y Twitter, y luego copia las metaetiquetas generadas para añadirlas a tu página.
La guía definitiva de Open Graph y las vistas previas de enlaces
Qué es el protocolo Open Graph
El protocolo Open Graph es un pequeño conjunto de metaetiquetas, introducido originalmente por Facebook, que permite a cualquier página web describirse a sí misma como un objeto rico cuando se comparte. En lugar de un escueto enlace azul, una página con etiquetas Open Graph se convierte en una tarjeta con un titular, un resumen y una imagen grande. Las etiquetas residen en el head de la página y usan el atributo property con un prefijo og, por ejemplo og:title y og:image, emparejado con un atributo content que contiene el valor. Como el estándar se adoptó ampliamente, las mismas etiquetas og impulsan ahora las vistas previas en muchas más plataformas que solo Facebook.
Open Graph trata exclusivamente de la presentación en contextos sociales y de mensajería. No tiene ningún efecto directo en las posiciones de búsqueda, pero sí tiene un gran efecto en los clics y en que se comparta, porque una tarjeta atractiva recibe clics y se vuelve a compartir, mientras que una sosa o rota se pasa de largo al desplazarse.
Las etiquetas básicas de Open Graph
Cinco propiedades hacen la mayor parte del trabajo. og:title es el titular de la tarjeta y puede diferir de tu etiqueta title de HTML, lo que te permite escribir una formulación optimizada para compartir. og:description es la línea de apoyo que va debajo. og:image es la miniatura, y es la que carga con diferencia el mayor peso visual. og:url es la URL canónica a la que debería apuntar la tarjeta, lo que mantiene las veces que se comparte consolidadas en una sola dirección aunque el mismo contenido sea accesible por varias URL. og:type describe el objeto, comúnmente website para una página genérica o article para una entrada de blog o una noticia.
Otras propiedades adicionales refinan el resultado: og:site_name etiqueta la fuente, og:locale declara el idioma y, para las imágenes, og:image:width y og:image:height ayudan a las plataformas a maquetar la tarjeta antes de que la imagen termine de descargarse. Rellenarlas produce una vista previa más fiable y de renderizado más rápido.
Las Twitter Cards y cómo lee X tus etiquetas
X usa sus propias etiquetas de twitter card, pero es indulgente: si las etiquetas específicas de Twitter están ausentes, recurre a tus etiquetas de Open Graph. La etiqueta clave es twitter:card, donde summary_large_image produce el diseño de imagen grande que la mayoría de las marcas quieren, mientras que summary genera una miniatura más pequeña junto al texto. También puedes fijar twitter:title, twitter:description, twitter:image y twitter:site para anular los valores de Open Graph específicamente para X cuando quieras un texto diferente ahí.
En la práctica, una buena estrategia es fijar unas etiquetas de Open Graph completas para una cobertura amplia y añadir solo twitter:card para optar por el diseño de imagen grande, dejando que X herede el resto de Open Graph. Esto evita mantener dos conjuntos de etiquetas casi idénticos sin dejar de obtener la tarjeta más rica en X.
Requisitos de imagen que hacen o deshacen la tarjeta
La og:image es donde la mayoría de las vistas previas triunfan o fracasan. El tamaño ampliamente recomendado es 1200 por 630 píxeles, una proporción de aproximadamente 1,91 a 1, que rellena con limpieza la tarjeta de imagen grande en Facebook, LinkedIn y X sin recortes. Usa una URL absoluta y accesible públicamente que empiece por https; las rutas relativas como /images/card.png son la razón número uno de que una miniatura simplemente no aparezca, porque el rastreador no tiene ninguna URL base con la que resolverlas. Mantén el archivo por debajo de unos cientos de kilobytes y evita poner texto esencial cerca de los bordes, ya que las distintas plataformas recortan de forma ligeramente diferente.
Cada plataforma también impone sus propios mínimos y máximos. Las imágenes demasiado pequeñas recurren a una miniatura diminuta o a ninguna imagen, y los archivos extremadamente grandes pueden omitirse. Ceñirse a un único JPEG o PNG de 1200 por 630 servido por HTTPS es la opción más segura para un renderizado coherente en todas partes.
Cómo renderizan las vistas previas Facebook, LinkedIn, Discord y Slack
Cuando se pega un enlace en cualquiera de estas plataformas, la plataforma envía su propio bot rastreador para obtener la página y leer el head antes de renderizar una tarjeta. Facebook usa facebookexternalhit, Slack y Discord tienen sus propios bots, y cada uno analiza las etiquetas og para construir la vista previa. Esto significa que la vista previa refleja lo que ve el rastreador del lado del servidor, que puede diferir de lo que ve un usuario con sesión iniciada, sobre todo en páginas que requieren inicio de sesión o que renderizan sus metaetiquetas con JavaScript después de cargar.
Como el renderizado ocurre del lado del bot, importan dos cosas. Primero, tus etiquetas og deben estar presentes en el HTML inicial que devuelve el servidor, no inyectadas más tarde por scripts del lado del cliente que el rastreador puede no ejecutar. Segundo, el bot debe poder acceder a la página sin autenticación, o el rastreador se topa con un muro de inicio de sesión en lugar de tu contenido y la vista previa vuelve vacía.
Caché, depuradores y forzar un nuevo rastreo
Las plataformas sociales almacenan en caché de forma agresiva la vista previa que rastrean, a veces durante días. Este es el origen de la queja clásica de que las etiquetas Open Graph actualizadas no aparecen: la plataforma sigue sirviendo la versión en caché anterior a tu cambio. La solución es usar la propia herramienta de depuración de la plataforma para forzar un nuevo rastreo. El Sharing Debugger de Facebook, el Post Inspector de LinkedIn y el validador de tarjetas de X obtienen la página de nuevo y te muestran exactamente qué etiquetas analizaron, lo que sirve además para diagnosticar por qué una tarjeta se ve mal.
Haz que volver a rastrear forme parte de tu rutina de publicación siempre que cambies un título, una descripción o una imagen en una URL que ya se ha compartido. Sin ello, las primeras veces que se comparte pueden fijar una tarjeta obsoleta o rota que persiste mucho después de que la propia página sea correcta. Este previsualizador te permite comprobar las etiquetas antes de publicar para que después hagan falta menos correcciones.
Los errores más comunes de Open Graph
Los fallos recurrentes son predecibles: una og:image que falta, así que la tarjeta no tiene miniatura; una URL de imagen relativa que el rastreador no puede resolver; una og:image servida por HTTP en una página por lo demás HTTPS (que algunas plataformas rechazan); y etiquetas inyectadas por JavaScript que el rastreador nunca ejecuta. Otro frecuente es dejar og:url apuntando a una URL no canónica o de un entorno de pruebas, lo que divide los recuentos de veces compartido y puede enviar a los usuarios al lugar equivocado.
Un error más sutil es olvidar que Open Graph y tu fragmento de búsqueda son cosas separadas. og:title y og:description controlan la tarjeta social, mientras que la etiqueta title de HTML y la meta descripción controlan el resultado de Google, y no tienen por qué ser idénticas. Optimiza cada una para su contexto: contundente y que despierte curiosidad para la tarjeta social, clara y atenta a las palabras clave para el fragmento de búsqueda.
Preguntas frecuentes
¿Qué son las etiquetas de Open Graph y por qué importan?
¿Cómo funciona la vista previa de Facebook y Twitter?
¿Puedo generar etiquetas sin una página existente?
¿Por qué la obtención de una URL podría fallar o no devolver datos?
¿Es gratuita la herramienta y qué ocurre con la URL que introduzco?
Herramientas relacionadas
Sigue trabajando con estas prácticas herramientas