Vista previa Open Graph — X, Facebook, LinkedIn, Slack, Discord
Obtén las etiquetas Open Graph por URL o pega el HTML. Muestra la tarjeta en cinco plataformas a su ancho real.
1200 × 630 (1.91:1) — one image serves every platform
Descripción general
Una tarjeta de compartición es lo primero que ve la mayoría de la gente de una página, y la representan cinco plataformas distintas con cinco maquetaciones distintas. Esta herramienta las dibuja todas a su ancho real de feed a partir de las mismas etiquetas, de modo que «¿se corta el título en LinkedIn?» pasa a ser algo que miras en lugar de adivinar.
El bloque de etiquetas generado es el marcado exacto para pegar en tu <head>,
con los valores de content ya escapados para HTML.
Cómo se usa
- Pon la URL de la página en el campo superior y pulsa fetch meta: nuestro servidor lee sus etiquetas y rellena los campos. O pulsa paste HTML y pega el código fuente en su lugar, lo que se queda por completo en tu pestaña.
- Ajusta a mano el título, la descripción, el nombre del sitio y la URL de la imagen para probar alternativas.
- Alterna entre ALL y una sola plataforma para comparar, o céntrate en la que te interese.
- Vigila los contadores; se ponen ámbar cuando un valor es lo bastante largo para truncarse.
- Pulsa copy tags y pega el resultado en el
<head>de la página.
Las etiquetas que de verdad importan
Cinco plataformas, un solo juego de etiquetas. Qué lee cada una, en el orden en que lo lee:
| Etiqueta | Efecto | Notas |
|---|---|---|
og:title | Titular de la tarjeta | Recurre a <title>. Unos 60 caracteres antes de truncarse en las tarjetas más estrechas |
og:description | Texto del cuerpo | Recurre a <meta name="description">. Unos 155 caracteres |
og:image | La imagen | Hace falta una URL absoluta. Ningún rastreador resuelve una ruta relativa |
og:url | URL canónica de la compartición | Las plataformas deduplican por este valor, así que uno equivocado fusiona la interacción de dos páginas |
og:type | website o article | Rara vez cambia el renderizado; article habilita campos extra en algunas plataformas |
og:site_name | Etiqueta pequeña encima o debajo del título | X la ignora |
twitter:card | summary o summary_large_image | Controla si X muestra una miniatura o una imagen a todo el ancho |
twitter:image | Imagen para X | Opcional: X recurre a og:image |
El error más común de todos es un og:image relativo. Se ve perfecto en cualquier
herramienta de vista previa local que lo resuelva contra la URL de la página, y
produce una tarjeta sin imagen en todo lo demás, porque los rastreadores no lo
resuelven.
El segundo más común es un og:url que apunta a la variante equivocada: con un
parámetro de seguimiento, o a http:// cuando el sitio sirve https://. Las
plataformas indexan su caché por ese valor, así que el error también hace que la
tarjeta sea difícil de arreglar.
La caché, y por qué tu corrección no apareció
Todas las plataformas guardan en caché la tarjeta que construyeron la primera vez que se compartió una URL, y ninguna la vuelve a pedir en un calendario que controles tú. Editar las etiquetas no actualiza una tarjeta ya compartida.
Cada plataforma tiene su propia forma de forzar un refresco:
- Facebook e Instagram: el Sharing Debugger, «Scrape Again»
- LinkedIn: el Post Inspector
- X: ya no hay depurador público; cambiar la URL es la vía fiable
- Slack: guarda en caché unos 30 minutos y luego vuelve a pedirla
- Discord: guarda en caché de forma agresiva; cambiar la URL es el arreglo práctico
De ahí el argumento para revisar la tarjeta antes de la primera compartición y no después. Una tarjeta equivocada que ya se ha propagado es un problema mucho mayor que una tarjeta equivocada que has pillado en una vista previa.
Requisitos de imagen en la práctica
1200 × 630 con proporción 1,91:1 funciona en las cinco plataformas y es el único tamaño que merece la pena producir. Los detalles que rompen las tarjetas:
- Por debajo de 200 × 200 varias plataformas la rechazan directamente.
- Por encima de unos 5 MB algunos rastreadores la descartan en lugar de redimensionarla.
- Los PNG con transparencia se componen contra el fondo que use la plataforma, que cambia entre modo claro y modo oscuro. Usa una imagen opaca.
- El texto cerca de los bordes se recorta, porque cada plataforma recorta la misma imagen de forma algo distinta. Mantén todo lo importante dentro del 80 % central.
- Una imagen detrás de autenticación produce una tarjeta vacía. Los rastreadores no están identificados y no envían tus cookies.
Ejemplos
- Auditar una página en producción: pega su URL y pulsa fetch meta; los campos se rellenan con las propias etiquetas de la página y ves qué construirán las plataformas sociales.
- Redactar una página nueva: deja la imagen vacía para trabajar sobre el marcador de posición y pon la URL real de 1200 × 630 cuando exista.
- Títulos largos: pega un titular de 90 caracteres y observa cómo sobrevive en X pero se parte en dos líneas en Facebook.
Notas
Las vistas previas son reconstrucciones fieles de la tarjeta de cada plataforma a los anchos que usan, no capturas tomadas de esas plataformas. Las plataformas ajustan sus maquetaciones con el tiempo, y algunas aplican su propia caché: una tarjeta que ya has compartido puede conservar su imagen antigua hasta que la limpies en el depurador de esa plataforma.
La extracción de etiquetas lee primero og:* y recurre después a twitter:*, y
luego a <title> y <meta name="description">, que es más o menos el orden que
siguen los propios rastreadores. Se aplica el mismo orden tanto si las etiquetas
vienen de fetch meta como del HTML pegado.
La petición del servidor sigue como máximo cinco redirecciones, lee como máximo los primeros 512 kB de la página y rechaza todo lo que no sea HTML. Solo se devuelve una lista fija de claves meta; nada más de la página se retransmite.