WordPress Öne Çıkan Görsel Boyutu Ne Olmalı?

Çoğu kişinin aradığı sayı 1200 x 630 piksel. Bu, Facebook, LinkedIn ve X’in bağlantı önizlemelerinde kullandığı orandır (1.91:1) ve bir Open Graph görselinin olması gereken boyuttur. Öne çıkan görseli asıl olarak paylaşılan bağlantılar düzgün görünsün diye ayarlıyorsanız, 1200 x 630 kullanın ve orada durun.

Ama bu sayı, temanızın yazıda gerçekten gösterdiği boyut değil. WordPress öne çıkan görselinizi nadiren orijinal boyutunda gösterir. Tema, kayıtlı belirli bir görsel boyutunu ister ve WordPress bununla eşleşen, önceden oluşturulmuş kırpılmış sürümü sunar. Facebook’ta kusursuz görünen bir görselin, tekil yazı şablonunuzun içinde bulanık, gerilmiş ya da yanlış kırpılmış görünmesinin nedeni budur. “Doğru” boyut, evrensel bir kurala değil, temaya bağlıdır.

Tema neden bu sayıyı geçersiz kılar

Bir görsel yüklediğinizde WordPress tek bir dosya saklamaz. wp_generate_attachment_metadata() fonksiyonunu çalıştırır ve kayıtlı her görsel boyutu için bir türev oluşturur: üç varsayılan (thumbnail, medium, large), blok editörünün medium_large’ı (768px genişliğinde) ve buna ek olarak temanın veya bir eklentinin add_image_size() ile kaydettiği her boyut.

Geniş bir 16:9 hero görseli isteyen bir tema, functions.php içinde şuna benzer bir şey yapar:

add_theme_support( 'post-thumbnails' );
add_image_size( 'hero-featured', 1200, 675, true );

Dördüncü argüman, true, sert kırpma anlamına gelir. WordPress görselinizi tam olarak 1200 x 675’e kırpar ve 16:9 kutusuna sığmayan her şeyi atar. Konu kadrajın üstüne ya da altına yakınsa, kesilir. false olarak ayarlandığında (ya da atlandığında) orantılı olarak ölçeklenir ve nihai boyutlar istediğinizden farklı olabilir.

Sonra şablon hangi boyutun çekileceğine karar verir:

the_post_thumbnail( 'hero-featured' );

the_post_thumbnail() fonksiyonuna hangi ad geçilirse, ekrana gelen kırpma odur. Yani sitenizdeki gerçek öne çıkan görsel boyutu, sizin yazmadığınız iki yerde tanımlanır: temanızdaki add_image_size() çağrısı ve the_post_thumbnail() çağrısı. Daha büyük bir dosya yüklemek bunların hiçbirini değiştirmez.

Bir katman daha var. WordPress bir srcset sunar, dolayısıyla daha küçük ekranlarda tarayıcı tam kırpma yerine medium veya large türevini yükleyebilir. DevTools’ta gördüğünüz boyut çoğu zaman yüklediğiniz boyut değildir.

Nasıl düzeltilir, sırasıyla

1. Temanızın gerçekte ne istediğini öğrenin. Tahmin yürütmeden önce, WordPress’in görselinizden ürettiği her boyutu ve hangisinin kırpılmış hero olduğunu görün. Görselinizi WordPress görsel boyutları aracına bırakın — WP’nin oluşturacağı her türevi tam piksel boyutlarıyla gösterir, böylece kaynağınızı efsanevi 1200x630 yerine gerçek hedefe göre eşleştirebilirsiniz.

2. En büyük kırpmayı karşılayacak kadar büyük yükleyin. Temanın hero’su 1200 x 675 ise, en azından bu kadarını, ideal olarak retina için 2x’ini (2400 x 1350) yükleyin. WordPress temiz bir şekilde küçültür; asla büyütmez. Yetersiz boyutlu bir kaynak, bulanık öne çıkan görselin açık ara en yaygın nedenidir.

3. En-boy oranınızı temanın kırpmasıyla eşleştirin. Tema 16:9’a sert kırpma yapıyorsa, ona 16:9 verin. Konu ortada olacak şekilde kompoze edin ki sert kırpma kimsenin kafasını kesmesin.

4. Kayıtlı boyut yanlışsa, değiştirin ve yeniden oluşturun. add_image_size() değerlerini bir alt temada düzenleyin, ardından mevcut thumbnail’ları yeniden oluşturun — yeni boyutlar, siz şunu yapana kadar yalnızca gelecekteki yüklemelere uygulanır:

wp media regenerate --yes

WP-CLI yok mu? Regenerate Thumbnails eklentisi aynı işi panelden yapar.

Yapılmaması gerekenler

Sadece 1200x630 bir görsel yükleyip halledildiğini varsaymayın. Temanın kayıtlı boyutu 16:9 ise, WordPress 1.91:1 görselinizi sert kırpar ve üstü ile altı kaybolur. Open Graph sayısı ile görüntüleme sayısı farklı işlerdir.

“Orijinali korumak” için WordPress görsel boyutlarını devre dışı bırakmayın. İnsanlar ara boyutları 0 yapmayı ya da the_post_thumbnail’ı devreden çıkarmayı öneren tavsiyeler bulur. O zaman tema, tam boyutlu dosyayı tarayıcıda küçültülmüş halde sunmaya geri döner — bir telefona gönderilen 4000px’lik bir JPEG. Bu, yükleme sürenizi ve Core Web Vitals’ınızı yerle bir eder. Türevler bir nedenle vardır.

Bir eklentinin “önerilen boyutuna”, temanızın gerçek kayıtlı boyutundan daha çok güvenmeyin. SEO eklentileri OG etiketi için 1200x630 önerir, ki bu o etiket için doğrudur. Ama tekil yazı şablonunuzun neye kırptığı hakkında hiçbir şey söylemez.

Boyutları değiştirdikten sonra wp media regenerate adımını atlamayın. add_image_size() düzenlemek, zaten yüklenmiş görsellere hiçbir şey yapmaz. Bu, insanların unuttuğu ve sonra kodun çalışmadığı sonucuna vardığı adımdır.

Hâlâ takıldınız mı?

Boyutları eşleştirip yeniden oluşturduktan sonra görsel hâlâ yanlışsa, sorun genellikle kırpma modu (true ya da false) veya beklediğinizden daha küçük bir türev sunan bir srcset’tir. Dosyayı görsel boyutları aracına bırakın, kurulumunuzun hangi kırpmaları ürettiğini tam olarak görün, sonra bunu tarayıcının DevTools’ta yüklediğiyle karşılaştırın. Bu ikisini eşleştirin, tahmin işi biter.