Vista previa de Open Graph
Introduce la URL de una página, o pega su HTML, para ver la tarjeta que recibe la gente al compartirla y corregir lo que falte.
Las etiquetas Open Graph son metaetiquetas en el head de una página. Indican a las redes sociales y a las apps de chat qué título, descripción e imagen mostrar cuando alguien comparte el enlace.
La herramienta lee esas etiquetas y dibuja una tarjeta de enlace con el estilo de una publicación de Facebook. También revisa el tamaño y la proporción de la imagen, y lista las etiquetas que faltan o son demasiado largas.
Preguntas
¿Por qué Facebook sigue mostrando mi vista previa antigua?
Facebook guarda en caché la tarjeta tras la primera vez que se comparte. Cuando corrijas las etiquetas, pasa la URL por el Sharing Debugger y vuelve a rastrearla para actualizar la caché. Otras plataformas tienen sus propias cachés.
¿Por qué la vista previa sale vacía en una página hecha con JavaScript?
Los rastreadores de enlaces leen el HTML que envía el servidor y no ejecutan JavaScript. Si las etiquetas se añaden solo en el navegador, no se ven. Genéralas en el servidor o en el HTML estático.
¿Cuál es el tamaño ideal de la imagen Open Graph?
1200 x 630 píxeles, una proporción de unos 1,91:1, y menos de 8 MB. Las imágenes menores de 600 x 315 píxeles se muestran como una miniatura junto al texto.
¿Por qué la vista previa difiere de lo que veo al compartir?
Cada plataforma tiene su propio recorte, límites de texto y caché. Esta vista previa sigue el diseño habitual de Facebook y lee tu página una sola vez, ahora. Además, la plataforma puede haber guardado una versión anterior.
¿Qué etiquetas son las más importantes?
og:title, og:description, og:image y og:url. Las demás, como og:site_name y twitter:card, son opcionales pero mejoran la tarjeta.