Araç ne yapar?
Bir sayfa sosyal ağlarda veya mesajlaşma uygulamalarında paylaşıldığında önizlemede görünen resim, çoğunlukla og:image etiketiyle gösterilen dosyadır. Bu araç o dosyayı hazırlamanın hızlı bir yolunu sunar: üç şablondan birini seçer, başlık, alt metin ve marka satırını yazar, arka planı düz renk, geçiş veya kendi fotoğrafınız olarak belirlersiniz.
Önizleme yazdıkça güncellenir. Araç yazı boyutunu metnin uzunluğuna göre küçültür, güvenli alan çizgilerini gösterir ve yazı ile arka plan arasındaki kontrast düşükse uyarır. Blog yazarları, küçük işletmeler ve her yazı için tasarım programı açmak istemeyen geliştiriciler için tasarlandı.
Nasıl kullanılır?
- Başlığı yazın. Satırı kendiniz bölmek isterseniz Enter tuşuyla yeni satır ekleyebilirsiniz.
- İsterseniz alt metni ve marka satırını, örneğin alan adınızı, ekleyin.
- Şablonu, boyutu (1200×630 veya kare 1080×1080) ve başlık fontunu seçin.
- Arka plan türünü ve renkleri belirleyin. Fotoğraf seçtiğinizde üstüne okunabilirlik için ayarlanabilir bir renk katmanı eklenir.
- Gerekirse PNG, JPEG veya WebP biçiminde bir logo yükleyin; şeffaf alanlar korunur.
- Uyarıları okuyun, biçimi seçin ve görseli indirin.
Görseli sayfaya bağlamak için etiketleri meta etiket oluşturucu ile hazırlayabilir, başlığın arama sonuçlarındaki görünümünü SERP önizleme aracıyla kontrol edebilirsiniz.
1200×630 çalışma alanı
Canvas’ın çizim yüzeyi her zaman seçilen boyuttadır: 1200×630 veya 1080×1080 piksel. Ekrandaki önizleme CSS ile küçültülse de indirilen dosya bu ölçülerden sapmaz. 1200×630 oranı yaklaşık 1,91:1’dir ve birçok platformun yatay bağlantı kartı için önerdiği ölçüye denk gelir.
Kenarlardan 60 piksel içeride sarı kesikli bir güvenli alan çizgisi görünür; metin bu alanın dışına taşarsa araç uyarır. Yatay görselde ortadaki mavi kare, görseli kareye kırpan önizlemelerde hangi bölümün kalabileceğini gösterir. Çizgiler yalnızca ekranda görünür, indirilen dosyaya eklenmez.
Türkçe font ve satır kırma
Araç yeni bir font indirmez; sitede zaten bulunan Manrope ve Archivo Black dosyalarını kullanır. Çizimden önce document.fonts.load() ile gerekli font dosyalarının yüklenmesini ve document.fonts.ready sonucunu bekler. Font yüklenemezse yedek fontla sessizce farklı bir görsel üretmek yerine indirmeyi kapatır, açıklama ve yeniden deneme düğmesi gösterir.
Satırlar karakter sayısına göre değil, measureText() ile ölçülen gerçek piksel genişliğine göre kırılır. Başlık sığmıyorsa yazı boyutu adım adım küçülür; en küçük boyutta da sığmazsa taşma uyarısı verilir ve PNG/JPEG indirme kapanır. Taşan metni kırpılmış hâliyle indirmek ancak ayrı bir onay kutusuyla mümkündür. Tek bir sözcük satırdan uzunsa grafem sınırından bölünür; İ, ğ gibi harfler ve emoji dizileri ortadan ayrılmaz.
PNG dışa aktarımı
PNG kayıpsızdır ve düz renkli, yazı ağırlıklı görsellerde keskin kenarlar verir. Fotoğraflı arka planlarda JPEG çoğu zaman daha küçük dosya üretir; araç JPEG’i 0,92 kalite ile kaydeder. Dosya adı başlıktan Türkçe kurallarla üretilen bir slug’dır, örneğin og-isikli-sehir-rehberi.png.
Yüklenen resim ve logo, piksel olarak Canvas’a yeniden çizilir; çıktı yeni bir dosyadır. Bu sayede fotoğrafın EXIF gibi gömülü bilgileri indirilen görsele taşınmaz. Şeffaf logo, önce çizilen opak arka planın üzerine alfa kanalıyla birleştirilir.
Örnek ve yorum
Örnek yükle düğmesi Işıklı Şehirler: İstanbul’da Gece Fotoğrafçılığı Rehberi başlığını, iki satırlık bir alt metni ve yemre.com.tr marka satırını getirir. Sol hizalı şablonda başlık 1200 piksel genişlikte iki satıra kırılır, alt metin daha küçük Manrope ile altına yerleşir.
| Durum | Araç ne yapar? |
|---|---|
| Başlık 140 karakteri aşar | Hata verir, indirme kapanır |
| Beyaz yazı, açık sarı arka plan | Kontrast oranını gösterir ve uyarır |
| Uzun tek sözcük | Grafem sınırından böler ve bildirir |
| 20 megapiksel fotoğraf | Çözmeden önce dosya başlığından reddeder |
Kontrast uyarısı WCAG oranına dayanır ve 4,5:1’in altını işaretler. Bu bir öneridir; küçük önizlemelerde okunurluğu artırmak için oranı yükseltmeniz faydalı olur.
Sınırlar ve gizlilik
- Başlık en fazla 140, alt metin 240, marka satırı 60 karakterdir.
- Resim ve logo PNG, JPEG veya WebP olmalı, en fazla 5 MiB ve 16 megapiksel olabilir. SVG yükleme ve internetten görsel çekme bu sürümde yok.
- Dosyalar tarayıcınızda okunur, sunucuya gönderilmez. Paylaşım bağlantısı yalnız metin ve renk ayarlarını taşır; resimler bağlantıya eklenmez.
- Araç görseli siteye yüklemez ve
og:imageetiketini kurmaz. Her platformun görseli kırpmadan göstereceği garanti edilmez.
Sık sorulan sorular
OG görseli hangi boyutta olmalı?
Yatay bağlantı kartları için yaygın ölçü 1200×630 pikseldir. Kare kırpma yapan yerler için 1080×1080 seçeneği de vardır. Kesin kurallar platformdan platforma değişebilir.
Türkçe harfler neden bazen eksik görünür?
Bazı araçlar font yüklenmeden çizim yapar ve yedek fonta düşer. Bu araç fontların yüklenmesini bekler, yüklenmezse indirmeyi kapatır.
Yüklediğim fotoğraf bir yere gönderiliyor mu?
Hayır. Dosya tarayıcıda okunur ve Canvas’a çizilir. Sayfayı kapattığınızda seçiminiz kaybolur.
PNG mi JPEG mi seçmeliyim?
Düz renk ve yazı ağırlıklı görsellerde PNG daha keskindir. Fotoğraflı arka planda JPEG genellikle daha küçük dosya verir.
Görseli sayfama nasıl eklerim?
Dosyayı sitenize yükleyin ve adresini og:image etiketine yazın. Etiketleri meta etiket oluşturucu ile hazırlayabilirsiniz.