5 điểm bởi GN⁺ 2024-09-02 | 1 bình luận | Chia sẻ qua WhatsApp
  • LinkPreview là một dự án tạo bản xem trước cho các liên kết website
  • Có thể xem nhanh một URL cụ thể sẽ hiển thị như thế nào trên Google/X/Facebook/Discord/WhatsApp
  • Cung cấp giao diện đơn giản và dễ sử dụng hơn so với các sản phẩm khác hoặc các dự án mã nguồn mở hiện có

1 bình luận

 
GN⁺ 2024-09-02
Ý kiến trên Hacker News
  • Làm rất tốt và khá vui để nghịch. Mình đặc biệt thích các chi tiết được hiển thị bên trong giao diện mặc định của từng nền tảng
    Tuy vậy có vẻ bộ thu thập metadata của mỗi nền tảng hoạt động khác nhau, và với hai nơi mình biết rõ là WhatsApp và Discord thì phần xem trước đều không khớp với thực tế
    Sẽ tốt hơn nếu hiển thị cả redirect phát sinh khi lần theo liên kết, và nên cho phép đưa URL đích vào bằng query parameter hoặc fragment
    https://linkpreview.xyz/#example.com
    https://linkpreview.xyz/#url=https://example.com
    https://linkpreview.xyz/?url=https://example.com
    Nếu không thể chỉ định dữ liệu trong URL thì nó chỉ là một công cụ web dễ thương, nhưng nếu điều khiển được bằng URL thì nó trở thành một tiện ích web native có thể chia sẻ. Cũng như URL đẹp không đổi, trên web thì URL chính là API
    Nói thêm sau khi xem tweet https://x.com/fayazara/status/1830272619637047359: hiện đang vừa được đẩy lên đầu HN vừa nhận đủ mọi lời chỉ trích
  • Là một công cụ nhỏ thì rất tuyệt, nhưng đừng bắt người dùng phải nhập https:// theo kiểu cưỡng ép; nếu nhập example.com thì nên tự gắn vào
    • Dùng ô nhập có type="url" cũng là một cách. Có vẻ như trên bàn phím di động nó sẽ tắt tự động viết hoa chữ cái đầu và tự sửa
    • Đúng vậy, tôi sẽ sửa. Đó thực sự là phần rất bực mình
  • Công cụ gọn gàng. Nếu góp ý vài điểm thì sẽ tốt hơn nếu lấy meta tag và hình ảnh bằng chuỗi user-agent của dịch vụ hiển thị preview
    Ví dụ Twitter/X lấy meta tag bằng chuỗi user-agent Twitterbot/1.0. Một số trang có thể trả về nội dung khác nhau theo từng dịch vụ để tối ưu hình ảnh cho cách hiển thị của dịch vụ đó
    Ngoài ra có vẻ API không xem các meta tag dành riêng cho Twitter [0]. Nó chỉ trả về một bộ metadata dùng cho mọi preview. Chẳng hạn ở https://govukvue.org có dùng kiểu thẻ summary, nơi một ảnh nhỏ xuất hiện cạnh tên và mô tả, nhưng công cụ này lại render như summary_large_image
    [0] https://developer.x.com/en/docs/x-for-websites/cards/overvie...
    • Tôi sẽ thử cải thiện. Thật ra cái này được làm vội chỉ trong khoảng 2 giờ
  • Có vẻ nó không xử lý Open Graph đúng cách. Ví dụ thay vì og:image trong thẻ head, nó lại phóng to favicon bị vỡ hạt cho vừa khung chứa
    • Hiện tại nó chỉ lấy thứ có sẵn trên trang rồi hiển thị. Tôi sẽ kiểm tra. Muốn biết bạn đã test bằng URL nào
    • Tôi vào đây cũng để nói điều này. Việc dùng favicon khiến mô tả hoàn toàn không chính xác
  • Tôi thường dùng https://socialsharepreview.com/ nhưng có khá nhiều công cụ tương tự. Tôi muốn biết công cụ này khác hay tốt hơn ở điểm nào, và vì sao lại tự làm thay vì dùng giải pháp sẵn có
    • Công cụ ở trên bị lỗi ở một vài preview. Muốn xem nhiều preview thì phải bấm từng cái và khá chậm. Công cụ trong bài gốc hiển thị tất cả trên một trang, gọn hơn, có nhiều preview hơn và style cũng phù hợp. Đó là những lý do khá rõ ràng
    • Tối qua tôi rảnh quá
  • Tôi đã làm một công cụ theo hướng ngược lại. Nó tạo ra một trang để bạn kiểm tra meta tag nào tạo nên preview trên từng nền tảng cụ thể
    https://getoutofmyhead.dev/link-preview-tester/
  • Tôi vẫn mơ về ngày có thể làm website đúng chuẩn, test trong trình duyệt rồi yên tâm rằng đương nhiên nó sẽ chạy trên các trình duyệt khác
    Thế mà giờ lại có công cụ để kiểm tra thủ công cách vô số công cụ chat độc quyền render phần preview trang của tôi
    Và mọi người đều hào hứng như thể đó là thứ tuyệt nhất kể từ khi giấy được phát minh. Thật thú vị khi thấy xu hướng này trên HN chứ không phải một diễn đàn ngành media vui vẻ nào đó
  • Tôi không hiểu vì sao nên dùng công cụ này thay vì https://socialsharepreview.com/ hay https://www.opengraph.xyz/, https://socialmediasharepreview.com/
    Nếu góp ý thì việc thất bại với URL không có HTTPS là khá kỳ. Nó nên đủ thông minh để bạn nhập bất kỳ site nào, tự điều hướng theo URL và quét dựa trên URL cuối cùng đã được phân giải. Ví dụ nhập "blizzard.com" thì nó nên tải "https://www.blizzard.com/en-us/"
    Việc có Discord và WhatsApp là tốt, nhưng còn LinkedIn, Pinterest thì sao, và Slack thì sẽ thế nào. Có lẽ Slack nên giống Discord
    Nó cũng không cho biết cần sửa gì. Có thể tham khảo cách socialsharepreview.com làm
    https://socialsharepreview.com/?url=https%3A%2F%2Fnews.ycomb...
    https://i.imgur.com/LDXNYYR.png

Cung cấp khá nhiều mẹo hữu ích về việc cần sửa gì để nội dung hiển thị bung ra đúng cách. Điều này thực sự hữu ích với những người làm marketing thích mấy thứ như thế này. Mỗi trang có định dạng và giới hạn số ký tự khác nhau, nên sẽ tốt hơn nếu chia sẻ những thông tin cần chỉnh sửa. Ví dụ như sự khác biệt giữa Twitter Cards và metadata Open Graph. Tôi chưa kiểm tra, nhưng sẽ tốt hơn nếu còn đảm bảo rằng metadata phù hợp cho từng trang được đọc đúng cách.

  • Đã có các công cụ xem trước miễn phí như https://socialmediasharepreview.com/ giải quyết vấn đề này rồi, nên tôi không thực sự hiểu lắm.
    Cách giải thích duy nhất là đây chỉ là mồi công cụ miễn phí để bán bộ giải pháp full-stack.
  • Khá hay. Chỉ là bạn phải sẵn sàng duy trì nó luôn được cập nhật hằng tháng, nếu không nó sẽ nhanh chóng trở nên vô dụng.
    Một trong những nhược điểm của các công cụ kiểu này là URL phải có thể truy cập được trên internet, nên nếu có vấn đề thì chu kỳ lặp cải tiến sẽ khá dài.
    Polypane [1] đã tạo phần xem trước mạng xã hội hoạt động cả với URL cục bộ, và cũng cho phép ghi đè URL mà mạng xã hội đó sẽ hiển thị. Họ đã làm phần xem trước cho X/Twitter, Facebook, Slack, LinkedIn, Discord, Mastodon, Discord, Google Search, Bluesky, Mastodon, Threads và thường xuyên bảo trì. Mỗi cái còn có cả giao diện sáng và tối, nên bạn thực sự có thể kiểm tra tất cả. Nó cũng cho biết những gì còn thiếu và những gì không tương thích. Có thể xem tại đây: https://polypane.app/social-media-previews/
    [1] https://polypane.app/
    • Tôi ghét việc người trên HN ngụy trang quảng cáo sản phẩm của mình như thể đó là lời khuyên hữu ích.
  • Thiếu LinkedIn và Mastodon. Công cụ khá gọn gàng. Sẽ hữu ích nếu trên trang có thông điệp hướng dẫn cải thiện kiểu như cần làm gì khi còn thiếu nội dung nào đó.
    • Tôi cũng nghĩ y hệt. Và không hiểu vì sao, nhưng LinkedIn lại hiển thị toàn bộ trang của chúng tôi bằng hình ảnh sai.
      Nếu ai tìm ra được thì mong hãy cho tôi biết. Chỉ cần lấy bất kỳ bài blog nào trên trang godotengine.org rồi dán vào LinkedIn, bạn sẽ thấy nó kéo ảnh tác giả lên thay vì ảnh thumbnail của bài viết. Tôi vẫn chưa giải quyết được.
    • Tối nay tôi sẽ thêm LinkedIn, Telegram và vài thứ khác nữa.