Linkpreview, sosyal medya ve sohbet uygulamalarında site URL önizlemeleri

• LinkPreview, web sitesi bağlantılarının önizlemesini oluşturan bir projedir.
• Belirli bir URL'nin Google/X/Facebook/Discord/WhatsApp'ta nasıl göründüğünü tek bakışta kontrol edebilirsiniz.
• Diğer ürünlere veya mevcut açık kaynak projelere kıyasla daha basit ve kullanımı daha kolay bir arayüz sunar.

[GN⁺]

Hacker News yorumları

• İyi yapılmış ve kurcalaması keyifli. Her platformun varsayılan arayüzü içinde gösterilmesi detayı özellikle hoşuma gitti
  Ancak platformlara göre meta crawler’lar farklı çalışıyor gibi; iyi bildiğim WhatsApp ve Discord’da önizleme gerçek olanla ikisinde de uyuşmadı
  Bağlantı takip edilirken oluşan yönlendirmeleri de gösterse iyi olurdu; hedef URL’nin sorgu parametresi veya fragment olarak girilebilmesi de gerekir
  https://linkpreview.xyz/#example.com
  https://linkpreview.xyz/#url=https://example.com
  https://linkpreview.xyz/?url=https://example.com
  URL’de veri belirtilemiyorsa sevimli bir web sayfası aracından ibaret kalır; URL ile kontrol edilebildiğinde ise paylaşılabilir, yerel bir web yardımcı aracına dönüşür. Güzel URL’ler değişmediği gibi, web’de URL API’dir
  Tweet’i https://x.com/fayazara/status/1830272619637047359 görünce ekleyeyim: HN’in üst sıralarında görünürlükle birlikte her türlü eleştiriyi de alıyor
• Küçük bir araç olarak harika; ama https:// yazmayı zorunlu kılmak yerine, example.com gibi girildiğinde bunu otomatik eklese iyi olur
  • type="url" olan bir giriş alanı kullanmak da bir yöntem. Mobil klavyede otomatik büyük harfe çevirme ve otomatik düzeltme kapanır gibi
  • Doğru, düzelteceğim. Gerçekten sinir bozucu bir nokta
• Temiz bir araç. Birkaç öneri: Önizlemeyi gösteren servisin user agent dizesiyle meta etiketleri ve görselleri çekse iyi olurdu
  Örneğin Twitter/X, meta etiketleri Twitterbot/1.0 user agent dizesiyle alır. Bazı siteler, görselleri ilgili servisin gösterim biçimine göre optimize etmek için servise özel farklı içerik verebilir
  Ayrıca API, Twitter’a özel meta etiketlere [0] bakmıyor gibi. Tüm önizlemelerde kullanılan tek bir metadata seti döndürüyor. Örneğin https://govukvue.org üzerinde ad ve açıklamanın yanında küçük bir görsel çıkan summary kart biçimi kullanılıyor; bu araç ise summary_large_image gibi render ediyor
  [0] https://developer.x.com/en/docs/x-for-websites/cards/overvie...
  • İyileştirmeye çalışacağım. Aslında bunu yaklaşık 2 saat içinde aceleyle yaptım
• Open Graph’i düzgün işlemiyor gibi. Örneğin head etiketindeki og:image yerine, piksellenmiş favicon’u konteynere uyacak şekilde büyütüp göstermişti
  • Sadece sitede ne varsa onu alıp gösteriyorum. Kontrol edeceğim. Hangi URL ile test ettiğini merak ettim
  • Bunu söylemeye gelmiştim. Favicon kullandığı için tamamen hatalı bir tasvir oluyor
• Genelde https://socialsharepreview.com/ kullanıyorum; benzer araç çok. Bu aracın nasıl farklı ya da daha iyi olduğunu ve mevcut çözümler yerine neden kendin yaptığını merak ediyorum
  • Yukarıdaki araç bazı önizlemelerde bozuluyordu. Birden fazla önizleme görmek için tıklamak gerekiyor ve yavaş. Orijinal gönderideki araç hepsini tek sayfada gösteriyor, daha temiz, daha fazla önizleme var ve stil de yerinde. Oldukça açık nedenler
  • Dün gece canım sıkılmıştı
• Bu aracın ters yönlü olanını yaptım. Belirli bir platformda hangi meta etiketlerin önizlemeyi oluşturduğunu kontrol edebileceğiniz bir sayfa üretiyor
  https://getoutofmyhead.dev/link-preview-tester/
• Standartlara uygun web siteleri yapıp tarayıcıda test ettikten sonra, diğer tarayıcılarda da elbette çalışacağını düşünerek memnun olabileceğim günlerin hâlâ hayalini kuruyorum
  Ama artık sayfamın önizlemesini sayısız kapalı sohbet aracının nasıl render ettiğini elle kontrol etmeye yarayan bir araç var
  Ve herkes sanki kâğıdın icadından beri en iyi şeymiş gibi coşuyor. Eğlenceli bir medya sektörü forumu değil de HN’de böyle bir akım görmek ilginç zamanlar yaşadığımızı gösteriyor
• Neden https://socialsharepreview.com/, https://www.opengraph.xyz/ veya https://socialmediasharepreview.com/ yerine bu aracı kullanmam gerektiğini bilmiyorum
  Geri bildirim olarak: HTTPS’siz URL’lerde başarısız olması garip. Herhangi bir site girildiğinde, URL’ye kendisi gidip nihai çözümlenen URL’ye göre tarama yapacak kadar akıllı olmalı. Örneğin "blizzard.com" girince "https://www.blizzard.com/en-us/" yüklenmeli
  Discord ve WhatsApp’ın görünmesi güzel; ama LinkedIn ve Pinterest ne olacak, Slack nasıl olur merak ediyorum. Slack’in Discord ile aynı olması gerekir gibi
  Neyi düzeltmek gerektiğini de söylemiyor. socialsharepreview.com’un bunu nasıl yaptığına bakmak iyi olur
  https://socialsharepreview.com/?url=https%3A%2F%2Fnews.ycomb...
  https://i.imgur.com/LDXNYYR.png

İçeriğin düzgün şekilde açılması için nelerin düzeltilmesi gerektiğine dair çok sayıda yararlı ipucu sunuyor. Bu tür şeyleri seven pazarlama tarafındaki insanlar için gerçekten kullanışlı. Her sitenin formatı ve karakter sınırı farklı olduğundan, düzeltilecek bilgileri paylaşmak iyi olur. Örneğin Twitter kartları ile Open Graph metaverileri arasındaki fark gibi. Kontrol etmedim ama her siteye uygun metaverileri doğru okuyacağını da garanti etse iyi olur.

• Zaten https://socialmediasharepreview.com/ gibi ücretsiz önizleme araçları bu sorunu çözüyor; pek anlam veremedim.
  Tek açıklama, bunun tüm stack kitini satmak için kullanılan bir ücretsiz araç yemi olması.
• Oldukça hoş. Ancak her ay güncel tutmaya hazır olmak gerekir; yoksa kısa sürede işe yaramaz hale gelir.
  Bu tür araçların dezavantajlarından biri, URL’nin çevrimiçi erişilebilir olması gerekmesi; bu yüzden bir sorun çıktığında yinelemeli iyileştirme döngüsü epey uzuyor.
  Polypane [1] içinde yerel URL’lerle de çalışan sosyal medya önizlemeleri yaptık; ayrıca ilgili sosyal medyanın göstereceği URL’nin üzerine yazılmasına da izin verdik. X/Twitter, Facebook, Slack, LinkedIn, Discord, Mastodon, Discord, Google Search, Bluesky, Mastodon, Threads önizlemeleri yaptık ve bunları sık sık bakımda tutuyoruz. Her birinin açık mod ve koyu mod tasarımları da var; böylece gerçekten hepsini test edebiliyorsunuz. Eksik olanları ve uyumsuzlukları da bildiriyor. Buradan görülebilir: https://polypane.app/social-media-previews/
  [1] https://polypane.app/
  • HN’de insanların kendi ürün reklamlarını faydalı tavsiye gibi paketleyip araya sıkıştırmasından hoşlanmıyorum.
• LinkedIn ve Mastodon eksik. Temiz bir araç. Sayfada bir şey eksikse ne yapılması gerektiğini söyleyen türden iyileştirme yönergeleri olsa faydalı olur.
  • Ben de tam olarak aynı şeyi düşündüm. Ayrıca nedenini bilmiyorum ama LinkedIn sayfalarımızın hepsini yanlış görselle gösteriyor.
    Bunu çözebilecek biri varsa söylese iyi olur. godotengine.org sitesindeki herhangi bir blog yazısını alıp LinkedIn’e yapıştırırsanız, yazı küçük resmi yerine yazar görselinin çekildiğini görebilirsiniz. Çözemedik.
  • Bu gece LinkedIn, Telegram ve birkaç şeyi daha ekleyeceğim.