OG Görüntü Oluşturucu — Sosyal Paylaşım Görüntü Oluşturucu

Açık Grafik görseli, bir sohbete, tweet'e veya Slack kanalına bir bağlantı yapıştırıldığında ortaya çıkan resimdir ve bunu oluşturan her platform, Facebook'un og:image ve Twitter'ın Summary_large_image kartlarının boyutlarına göre yaklaşık 1200×630 piksel boyutunda bir tuval bekler. Boyutu yanlış seçerseniz görüntü kırpılmış, bulanık veya sıkıştırılmış olarak çıkar; düzeni yanlış yaparsanız başlık, yoğun bir fotoğrafın önünde okunaksız bir şerit gibi görünür. Bu araç, Canvas 2D API'sini kullanarak görüntüyü gerçek hedef çözünürlükte oluşturur; böylece önizlemede gördüğünüz, PNG'de gönderilen tam piksel ızgarasıdır.

Bir arka plan seçin - düz bir renk, seçtiğiniz iki renkten oluşan iki duraklı doğrusal bir degrade veya orantısız bir şekilde uzatılmak yerine CSS arka plan boyutu: kapağının yaptığı gibi 1200x630 çerçevenin tamamını dolduracak şekilde kırpılan yüklenmiş bir fotoğraf. Bir başlık ve isteğe bağlı bir alt başlık yazın: her ikisi de tuvalin kendi yazı tipi ölçümlerine göre karakter karakter ölçülür; dolayısıyla bir satıra sığmayacak kadar uzun olan bir başlık, kenardan taşmak veya görünmez şekilde kesilmek yerine gerçek bir sözcük sınırında ikinci veya üçüncü satıra sarılır. Ortaya veya sola hizalamayı seçin, arka planınıza göre okunacak bir metin rengi seçin ve köşeye sabit, okunabilir boyutta isteğe bağlı bir logo bırakın.

Tuvalin altında, dört küçük kart, gerçek bir platform onu kendi kromuyla sardığında bitmiş görüntünün nasıl görüneceğini yaklaşık olarak gösteriyor: Twitter/X'in kartı, açıklama satırı olmadan yalnızca etki alanını ve görüntünün altında kalın bir başlığı gösteriyor; Facebook, başlık ve açıklama bloğunun üzerine büyük harfli bir alan adı şeridi ekliyor; LinkedIn, alanı hiçbir açıklama olmadan başlığın altına koyuyor ve Discord'un yerleştirmesi, alanı, başlığı ve açıklamayı kendi karanlık temasında görüntünün üstüne yerleştiriyor. Bunlar, planlama amacıyla tasarlanmış yaklaşıklardır - açıklayıcı olarak etiketlenmiş, sizin yazdığınız bir alan adı satırıyla - gerçek platformların canlı getirmesi veya ekran görüntüsü değildir, çünkü bir bağlantıyı paylaşmak ve her platformun kendi tarayıcısının sayfanızın gerçek og:image ve og:title meta etiketlerini okumasına izin vermek, aslında canlı kartı üreten şeydir.

Her şey tarayıcınızdaki bir HTML tuval öğesinde yerel olarak işlenir: başlık, alt başlık, yüklenen arka plan ve logo hiçbir zaman cihazınızdan ayrılmaz ve dışa aktarılan dosya yalnızca sizin oluşturduklarınızı içeren temiz bir canvas.toBlob() PNG'dir; indirilen görüntüde maket kenarlıkları, sahte tarayıcı çubukları veya platform logoları yer almaz. Dışa aktarılan PNG'yi daha sonra yeniden boyutlandırmanız veya dönüştürmeniz gerekirse, bu sitenin görüntü yeniden boyutlandırma ve görüntü dönüştürme araçları, bunun kaldığı yerden devam eder.