Linkpreview, vista previa de URLs de sitios en redes sociales y apps de chat

• LinkPreview es un proyecto que genera vistas previas de enlaces de sitios web
• Permite ver de un vistazo cómo se muestra una URL específica en Google/X/Facebook/Discord/WhatsApp
• Ofrece una interfaz simple y fácil de usar en comparación con otros productos o proyectos open source existentes

[GN⁺]

Comentarios de Hacker News

• Está bien hecho y es divertido para jugar. Me gustó especialmente el detalle de mostrarlo dentro de la interfaz predeterminada de cada plataforma
  Dicho eso, parece que los metacrawlers de cada plataforma funcionan distinto, y en las dos que conozco bien, WhatsApp y Discord, la vista previa no coincidía con la real en ninguno de los dos casos
  También estaría bueno mostrar los redirects que ocurren al seguir el enlace, y que se pudiera pasar la URL de destino como parámetro de consulta o fragmento
  https://linkpreview.xyz/#example.com
  https://linkpreview.xyz/#url=https://example.com
  https://linkpreview.xyz/?url=https://example.com
  Si no se pueden especificar datos en la URL, se queda como una herramienta web simpática, pero si se controla por URL, se vuelve una utilidad web nativa que se puede compartir. Como las buenas URL no cambian, en la web la URL es el API
  Para agregar algo más después de ver el tuit https://x.com/fayazara/status/1830272619637047359, ahora mismo está recibiendo tanto exposición en la parte alta de HN como todo tipo de críticas
• Como herramienta pequeña está excelente, pero no deberían obligarte a escribir https://; si escribes algo como example.com, debería agregarlo automáticamente
  • Otra opción sería usar un campo de entrada type="url". Probablemente así se desactivarían la capitalización automática y la autocorrección en el teclado móvil
  • Sí, lo voy a arreglar. Esa parte sí que es realmente molesta
• Es una herramienta limpia. Algunas sugerencias: estaría bueno obtener las metaetiquetas y las imágenes con la cadena de agente de usuario del servicio que muestra la vista previa
  Por ejemplo, Twitter/X obtiene las metaetiquetas con la cadena de agente de usuario Twitterbot/1.0. Algunos sitios pueden servir contenido diferente según el servicio para optimizar las imágenes según cómo se muestran allí
  Además, parece que el API no está viendo las metaetiquetas específicas de Twitter [0]. Devuelve solo un único conjunto de metadatos usado para todas las vistas previas. Por ejemplo, en https://govukvue.org usan el formato de tarjeta summary, que muestra una imagen pequeña junto al nombre y la descripción, pero esta herramienta lo renderiza como summary_large_image
  [0] https://developer.x.com/en/docs/x-for-websites/cards/overvie...
  • Voy a intentar mejorarlo. La verdad es que lo hice a las apuradas en unas 2 horas
• Parece que no maneja bien Open Graph. Por ejemplo, en vez de og:image de la etiqueta head, mostró un favicon pixelado agrandado para ajustarlo al contenedor
  • Por ahora solo está trayendo lo que hay en el sitio y mostrándolo. Voy a revisarlo. Me gustaría saber con qué URL lo probaste
  • Entré para decir esto mismo. Usar el favicon hace que la representación sea completamente inexacta
• Como herramienta general suelo usar https://socialsharepreview.com/, y hay varias similares. Me da curiosidad en qué se diferencia o mejora esta, y por qué la hiciste tú mismo en lugar de usar una solución existente
  • La herramienta de arriba fallaba en algunas vistas previas. Había que hacer clic para ver varias vistas previas y era lenta. La herramienta del post original las muestra todas en una sola página, es más limpia, tiene más vistas previas y el estilo encaja mejor. Son razones bastante claras
  • Anoche estaba aburrido
• Hice la versión inversa de esta herramienta. Genera una página donde puedes ver qué metaetiquetas producen la vista previa en una plataforma específica
  https://getoutofmyhead.dev/link-preview-tester/
• Todavía sueño con el día en que pueda crear un sitio web conforme al estándar, probarlo en el navegador y quedarme tranquilo asumiendo que entonces también funcionará en otros navegadores
  Pero ahora hay una herramienta para verificar manualmente cómo una multitud de herramientas de chat privativas renderizan la vista previa de mi página
  Y todos se entusiasman como si fuera lo mejor desde la invención del papel. Es interesante ver esta tendencia en HN y no en algún foro gracioso de la industria de medios; tiempos curiosos
• No entiendo por qué debería usar esta herramienta en lugar de https://socialsharepreview.com/ o https://www.opengraph.xyz/, https://socialmediasharepreview.com/
  Como feedback, que falle con URLs sin HTTPS se siente raro. Debería ser lo suficientemente inteligente como para tomar cualquier sitio que ingreses, navegar a la URL por su cuenta y escanear según la URL final resuelta. Por ejemplo, si ingreso "blizzard.com", debería cargar "https://www.blizzard.com/en-us/"
  Está bueno ver Discord y WhatsApp, pero me pregunto qué tal LinkedIn y Pinterest, y cómo sería Slack. Slack debería ser igual que Discord
  Tampoco te dice qué es lo que hay que corregir. Estaría bueno mirar cómo lo hace socialsharepreview.com
  https://socialsharepreview.com/?url=https%3A%2F%2Fnews.ycomb...
  https://i.imgur.com/LDXNYYR.png

Ofrece muchos consejos útiles sobre qué corregir para que el contenido se despliegue correctamente. Es realmente útil para la gente de marketing a la que le gustan estas cosas. Como cada sitio tiene formatos y límites de caracteres distintos, conviene compartir qué información hay que ajustar. Por ejemplo, diferencias entre las Twitter Cards y los metadatos de Open Graph. No lo he comprobado, pero también sería bueno garantizar que lea correctamente los metadatos adecuados para cada sitio.

• Ya existen herramientas gratuitas de vista previa como https://socialmediasharepreview.com/ que resuelven este problema, así que no lo entiendo muy bien.
  La única explicación es que esto solo sea un anzuelo de herramienta gratuita para vender el kit completo del stack.
• Está bastante bien. Solo que hay que estar preparado para mantenerlo actualizado cada mes, o si no pronto dejará de ser útil.
  Uno de los inconvenientes de este tipo de herramientas es que la URL tiene que ser accesible en línea, así que cuando surge un problema, el ciclo de iteración termina siendo bastante largo.
  En Polypane [1] hicimos una vista previa de redes sociales que también funciona con URLs locales, y además permite sobrescribir la URL que mostrará esa red social. Hicimos vistas previas para X/Twitter, Facebook, Slack, LinkedIn, Discord, Mastodon, Discord, Google Search, Bluesky, Mastodon y Threads, y les damos mantenimiento con frecuencia. También hay diseños en modo claro y modo oscuro para cada uno, así que realmente puedes probarlos todos. También te avisa qué falta y qué no es compatible. Se puede ver aquí: https://polypane.app/social-media-previews/
  [1] https://polypane.app/
  • No me gusta cuando la gente de HN mete publicidad de su producto disfrazándola de consejo útil.
• Faltan LinkedIn y Mastodon. Es una herramienta limpia. Ayudaría que hubiera mensajes de orientación para mejoras, como qué hacer si falta algo en la página.
  • Pienso exactamente lo mismo. Y no sé por qué, pero LinkedIn muestra todas nuestras páginas con la imagen equivocada.
    Si alguien puede averiguarlo, me gustaría que me lo dijera. Si tomas cualquier entrada del blog de godotengine.org y la pegas en LinkedIn, verás que en vez de la miniatura del artículo arrastra la imagen del autor. No he podido resolverlo.
  • Esta noche agregaré LinkedIn, Telegram y algunas cosas más.