Linkpreview, พรีวิว URL ของเว็บไซต์บนโซเชียลมีเดียและแอปแชต

• LinkPreview เป็นโปรเจกต์สำหรับสร้างพรีวิวของลิงก์เว็บไซต์
• สามารถดูได้ในครั้งเดียวว่า URL ที่กำหนดจะแสดงอย่างไรบน Google/X/Facebook/Discord/WhatsApp
• มีอินเทอร์เฟซที่เรียบง่ายและใช้งานง่ายกว่าเมื่อเทียบกับผลิตภัณฑ์อื่นหรือโปรเจกต์โอเพนซอร์สที่มีอยู่เดิม

[GN⁺]

ความคิดเห็นจาก Hacker News

• ทำออกมาได้ดีและน่าเอาไปลองเล่น รายละเอียดที่ทำให้เห็นอยู่ใน อินเทอร์เฟซเริ่มต้น ของแต่ละแพลตฟอร์มนั้นชอบเป็นพิเศษ
  แต่ดูเหมือนว่าเมตาครอว์เลอร์ของแต่ละแพลตฟอร์มจะทำงานต่างกัน และในสองที่ที่ผมรู้จักดีอย่าง WhatsApp กับ Discord พรีวิวไม่ตรงกับของจริงทั้งคู่
  อยากให้แสดง รีไดเรกต์ ที่เกิดขึ้นระหว่างตามลิงก์ด้วย และควรใส่ URL เป้าหมายผ่าน query parameter หรือ fragment ได้
  https://linkpreview.xyz/#example.com
  https://linkpreview.xyz/#url=https://example.com
  https://linkpreview.xyz/?url=https://example.com
  ถ้ากำหนดข้อมูลใน URL ไม่ได้ มันก็เป็นได้แค่เครื่องมือเว็บน่ารัก ๆ แต่ถ้าควบคุมผ่าน URL ได้ มันจะกลายเป็นยูทิลิตีเว็บแบบเนทีฟที่แชร์ได้ URL ที่ดีจะไม่เปลี่ยน และบนเว็บ URL ก็คือ API
  ขอเสริมจากที่เห็นทวีต https://x.com/fayazara/status/1830272619637047359 ตอนนี้กำลังได้ขึ้นหน้าแรก HN พร้อมกับโดนวิจารณ์สารพัดอย่าง
• ถือว่ายอดเยี่ยมสำหรับเครื่องมือเล็ก ๆ แต่ไม่อยากให้บังคับพิมพ์ https:// อยากให้พิมพ์แบบ example.com แล้วเติมให้อัตโนมัติ
  • การใช้ฟิลด์อินพุต type="url" ก็เป็นอีกวิธีหนึ่ง น่าจะทำให้คีย์บอร์ดมือถือปิด การขึ้นต้นอักษรตัวใหญ่โดยอัตโนมัติ และการแก้คำอัตโนมัติ
  • ใช่ จะแก้ให้ เป็นจุดที่น่ารำคาญจริง ๆ
• เป็นเครื่องมือที่เรียบร้อยดี ถ้าจะเสนอแนะสักหน่อย อยากให้ดึงเมตาแท็กและรูปภาพด้วย สตริง user agent ของบริการที่จะแสดงพรีวิว
  ตัวอย่างเช่น Twitter/X ดึงเมตาแท็กด้วยสตริง user agent Twitterbot/1.0 บางไซต์อาจส่งคอนเทนต์ต่างกันตามบริการ เพื่อปรับรูปภาพให้เหมาะกับวิธีแสดงผลของบริการนั้น ๆ
  อีกอย่าง ดูเหมือน API จะไม่ได้ดูเมตาแท็กเฉพาะของ Twitter [0] มันคืน metadata ชุดเดียวที่ใช้กับทุกพรีวิว เช่นที่ https://govukvue.org ใช้รูปแบบการ์ด summary ที่มีรูปเล็กข้างชื่อและคำอธิบาย แต่เครื่องมือนี้เรนเดอร์เหมือน summary_large_image
  [0] https://developer.x.com/en/docs/x-for-websites/cards/overvie...
  • จะลองปรับปรุงดู จริง ๆ แล้วรีบทำขึ้นมาในเวลาประมาณ 2 ชั่วโมง
• ดูเหมือนจะจัดการ Open Graph ได้ไม่ถูกต้อง ตัวอย่างเช่น แทนที่จะใช้ og:image ในแท็ก head กลับเอา favicon ที่พิกเซลแตกมาขยายให้พอดีกับคอนเทนเนอร์
  • ตอนนี้แค่ดึงสิ่งที่มีอยู่ในไซต์มาแสดง จะลองตรวจดู อยากรู้ว่าใช้ URL ไหนทดสอบ
  • เข้ามาเพื่อจะพูดเรื่องนี้พอดี การใช้ favicon ทำให้คำอธิบายผิดเพี้ยนไปหมด
• ปกติใช้ https://socialsharepreview.com/ อยู่ และมีเครื่องมือคล้าย ๆ กันหลายตัว อยากรู้ว่าเครื่องมือนี้ต่างหรือดีกว่าอย่างไร และทำไมถึงทำเองแทนที่จะใช้โซลูชันที่มีอยู่แล้ว
  • เครื่องมือข้างบนนั้นพังในบางพรีวิว ต้องคลิกเพื่อดูหลายพรีวิว และช้า เครื่องมือในโพสต์ต้นฉบับแสดงทั้งหมดในหน้าเดียว ดูสะอาดกว่า มีพรีวิวมากกว่า และสไตล์ก็เหมาะสม เหตุผลค่อนข้างชัดเจน
  • เมื่อคืนเบื่อ ๆ
• ผมทำเครื่องมือในทิศทางตรงกันข้ามกับตัวนี้ มันสร้างหน้าที่ใช้ตรวจสอบว่าเมตาแท็กใดบนแพลตฟอร์มหนึ่ง ๆ เป็นตัวสร้างพรีวิว
  https://getoutofmyhead.dev/link-preview-tester/
• ผมยังคงฝันว่าสักวันหนึ่งเราจะทำเว็บไซต์ตามมาตรฐาน ทดสอบในเบราว์เซอร์ แล้วก็พอใจได้เพราะมันน่าจะทำงานในเบราว์เซอร์อื่น ๆ ด้วยอยู่แล้ว
  แต่ตอนนี้เรามีเครื่องมือสำหรับตรวจเองว่าเครื่องมือแชตปิดจำนวนมากเรนเดอร์พรีวิวหน้าเว็บของผมอย่างไร
  แล้วทุกคนก็ตื่นเต้นเหมือนมันเป็นสิ่งประดิษฐ์ที่ดีที่สุดตั้งแต่มีการคิดค้นกระดาษ นี่ไม่ใช่ฟอรัมวงการสื่อสนุก ๆ ด้วยซ้ำ แต่เห็นกระแสแบบนี้บน HN ก็นับว่าเป็นยุคที่น่าสนใจ
• ไม่เข้าใจว่าทำไมควรใช้เครื่องมือนี้แทน https://socialsharepreview.com/ หรือ https://www.opengraph.xyz/, https://socialmediasharepreview.com/
  ถ้าจะให้ฟีดแบ็ก การล้มเหลวกับ URL ที่ไม่มี HTTPS ดูไม่ค่อยเข้าท่า ควรฉลาดพอที่จะรับไซต์อะไรก็ได้ที่ผู้ใช้กรอก แล้วพาไปยัง URL และสแกนตาม URL สุดท้ายที่ resolve ได้ เช่นถ้ากรอก "blizzard.com" ก็ควรโหลด "https://www.blizzard.com/en-us/" ให้
  การมี Discord กับ WhatsApp ให้ดูนั้นดี แต่อยากรู้ว่า LinkedIn, Pinterest เป็นอย่างไร และ Slack ล่ะ Slack น่าจะเหมือนกับ Discord
  มันยังไม่บอกด้วยว่าควรแก้อะไร ลองดูว่า socialsharepreview.com ทำอย่างไรน่าจะดี
  https://socialsharepreview.com/?url=https%3A%2F%2Fnews.ycomb...
  https://i.imgur.com/LDXNYYR.png

มีเคล็ดลับที่เป็นประโยชน์มากมายว่าอะไรที่ควรแก้เพื่อให้คอนเทนต์แสดงตัวอย่างได้ถูกต้อง มีประโยชน์มากสำหรับคนสายมาร์เก็ตติ้งที่ชอบเรื่องแบบนี้ แต่ละไซต์มีรูปแบบและข้อจำกัดจำนวนตัวอักษรต่างกัน ดังนั้นการแชร์ข้อมูลว่าควรแก้อะไรจึงดี เช่น ความแตกต่างระหว่าง Twitter Card กับเมตาดาต้า Open Graph แม้ยังไม่ได้ตรวจสอบ แต่ถ้ารับประกันได้ด้วยว่าอ่านเมตาดาต้าที่เหมาะกับแต่ละไซต์อย่างถูกต้องก็คงดี

• มีเครื่องมือพรีวิวฟรีอย่าง https://socialmediasharepreview.com/ ที่แก้ปัญหานี้อยู่แล้ว เลยไม่ค่อยเข้าใจ
  คำอธิบายเดียวที่นึกออกคือสิ่งนี้เป็นเหยื่อล่อแบบ เครื่องมือฟรี เพื่อขายชุดเครื่องมือแบบฟูลสแตก
• ค่อนข้างเจ๋ง แต่ต้องเตรียมพร้อมดูแลให้ทันสมัยทุกเดือน ไม่อย่างนั้นก็จะไร้ประโยชน์อย่างรวดเร็ว
  ข้อเสียอย่างหนึ่งของเครื่องมือแบบนี้คือ URL ต้องเข้าถึงได้ออนไลน์ ทำให้เมื่อเกิดปัญหา รอบการปรับปรุงซ้ำ ค่อนข้างยาว
  ใน Polypane [1] เราทำพรีวิวโซเชียลมีเดียที่ URL ในเครื่องก็ใช้งานได้ และยังสามารถเขียนทับ URL ที่โซเชียลมีเดียนั้นจะแสดงได้ด้วย เราทำพรีวิวของ X/Twitter, Facebook, Slack, LinkedIn, Discord, Mastodon, Discord, Google Search, Bluesky, Mastodon, Threads และดูแลบ่อยๆ แต่ละตัวมีดีไซน์ทั้งโหมดสว่างและโหมดมืดด้วย จึงทดสอบได้ครบจริงๆ และยังบอกด้วยว่าขาดอะไรหรืออะไรไม่รองรับ ดูได้ที่นี่: https://polypane.app/social-media-previews/
  [1] https://polypane.app/
  • ไม่ชอบเวลาคนใน HN แอบโฆษณาสินค้าของตัวเองโดยห่อมาเหมือนเป็นคำแนะนำที่มีประโยชน์
• ยังขาด LinkedIn กับ Mastodon เป็นเครื่องมือที่ดูเรียบร้อยดี ถ้ามี ข้อความแนะนำการปรับปรุง บนหน้าเว็บ เช่น ถ้ามีอะไรขาดไปควรทำอะไรต่อ ก็น่าจะช่วยได้
  • ผมก็คิดเหมือนกันเป๊ะ และไม่รู้ทำไม LinkedIn ถึงแสดงเพจของเราทั้งหมดด้วยรูปภาพผิด
    ถ้ามีใครหาสาเหตุได้ก็บอกด้วย ลองเอาบทความบล็อกใดๆ จากไซต์ godotengine.org ไปวางใน LinkedIn จะเห็นว่ามันดึงรูปผู้เขียนมาแทนรูปขนาดย่อของบทความ แก้ไม่ได้สักที
  • คืนนี้จะเพิ่ม LinkedIn, Telegram และอีกสองสามอย่าง