Linkpreview, pratinjau URL situs di media sosial dan aplikasi chat

• LinkPreview adalah proyek untuk membuat pratinjau tautan situs web
• Memungkinkan Anda melihat sekilas bagaimana URL tertentu tampil di Google/X/Facebook/Discord/WhatsApp
• Dibandingkan produk lain atau proyek open source yang sudah ada, layanan ini menawarkan antarmuka yang sederhana dan mudah digunakan

[GN⁺]

Komentar Hacker News

• Dibuat dengan baik dan enak untuk dicoba-coba. Saya terutama suka detail yang membuatnya terlihat di dalam antarmuka bawaan tiap platform
  Namun tampaknya crawler meta tiap platform bekerja secara berbeda, dan pada dua yang cukup saya kenal, WhatsApp dan Discord, pratinjaunya sama-sama tidak cocok dengan yang sebenarnya
  Akan bagus kalau redirect yang terjadi saat mengikuti tautan juga ditampilkan, dan URL target seharusnya bisa dimasukkan sebagai parameter kueri atau fragment
  https://linkpreview.xyz/#example.com
  https://linkpreview.xyz/#url=https://example.com
  https://linkpreview.xyz/?url=https://example.com
  Kalau tidak bisa menentukan data di URL, ini hanya menjadi alat halaman web yang lucu, tetapi kalau bisa dikendalikan lewat URL, ia menjadi utilitas web native yang bisa dibagikan. Seperti URL yang keren tidak berubah, di web URL adalah API
  Menambahkan setelah melihat tweet https://x.com/fayazara/status/1830272619637047359: sekarang sedang mendapat paparan di halaman depan HN sekaligus segala macam kritik
• Sebagai alat kecil ini bagus, tetapi sebaiknya jangan memaksa pengguna mengetik https://; kalau memasukkan example.com, tambahkan otomatis
  • Menggunakan field input type="url" juga bisa. Sepertinya itu akan mematikan kapitalisasi otomatis dan autocorrect di keyboard mobile
  • Benar, akan saya perbaiki. Itu memang bagian yang sangat menjengkelkan
• Alat yang rapi. Beberapa saran: akan bagus kalau mengambil meta tag dan gambar dengan string user agent dari layanan yang pratinjaunya ditampilkan
  Misalnya Twitter/X mengambil meta tag dengan string user agent Twitterbot/1.0. Beberapa situs bisa memberikan konten berbeda per layanan agar gambarnya dioptimalkan sesuai cara layanan itu menampilkannya
  Selain itu, API tampaknya tidak melihat meta tag khusus Twitter [0]. Ia hanya mengembalikan satu set metadata yang dipakai untuk semua pratinjau. Misalnya di https://govukvue.org digunakan format kartu summary, yang menampilkan gambar kecil di samping nama dan deskripsi, tetapi alat ini merendernya seperti summary_large_image
  [0] https://developer.x.com/en/docs/x-for-websites/cards/overvie...
  • Akan saya coba perbaiki. Sebenarnya ini dibuat buru-buru dalam sekitar 2 jam
• Tampaknya tidak menangani Open Graph dengan benar. Misalnya, alih-alih og:image di tag head, ia memperbesar favicon yang pecah piksel agar pas di kontainer
  • Saat ini hanya mengambil yang ada di situs dan menampilkannya. Akan saya cek. Penasaran URL apa yang dipakai untuk mengetes
  • Saya masuk untuk mengatakan ini. Karena memakai favicon, deskripsinya jadi sepenuhnya tidak akurat
• Biasanya saya memakai https://socialsharepreview.com/, dan ada banyak alat serupa. Saya penasaran apa yang membuat alat ini berbeda atau lebih baik, dan mengapa membuat sendiri alih-alih memakai solusi yang sudah ada
  • Alat di atas rusak pada beberapa pratinjau. Untuk melihat beberapa pratinjau harus diklik dan lambat. Alat di posting asli menampilkan semuanya di satu halaman, lebih bersih, punya lebih banyak pratinjau, dan gayanya juga sesuai. Alasannya cukup jelas
  • Saya bosan tadi malam
• Saya membuat kebalikan dari alat ini. Ia menghasilkan halaman yang memungkinkan Anda memeriksa meta tag mana yang membentuk pratinjau di platform tertentu
  https://getoutofmyhead.dev/link-preview-tester/
• Saya masih bermimpi tentang hari ketika kita bisa membuat situs web sesuai standar, mengujinya di browser, lalu puas karena tentu saja akan berjalan juga di browser lain
  Namun sekarang ada alat untuk memeriksa secara manual bagaimana sekian banyak alat chat proprietary merender pratinjau halaman saya
  Dan semua orang antusias seolah-olah ini barang terbaik sejak ditemukannya kertas. Menarik melihat tren seperti ini di HN, bukan di forum industri media yang lucu
• Saya tidak tahu mengapa harus memakai alat ini ketimbang https://socialsharepreview.com/, https://www.opengraph.xyz/, atau https://socialmediasharepreview.com/
  Sebagai masukan, agak janggal kalau gagal pada URL tanpa HTTPS. Seharusnya cukup pintar untuk menerima situs apa pun yang dimasukkan, menavigasi ke URL-nya, lalu memindai berdasarkan URL final yang berhasil di-resolve. Misalnya, jika memasukkan "blizzard.com", seharusnya memuat "https://www.blizzard.com/en-us/"
  Bagus ada Discord dan WhatsApp, tetapi bagaimana dengan LinkedIn, Pinterest, dan Slack? Slack sepertinya seharusnya sama dengan Discord
  Alat ini juga tidak memberi tahu apa yang perlu diperbaiki. Sebaiknya lihat bagaimana socialsharepreview.com melakukannya
  https://socialsharepreview.com/?url=https%3A%2F%2Fnews.ycomb...
  https://i.imgur.com/LDXNYYR.png

Memberikan banyak kiat berguna tentang apa yang perlu diperbaiki agar konten dapat tampil dengan benar. Ini sangat berguna bagi orang-orang pemasaran yang menyukai hal semacam ini. Karena setiap situs memiliki format dan batasan jumlah karakter yang berbeda, sebaiknya bagikan informasi yang perlu diperbaiki. Misalnya, perbedaan antara Twitter Card dan metadata Open Graph. Saya belum memeriksanya, tetapi akan bagus jika juga memastikan metadata yang sesuai untuk tiap situs dibaca dengan benar

• Saya kurang paham, karena sudah ada alat pratinjau gratis seperti https://socialmediasharepreview.com/ yang menyelesaikan masalah ini
  Satu-satunya penjelasan adalah ini merupakan umpan alat gratis untuk menjual kit full-stack mereka
• Cukup keren. Namun, Anda harus siap menjaganya tetap mutakhir setiap bulan, kalau tidak alat ini akan cepat tidak berguna
  Salah satu kekurangan alat seperti ini adalah URL harus dapat diakses secara online, sehingga ketika ada masalah, siklus iterasi perbaikan menjadi cukup panjang
  Di Polypane [1], kami membuat pratinjau media sosial yang juga berfungsi untuk URL lokal, dan memungkinkan Anda menimpa URL yang akan ditampilkan oleh media sosial tersebut. Kami membuat pratinjau untuk X/Twitter, Facebook, Slack, LinkedIn, Discord, Mastodon, Discord, Google Search, Bluesky, Mastodon, Threads dan sering memeliharanya. Masing-masing juga memiliki desain mode terang dan mode gelap, sehingga Anda benar-benar dapat menguji semuanya. Alat ini juga memberi tahu apa yang kurang dan apa yang tidak kompatibel. Bisa dilihat di sini: https://polypane.app/social-media-previews/
  [1] https://polypane.app/
  • Saya tidak suka ketika orang-orang HN menyelipkan iklan produk mereka sendiri yang dibungkus seolah-olah sebagai saran bermanfaat
• LinkedIn dan Mastodon belum ada. Alat yang rapi. Akan membantu jika ada teks panduan perbaikan di halaman, seperti apa yang harus dilakukan jika ada sesuatu yang kurang
  • Saya juga berpikir persis sama. Dan entah kenapa LinkedIn menampilkan semua halaman kami dengan gambar yang salah
    Kalau ada yang bisa mencari tahu, mohon beri tahu. Ambil artikel blog mana pun dari situs godotengine.org dan tempelkan ke LinkedIn; Anda akan melihat gambar penulis yang ditarik, bukan thumbnail artikel. Kami belum berhasil memperbaikinya
  • Malam ini saya akan menambahkan LinkedIn, Telegram, dan beberapa lainnya