Linkpreview, सोशल मीडिया और चैट ऐप्स में साइट URL प्रीव्यू

 (linkpreview.xyz)
5 पॉइंट द्वारा GN⁺ 2024-09-02 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • LinkPreview एक ऐसा प्रोजेक्ट है जो वेबसाइट लिंक के प्रीव्यू जनरेट करता है
  • किसी खास URL को Google/X/Facebook/Discord/WhatsApp में वह कैसे दिखेगा, यह एक नज़र में देखा जा सकता है
  • दूसरे प्रोडक्ट्स या मौजूदा open source प्रोजेक्ट्स की तुलना में यह सरल और इस्तेमाल में आसान इंटरफ़ेस देता है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-09-02
Hacker News की राय
  • अच्छी तरह बनाया गया है और इसे आज़माना मज़ेदार है। हर प्लेटफ़ॉर्म के डिफ़ॉल्ट इंटरफ़ेस के अंदर दिखाने वाला detail खास तौर पर अच्छा लगा
    हालांकि लगता है कि हर प्लेटफ़ॉर्म का meta crawler अलग तरह से काम करता है, और जिन दो को मैं अच्छी तरह जानता हूं—WhatsApp और Discord—उनमें preview असलियत से दोनों ही मेल नहीं खा रहे थे
    लिंक follow करते समय होने वाले redirects भी दिखें तो अच्छा होगा, और target URL को query parameter या fragment के रूप में डाल पाना चाहिए
    https://linkpreview.xyz/#example.com
    https://linkpreview.xyz/#url=https://example.com
    https://linkpreview.xyz/?url=https://example.com
    अगर URL में data specify नहीं कर सकते, तो यह बस एक प्यारा सा webpage tool रह जाता है; लेकिन URL से control हो तो यह share करने योग्य native web utility बन जाता है। अच्छे URLs बदलते नहीं हैं—web में URL ही API है
    ट्वीट https://x.com/fayazara/status/1830272619637047359 देखकर जोड़ना चाहूंगा कि इसे HN पर top exposure और तरह-तरह की criticism दोनों साथ मिल रही हैं
  • छोटे tool के तौर पर बढ़िया है, लेकिन https:// जबरन type न करवाकर example.com जैसा input देने पर अपने-आप जोड़ दे तो अच्छा होगा
    • type="url" वाला input field इस्तेमाल करना भी एक तरीका है। शायद mobile keyboard पर auto-capitalization और auto-correction बंद हो जाएंगे
    • सही, इसे ठीक करूंगा। सच में irritate करने वाली चीज़ है
  • साफ-सुथरा tool है। कुछ suggestions दूं तो, preview दिखाने वाली service के user agent string से meta tags और images fetch करें तो अच्छा होगा
    उदाहरण के लिए Twitter/X Twitterbot/1.0 user agent string से meta tags fetch करता है। कुछ sites उस service के display style के हिसाब से images optimize करने के लिए service-specific अलग content दे सकती हैं
    साथ ही API शायद Twitter-specific meta tags [0] नहीं देख रहा। यह सभी previews के लिए metadata का सिर्फ एक set return करता है। उदाहरण के लिए https://govukvue.org पर summary card format इस्तेमाल होता है, जिसमें name और description के पास छोटी image आती है, लेकिन यह tool उसे summary_large_image की तरह render करता है
    [0] https://developer.x.com/en/docs/x-for-websites/cards/overvie...
    • सुधारने की कोशिश करूंगा। असल में यह लगभग 2 घंटे में जल्दबाज़ी में बनाया था
  • लगता है Open Graph को सही से handle नहीं कर रहा। उदाहरण के लिए head tag के og:image के बजाय, pixelated favicon को container में fit करने के लिए बड़ा करके दिखाया
    • अभी तो site पर जो है वही fetch करके दिखा रहा हूं। check करूंगा। किस URL से test किया था, यह जानना चाहूंगा
    • मैं भी यही कहने आया था। favicon इस्तेमाल करने की वजह से description पूरी तरह inaccurate है
  • आम तौर पर https://socialsharepreview.com/ इस्तेमाल करता हूं; ऐसे similar tools काफी हैं। यह tool कैसे अलग या बेहतर है, और existing solutions के बजाय इसे खुद बनाने की वजह क्या है, जानना चाहूंगा
    • ऊपर वाला tool कुछ previews में टूट गया था। कई previews देखने के लिए click करना पड़ता है और slow है। original post वाला tool एक ही page पर सब दिखाता है, ज्यादा clean है, ज्यादा previews हैं, और styling भी ठीक है। वजहें काफी साफ हैं
    • कल रात bore हो रहा था
  • मैंने इस tool की उलटी दिशा वाला version बनाया है। यह एक page generate करता है जिससे पता चल सके कि किसी specific platform पर कौन से meta tags preview बनाते हैं
    https://getoutofmyhead.dev/link-preview-tester/
  • मैं अब भी उस दिन का सपना देखता हूं जब standards के हिसाब से website बनाकर browser में test करूं, और फिर इस भरोसे से संतुष्ट हो सकूं कि दूसरे browsers में भी चलेगी
    लेकिन अब हमारे पास यह manually check करने वाला tool है कि ढेरों proprietary chat tools मेरे page preview को कैसे render करते हैं
    और सब इसे कागज़ के invention के बाद सबसे महान चीज़ की तरह लेकर excited हैं। मज़ेदार media-industry forum नहीं, HN पर यह trend दिखना दिलचस्प समय की निशानी है
  • समझ नहीं आता कि https://socialsharepreview.com/ या https://www.opengraph.xyz/, https://socialmediasharepreview.com/ के बजाय यह tool क्यों इस्तेमाल करूं
    feedback के तौर पर, HTTPS के बिना URL पर fail होना awkward है। कोई भी site input करने पर इसे इतना smart होना चाहिए कि खुद URL पर जाए और final resolved URL के आधार पर scan करे। उदाहरण के लिए "blizzard.com" input करने पर "https://www.blizzard.com/en-us/" load करना चाहिए
    Discord और WhatsApp दिखना अच्छा है, लेकिन LinkedIn, Pinterest का क्या, और Slack कैसा होगा यह जानना चाहूंगा। Slack शायद Discord जैसा ही होना चाहिए
    यह यह भी नहीं बताता कि क्या ठीक करना है। socialsharepreview.com यह कैसे करता है, देखना अच्छा होगा
    https://socialsharepreview.com/?url=https%3A%2F%2Fnews.ycomb...
    https://i.imgur.com/LDXNYYR.png

कंटेंट सही तरह से expand हो, इसके लिए क्या ठीक करना चाहिए—ऐसे कई उपयोगी tips देता है। ऐसे tools पसंद करने वाले marketing वालों के लिए यह वाकई उपयोगी है। हर site का format और character limit अलग होता है, इसलिए सुधारने वाली जानकारी share करना अच्छा है। उदाहरण के लिए Twitter cards और Open Graph metadata के बीच का अंतर। मैंने check नहीं किया है, लेकिन अच्छा होगा अगर यह भी guarantee करे कि हर site के हिसाब से metadata ठीक से पढ़ा जा रहा है

  • पहले से ही https://socialmediasharepreview.com/ जैसे free preview tools इस समस्या को solve कर रहे हैं, इसलिए बात पूरी तरह समझ नहीं आती
    इसका एकमात्र explanation यही है कि यह पूरा stack kit बेचने के लिए free tool वाला bait है
  • काफी बढ़िया है। हालांकि इसे हर महीने up-to-date रखने के लिए तैयार रहना होगा, वरना यह जल्दी बेकार हो जाएगा
    ऐसे tool की कमियों में से एक यह है कि URL online accessible होना चाहिए, इसलिए अगर कोई समस्या आती है तो iterative improvement cycle काफी लंबा हो जाता है
    Polypane [1] में हमने social media preview बनाया है जो local URLs के साथ भी काम करता है, और जिस URL को social media दिखाएगा उसे override करने की सुविधा भी दी है। हमने X/Twitter, Facebook, Slack, LinkedIn, Discord, Mastodon, Discord, Google Search, Bluesky, Mastodon, Threads previews बनाए हैं और उन्हें अक्सर maintain करते हैं। हर एक के light mode और dark mode designs भी हैं, इसलिए आप वाकई सब test कर सकते हैं। यह missing और incompatible चीज़ें भी बताता है। यहां देख सकते हैं: https://polypane.app/social-media-previews/
    [1] https://polypane.app/
    • जब HN के लोग helpful advice की तरह package करके अपना product ad डालते हैं, तो मुझे अच्छा नहीं लगता
  • LinkedIn और Mastodon missing हैं। साफ-सुथरा tool है। अगर page में कुछ missing हो, तो क्या करना चाहिए—ऐसे improvement guidance text हों तो मदद मिलेगी
    • मेरा भी बिल्कुल यही ख्याल है। और पता नहीं क्यों, LinkedIn हमारी pages को पूरी तरह गलत image के साथ दिखाता है
      अगर कोई पता लगा सके तो बताएं। godotengine.org site से कोई भी blog post लेकर LinkedIn में paste करें, तो post thumbnail की जगह author image pull होती दिखेगी। इसे solve नहीं कर पाया
    • आज रात LinkedIn, Telegram और कुछ और चीज़ें जोड़ दूंगा