Linkpreview, aperçu des URL de sites sur les réseaux sociaux et les apps de chat

• LinkPreview est un projet qui génère des aperçus de liens de sites web
• Permet de voir d’un coup d’œil comment une URL donnée s’affiche sur Google/X/Facebook/Discord/WhatsApp
• Offre une interface simple et facile à utiliser par rapport à d’autres produits ou projets open source existants

[GN⁺]

Commentaires Hacker News

• Bien fait et agréable à tester. J’ai particulièrement apprécié le souci du détail qui consiste à l’afficher dans l’interface par défaut de chaque plateforme.
  Cela dit, les crawlers de métadonnées semblent se comporter différemment selon les plateformes, et sur les deux que je connais bien, WhatsApp et Discord, l’aperçu ne correspondait à la réalité dans aucun des deux cas.
  Ce serait bien d’afficher aussi les redirections qui se produisent en suivant le lien, et il faudrait pouvoir mettre l’URL cible dans un paramètre de requête ou un fragment.
  https://linkpreview.xyz/#example.com
  https://linkpreview.xyz/#url=https://example.com
  https://linkpreview.xyz/?url=https://example.com
  Si on ne peut pas spécifier les données dans l’URL, cela reste un petit outil web mignon ; si c’est pilotable par l’URL, cela devient un utilitaire web natif partageable. Les belles URL ne changent pas, et sur le Web, l’URL est l’API.
  Pour ajouter quelque chose après avoir vu ce tweet https://x.com/fayazara/status/1830272619637047359 : il est en train de recevoir à la fois une mise en avant en tête de HN et toutes sortes de critiques.
• Excellent petit outil, mais j’aimerais qu’il ne force pas à saisir https:// et qu’il l’ajoute automatiquement quand on tape quelque chose comme example.com.
  • Utiliser un champ de saisie type="url" serait aussi une option. Sur les claviers mobiles, cela devrait désactiver la capitalisation automatique et la correction automatique.
  • Oui, je vais corriger ça. C’est vraiment agaçant.
• Outil propre. Quelques suggestions : ce serait bien de récupérer les balises meta et les images avec la chaîne user-agent du service dont on affiche l’aperçu.
  Par exemple, Twitter/X récupère les balises meta avec la chaîne user-agent Twitterbot/1.0. Certains sites peuvent fournir un contenu différent selon le service, afin d’optimiser les images pour le rendu de ce service.
  Par ailleurs, l’API ne semble pas regarder les balises meta propres à Twitter [0]. Elle renvoie simplement un seul jeu de métadonnées utilisé pour tous les aperçus. Par exemple, https://govukvue.org utilise le format de carte summary, avec une petite image à côté du nom et de la description, mais cet outil le rend comme un summary_large_image.
  [0] https://developer.x.com/en/docs/x-for-websites/cards/overvie...
  • Je vais essayer d’améliorer ça. En fait, je l’ai bricolé rapidement en environ 2 heures.
• Il ne semble pas gérer correctement Open Graph. Par exemple, au lieu de og:image dans la balise head, il a affiché une favicon toute pixellisée, agrandie pour remplir le conteneur.
  • Pour l’instant, je récupère juste ce qui est présent sur le site et je l’affiche. Je vais vérifier. Je serais curieux de savoir avec quelle URL tu as testé.
  • Je venais pour dire ça. Comme il utilise la favicon, la représentation est complètement inexacte.
• J’utilise généralement https://socialsharepreview.com/, et il existe beaucoup d’outils similaires. Je serais curieux de savoir en quoi celui-ci est différent ou meilleur, et pourquoi l’avoir fait soi-même plutôt que d’utiliser les solutions existantes.
  • L’outil ci-dessus était cassé sur certains aperçus. Il faut cliquer pour voir plusieurs aperçus, et c’est lent. L’outil de l’article montre tout sur une seule page, il est plus propre, propose davantage d’aperçus et le style est approprié. Ce sont des raisons assez évidentes.
  • Je m’ennuyais hier soir.
• J’ai créé l’inverse de cet outil. Il génère une page qui permet de voir quelles balises meta produisent l’aperçu sur une plateforme donnée.
  https://getoutofmyhead.dev/link-preview-tester/
• Je rêve encore du jour où l’on pourra créer un site web conforme aux standards, le tester dans un navigateur, puis être satisfait parce qu’il fonctionnera évidemment aussi dans les autres navigateurs.
  Mais maintenant, il existe un outil pour vérifier manuellement comment d’innombrables outils de chat propriétaires rendent l’aperçu de ma page.
  Et tout le monde s’enthousiasme comme si c’était la meilleure invention depuis le papier. Voir cette tendance sur HN, et pas sur un quelconque forum amusant de l’industrie des médias, c’est une époque intéressante.
• Je ne vois pas pourquoi je devrais utiliser cet outil plutôt que https://socialsharepreview.com/, https://www.opengraph.xyz/ ou https://socialmediasharepreview.com/.
  En guise de retour, c’est maladroit que ça échoue sur les URL sans HTTPS. Il devrait être assez intelligent pour accepter n’importe quel site saisi, suivre vers l’URL correspondante, puis scanner l’URL finale résolue. Par exemple, si je saisis "blizzard.com", il devrait charger "https://www.blizzard.com/en-us/".
  C’est bien de voir Discord et WhatsApp, mais qu’en est-il de LinkedIn, Pinterest, et de Slack ? Slack devrait probablement être identique à Discord.
  Il n’indique pas non plus ce qu’il faut corriger. Ce serait utile de regarder comment fait socialsharepreview.com.
  https://socialsharepreview.com/?url=https%3A%2F%2Fnews.ycomb...
  https://i.imgur.com/LDXNYYR.png

Fournit beaucoup de conseils utiles sur ce qu’il faut corriger pour que le contenu se déploie correctement. C’est vraiment utile pour les gens du marketing qui aiment ce genre de choses. Comme chaque site a ses propres formats et limites de nombre de caractères, c’est une bonne idée de partager les informations à corriger. Par exemple, la différence entre les Twitter Cards et les métadonnées Open Graph. Je n’ai pas vérifié, mais ce serait bien de garantir aussi que les métadonnées adaptées à chaque site sont correctement lues.

• Je ne comprends pas bien, car il existe déjà des outils gratuits de prévisualisation comme https://socialmediasharepreview.com/ qui résolvent ce problème.
  La seule explication, c’est que ce soit un appât sous forme d’outil gratuit pour vendre un kit full stack.
• Plutôt sympa. Mais il faut être prêt à le maintenir à jour tous les mois, sinon il deviendra vite inutile.
  L’un des inconvénients de ce type d’outil, c’est que l’URL doit être accessible en ligne, donc lorsqu’un problème survient, le cycle d’itération devient assez long.
  Dans Polypane [1], nous avons créé des aperçus pour les réseaux sociaux qui fonctionnent aussi avec des URL locales, et qui permettent même de remplacer l’URL affichée par le réseau social concerné. Nous avons créé des aperçus pour X/Twitter, Facebook, Slack, LinkedIn, Discord, Mastodon, Discord, Google Search, Bluesky, Mastodon et Threads, et nous les maintenons fréquemment. Chacun existe aussi en mode clair et en mode sombre, ce qui permet de tout tester réellement. L’outil indique aussi ce qui manque et ce qui n’est pas compatible. Vous pouvez le voir ici : https://polypane.app/social-media-previews/
  [1] https://polypane.app/
  • Je n’aime pas quand les gens sur HN glissent une pub pour leur produit en l’emballant comme un conseil utile.
• LinkedIn et Mastodon manquent. C’est un outil propre. Ce serait utile d’avoir sur la page des indications d’amélioration expliquant quoi faire lorsqu’il manque quelque chose.
  • J’ai exactement la même impression. Et je ne sais pas pourquoi, mais LinkedIn affiche toutes nos pages avec la mauvaise image.
    Si quelqu’un arrive à comprendre, j’aimerais bien qu’il me le dise. Prenez n’importe quel billet de blog du site godotengine.org et collez-le dans LinkedIn : vous verrez que l’image de l’auteur est récupérée au lieu de la vignette de l’article. Nous n’avons pas réussi à le résoudre.
  • J’ajouterai LinkedIn, Telegram et quelques autres ce soir.