LinkPreview, Vorschau von Website-URLs in Social Media und Chat-Apps

• LinkPreview ist ein Projekt zur Erstellung von Vorschauen für Website-Links
• Auf einen Blick sehen, wie eine bestimmte URL bei Google/X/Facebook/Discord/WhatsApp angezeigt wird
• Bietet im Vergleich zu anderen Produkten oder bestehenden Open-Source-Projekten eine einfache und benutzerfreundliche Oberfläche

[GN⁺]

Meinungen auf Hacker News

• Gut gemacht und schön zum Herumspielen. Besonders gefallen haben mir die Details, die innerhalb der Standardoberfläche der jeweiligen Plattform sichtbar gemacht werden.
  Allerdings scheinen die Meta-Crawler je nach Plattform unterschiedlich zu funktionieren, und bei den beiden, die ich gut kenne, WhatsApp und Discord, stimmten die Vorschauen in beiden Fällen nicht mit der Realität überein.
  Es wäre auch gut, die beim Folgen eines Links entstehenden Redirects anzuzeigen, und man sollte die Ziel-URL als Query-Parameter oder Fragment angeben können.
  https://linkpreview.xyz/#example.com
  https://linkpreview.xyz/#url=https://example.com
  https://linkpreview.xyz/?url=https://example.com
  Wenn man die Daten nicht in der URL angeben kann, bleibt es nur ein nettes Webseiten-Tool; wenn es per URL steuerbar ist, wird es zu einem teilbaren nativen Web-Utility. Coole URLs ändern sich nicht, und im Web ist die URL die API.
  Ergänzend mit Blick auf den Tweet https://x.com/fayazara/status/1830272619637047359: Es bekommt gerade sowohl Sichtbarkeit ganz oben auf HN als auch jede Menge Kritik ab.
• Für ein kleines Tool ist es großartig, aber ich fände es besser, wenn man nicht zwingend https:// eingeben müsste, sondern es automatisch ergänzt würde, wenn man etwas wie example.com eingibt.
  • Ein Eingabefeld mit type="url" wäre auch eine Möglichkeit. Auf mobilen Tastaturen dürften dadurch automatische Großschreibung und Autokorrektur deaktiviert werden.
  • Stimmt, werde ich beheben. Das ist wirklich nervig.
• Ein sauberes Tool. Ein paar Vorschläge: Es wäre gut, wenn Meta-Tags und Bilder mit dem User-Agent-String des Dienstes abgerufen würden, dessen Vorschau angezeigt wird.
  Twitter/X ruft Meta-Tags zum Beispiel mit dem User-Agent-String Twitterbot/1.0 ab. Manche Sites liefern je nach Dienst unterschiedliche Inhalte aus, um Bilder für die jeweilige Darstellungsweise zu optimieren.
  Außerdem scheint die API die Twitter-spezifischen Meta-Tags [0] nicht zu berücksichtigen. Sie gibt nur einen einzigen Satz Metadaten zurück, der für alle Vorschauen verwendet wird. Auf https://govukvue.org wird zum Beispiel das Kartenformat summary verwendet, bei dem neben Name und Beschreibung ein kleines Bild erscheint; dieses Tool rendert es aber wie summary_large_image.
  [0] https://developer.x.com/en/docs/x-for-websites/cards/overvie...
  • Ich werde versuchen, das zu verbessern. Ehrlich gesagt habe ich es in etwa 2 Stunden hastig gebaut.
• Open Graph scheint nicht richtig verarbeitet zu werden. Statt des og:image im head-Tag wurde zum Beispiel ein verpixeltes Favicon hochskaliert und passend in den Container gesetzt.
  • Ich hole mir einfach, was auf der Site vorhanden ist, und zeige es an. Ich schaue es mir an. Mich würde interessieren, mit welcher URL du getestet hast.
  • Genau das wollte ich auch sagen. Durch die Verwendung des Favicons ist die Darstellung völlig ungenau.
• Normalerweise nutze ich https://socialsharepreview.com/, und es gibt viele ähnliche Tools. Mich würde interessieren, worin sich dieses Tool unterscheidet oder besser ist und warum es selbst gebaut wurde statt bestehende Lösungen zu verwenden.
  • Das oben genannte Tool war bei einigen Vorschauen kaputt. Um mehrere Vorschauen zu sehen, muss man klicken, und es ist langsam. Das Tool aus dem ursprünglichen Beitrag zeigt alles auf einer Seite, ist übersichtlicher, hat mehr Vorschauen und das Styling passt besser. Ziemlich klare Gründe.
  • Mir war gestern Abend langweilig.
• Ich habe die umgekehrte Richtung dieses Tools gebaut. Es erzeugt eine Seite, auf der man prüfen kann, welche Meta-Tags auf einer bestimmten Plattform die Vorschau erzeugen.
  https://getoutofmyhead.dev/link-preview-tester/
• Ich träume immer noch von dem Tag, an dem man eine Website standardkonform bauen, sie im Browser testen und dann zufrieden sein kann, weil sie selbstverständlich auch in anderen Browsern läuft.
  Aber inzwischen gibt es Tools, mit denen man manuell prüfen kann, wie zahllose proprietäre Chat-Tools die Vorschau meiner Seite rendern.
  Und alle sind begeistert, als wäre es die beste Erfindung seit Papier. Interessante Zeiten, wenn man so einen Trend nicht in einem Forum der Medienbranche, sondern auf HN sieht.
• Ich sehe nicht, warum man dieses Tool statt https://socialsharepreview.com/ oder https://www.opengraph.xyz/ oder https://socialmediasharepreview.com/ verwenden sollte.
  Als Feedback: Dass es bei URLs ohne HTTPS scheitert, wirkt unbeholfen. Es sollte intelligent genug sein, dass man irgendeine Site eingibt, es der URL folgt und anhand der endgültig aufgelösten URL scannt. Wenn man zum Beispiel "blizzard.com" eingibt, sollte es "https://www.blizzard.com/en-us/" laden.
  Es ist gut, dass Discord und WhatsApp angezeigt werden, aber was ist mit LinkedIn und Pinterest, und wie sieht es mit Slack aus? Slack dürfte wohl ähnlich wie Discord sein.
  Es sagt auch nicht, was man beheben muss. Schau dir an, wie socialsharepreview.com das macht.
  https://socialsharepreview.com/?url=https%3A%2F%2Fnews.ycomb...
  https://i.imgur.com/LDXNYYR.png

Es liefert viele nützliche Tipps dazu, was man korrigieren muss, damit Inhalte richtig aufgeklappt bzw. angezeigt werden. Für Marketing-Leute, die so etwas mögen, ist das wirklich hilfreich. Da jedes Site-Format und die Zeichenlimits unterschiedlich sind, ist es sinnvoll, die zu korrigierenden Informationen zu teilen. Zum Beispiel der Unterschied zwischen Twitter Cards und Open-Graph-Metadaten. Ich habe es nicht überprüft, aber es wäre gut, auch sicherzustellen, dass die Metadaten für jede Site korrekt gelesen werden.

• Es gibt bereits kostenlose Preview-Tools wie https://socialmediasharepreview.com/, die dieses Problem lösen, daher verstehe ich es nicht so ganz.
  Die einzige Erklärung ist, dass dies ein Köder als kostenloses Tool ist, um ein Full-Stack-Kit zu verkaufen.
• Ziemlich cool. Allerdings muss man bereit sein, es jeden Monat aktuell zu halten, sonst wird es schnell nutzlos.
  Einer der Nachteile solcher Tools ist, dass die URL online erreichbar sein muss; wenn es Probleme gibt, wird der Iterierungszyklus dadurch ziemlich lang.
  In Polypane [1] haben wir Social-Media-Previews gebaut, die auch mit lokalen URLs funktionieren, und man kann außerdem die URL überschreiben, die dem jeweiligen sozialen Medium angezeigt wird. Wir haben Previews für X/Twitter, Facebook, Slack, LinkedIn, Discord, Mastodon, Discord, Google Search, Bluesky, Mastodon und Threads gebaut und pflegen sie regelmäßig. Für jede gibt es auch Designs im hellen und dunklen Modus, sodass man tatsächlich alles testen kann. Es zeigt auch an, was fehlt und was inkompatibel ist. Hier zu sehen: https://polypane.app/social-media-previews/
  [1] https://polypane.app/
  • Ich mag es nicht, wenn HN-Leute Werbung für ihr eigenes Produkt als hilfreichen Rat verpacken.
• LinkedIn und Mastodon fehlen. Ein sauberes Tool. Hilfreich wären Hinweise zur Verbesserung, etwa was zu tun ist, wenn auf der Seite etwas fehlt.
  • Genau das habe ich auch gedacht. Und aus irgendeinem Grund zeigt LinkedIn alle unsere Seiten mit dem falschen Bild an.
    Falls jemand herausfinden kann, woran es liegt, würde ich mich über einen Hinweis freuen. Wenn man irgendeinen Blogbeitrag von godotengine.org nimmt und bei LinkedIn einfügt, sieht man, dass statt des Artikel-Thumbnails das Autorenbild gezogen wird. Wir konnten es nicht lösen.
  • Ich werde heute Abend LinkedIn, Telegram und noch ein paar weitere hinzufügen.