Blogger platformunda başarılı bir blog yönetmek sadece kaliteli içerik üretmekle kalmaz, aynı zamanda görsellerin doğru şekilde optimize edilmesini de gerektirir. Görseller, blog yazılarınızı görsel açıdan zenginleştirirken, yanlış kullanıldığında site hızınızı düşürebilir ve SEO performansınızı olumsuz etkileyebilir. Bu yazıda, Blogger blogunuzda görsel optimizasyonu yaparak hem arama motorlarında üst sıralara çıkmanızı hem de ziyaretçilerinize hızlı bir deneyim sunmanızı sağlayacak pratik yöntemleri paylaşacağım.
Neden Görsel Optimizasyonu Bu Kadar Önemli?
Görseller, blog içeriğinizin vazgeçilmez parçalarıdır ancak optimize edilmediğinde ciddi sorunlara yol açabilir:
Site Hızına Etkisi: Büyük boyutlu görseller, sayfanızın yüklenme süresini önemli ölçüde artırır. Google'ın verilerine göre, sayfa yükleme süresi 1 saniyeden 3 saniyeye çıktığında ziyaretçi kaybetme oranı %32 artmaktadır.
SEO Performansı: Google, site hızını sıralama faktörlerinden biri olarak değerlendirir. Yavaş yüklenen siteler, arama sonuçlarında alt sıralara düşebilir. Ayrıca, doğru etiketlenmiş görseller Google Görseller'de görünürlük sağlar.
Kullanıcı Deneyimi: Mobil cihazlardan erişen kullanıcılar için hız çok daha kritiktir. Optimize edilmemiş görseller, mobil veri kullanımını artırır ve kullanıcıların sitenizi terk etmesine neden olur.
Blogger'da Görsel Boyutlandırma ve Sıkıştırma
Doğru Boyutları Seçin
Blogger'a yüklemeden önce görsellerinizi uygun boyutlarda hazırlamanız kritik önem taşır. Blog yazılarınızda kullanacağınız görseller için şu boyutları öneririm:
- Tam genişlik görseller: 1200-1600 piksel genişlik (yüksek çözünürlüklü ekranlar için)
- Orta boyut görseller: 800-1000 piksel genişlik
- Yan sütun görselleri: 300-400 piksel genişlik
Blogger, yüklediğiniz görselleri otomatik olarak farklı boyutlarda saklar, ancak orijinal dosya boyutu büyükse bu yine de performansı etkiler.
Görsel Sıkıştırma Araçları
Kaliteyi koruyarak dosya boyutunu küçültmek için şu araçları kullanabilirsiniz:
TinyPNG/TinyJPG: PNG ve JPEG formatlarında %50-80 arası kayıpsız sıkıştırma sağlar. Kullanımı son derece basittir, görseli sürükleyip bırakmanız yeterlidir.
Squoosh: Google'ın geliştirdiği bu web tabanlı araç, farklı sıkıştırma algoritmaları denemenize olanak tanır. Yan yana karşılaştırma özelliği ile kalite kaybını kontrol edebilirsiniz.
ImageOptim (Mac kullanıcıları için): Toplu işlem yapmanıza olanak tanıyan masaüstü uygulaması, birden fazla görseli aynı anda optimize edebilirsiniz.
Pratik İpucu: Blog yazısı başına ortalama 5-10 görsel kullanıyorsanız, her birinin 100-200 KB arasında olmasını hedefleyin. Büyük görseller maksimum 500 KB'yi geçmemelidir.
SEO Dostu Dosya İsimlendirme
Görselleri Blogger'a yüklemeden önce dosya isimlerini düzenlemeniz SEO açısından büyük fark yaratır.
Yapılması Gerekenler
Açıklayıcı kelimeler kullanın: "IMG_1234.jpg" yerine "blogger-gorsel-optimizasyonu-rehberi.jpg" gibi anlamlı isimler tercih edin.
Tire işareti kullanın: Kelimeleri ayırmak için tire (-) kullanın. Alt çizgi (_) veya boşluk karakteri kullanmayın.
Türkçe karakter kullanmayın: "görsel" yerine "gorsel", "içerik" yerine "icerik" yazın. Arama motorları Türkçe karakterlerde sorun yaşayabilir.
Kısa ve öz tutun: Dosya adını 3-5 kelime ile sınırlayın. Anahtar kelimenizi mutlaka ekleyin.
Örnek Dosya İsimlendirme
❌ Yanlış: DSC_0892.jpg, resim1.png, image-final-son.jpg ✅ Doğru: blogger-seo-ipuclari.jpg, site-hizi-optimizasyon.png, mobil-uyumlu-tasarim.jpg
Alt Etiketleri (Alt Text) Optimizasyonu
Alt etiketleri, hem görme engelli kullanıcılar için hem de arama motorları için kritik öneme sahiptir.
Alt Etiketi Nasıl Yazılır?
Blogger'da görsel eklerken "Özellikler" bölümünden "Alt metni" alanını bulabilirsiniz. İyi bir alt etiketi şu özelliklere sahip olmalıdır:
Görseli açıklayıcı: Görselde ne olduğunu net bir şekilde anlatın. "Blogger kontrol panelinde görsel ayarları menüsü" gibi.
Anahtar kelime içeren: Zorlama olmadan, doğal bir şekilde hedef anahtar kelimenizi ekleyin.
125 karakteri geçmeyen: Kısa ve öz açıklamalar tercih edin. Google, uzun alt etiketlerini kesebilir.
Spam içermeyen: Anahtar kelimeleri art arda sıralamayın. Doğal bir cümle kurun.
Örnekler
Örnek 1: Bir blog yazısında WordPress SEO eklentisi ekran görüntüsü kullanıyorsanız:
- Alt etiketi: "Yoast SEO eklentisi ayarlar sayfası"
Örnek 2: Sosyal medya paylaşım butonları görseli için:
- Alt etiketi: "Blog yazısı altında Facebook ve Twitter paylaşım butonları"
Dekoratif görseller için: Arka plan görselleri veya tamamen dekoratif elementler için alt etiketi boş bırakabilirsiniz.
Blogger'da Görsel Formatı Seçimi
Farklı görsel formatları, farklı kullanım senaryoları için uygundur.
JPEG (JPG)
Ne zaman kullanmalı: Fotoğraflar ve karmaşık renkli görseller için ideal.
Avantajları: Yüksek sıkıştırma oranı, küçük dosya boyutu, tüm tarayıcılar tarafından desteklenir.
Dezavantajları: Şeffaflık desteklenmez, her sıkıştırmada kalite kaybı olur.
Blog kullanımı: Yazı başlığı görselleri, ürün fotoğrafları, manzara görselleri için kullanın.
PNG
Ne zaman kullanmalı: Logolar, ikonlar, grafikler ve şeffaflık gerektiren görseller için.
Avantajları: Şeffaflık desteği, kalite kaybı olmadan sıkıştırma, keskin kenarlar.
Dezavantajları: Dosya boyutu JPEG'e göre daha büyük.
Blog kullanımı: Blog logosu, infografikler, ekran görüntüleri, şemalar için kullanın.
WebP
Ne zaman kullanmalı: Modern tarayıcılar için optimizasyon yapıyorsanız.
Avantajları: JPEG'ten %25-35 daha küçük dosya boyutu, hem kayıplı hem kayıpsız sıkıştırma, şeffaflık desteği.
Dezavantajları: Eski tarayıcılarda destek sorunu (ancak günümüzde çoğu tarayıcı destekliyor).
Blog kulanımı: Yüksek kaliteli görselleri küçük boyutta sunmak istediğinizde tercih edin.
Lazy Loading (Tembel Yükleme) Uygulaması
Lazy loading, görsellerin yalnızca kullanıcı sayfayı aşağı kaydırdığında yüklenmesini sağlar. Bu özellik sayfa yüklenme hızını önemli ölçüde artırır.
Blogger'da Lazy Loading Nasıl Aktif Edilir?
Blogger, 2021 yılından itibaren varsayılan olarak lazy loading desteği sunuyor. Ancak tema kodunuzda bu özellik aktif değilse şu adımları izleyin:
- Blogger kontrol panelinden "Tema" bölümüne gidin
- "Özelleştir" yerine yanındaki ok işaretine tıklayıp "HTML'yi düzenle" seçin
<img>etiketlerineloading="lazy"özniteliğini ekleyin
Örnek kod:
<img src="gorsel-url.jpg" alt="Açıklama" loading="lazy" width="800" height="600">Önemli Not: Sayfa başındaki ilk görsel (hero image) için lazy loading kullanmayın, çünkü bu görselin hemen yüklenmesi kullanıcı deneyimi açısından önemlidir.
Blogger Görsel Boyut Parametreleri
Blogger, yüklediğiniz görselleri otomatik olarak Google sunucularında saklar ve farklı boyutlarda sunma imkanı verir. URL'nin sonuna parametreler ekleyerek görseli istediğiniz boyutta çağırabilirsiniz.
Boyut Parametreleri Nasıl Kullanılır?
Blogger'daki bir görsel URL'si genellikle şu formattadır:
https://blogger.googleusercontent.com/img/...../gorsel.jpg
Bu URL'nin sonuna şu parametreleri ekleyebilirsiniz:
=s400- Görseli 400 piksel genişliğinde görüntüler=s800- 800 piksel genişlik=s1600- 1600 piksel genişlik (genellikle maksimum)=w800-h600- Belirli genişlik ve yükseklik
Pratik Kullanım: Mobil cihazlar için küçük, masaüstü için büyük boyut sunarak responsive tasarım oluşturabilirsiniz.
Görsel CDN Kullanımı
Blogger görselleri zaten Google'ın CDN altyapısında barındırıldığı için ekstra bir CDN hizmetine ihtiyaç duymayabilirsiniz. Ancak harici görseller kullanıyorsanız (örneğin hosting'de sakladığınız görseller), CDN kullanımı performansı artırır.
Cloudflare, Bunny CDN veya Imgix gibi hizmetler, görsellerinizi dünya çapında dağıtılmış sunucularda saklar ve ziyaretçinize en yakın sunucudan sunum yapar.
Responsive Görseller için Srcset Kullanımı
Farklı ekran boyutları için farklı görsel boyutları sunmak, mobil cihazlarda gereksiz veri kullanımını önler.
Srcset Nedir?
srcset özniteliği, tarayıcının ekran boyutuna göre uygun görseli seçmesini sağlar.
Örnek kullanım:
<img
src="gorsel-800.jpg"
srcset="gorsel-400.jpg 400w,
gorsel-800.jpg 800w,
gorsel-1200.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1200px) 800px,
1200px"
alt="Blog görsel optimizasyonu"
loading="lazy">Bu kod, mobil cihazlarda 400 piksel, tablet cihazlarda 800 piksel, masaüstünde ise 1200 piksel genişliğinde görseli yükler.
Görsel Sitemap Oluşturma
Blogger otomatik olarak sitemap oluşturur, ancak görsellerinizin Google Görseller'de daha iyi indekslenmesi için sitemap'inizde görsel bilgilerinin yer almasını sağlayabilirsiniz.
Google Search Console'da Kontrol
- Google Search Console'a gidin
- "Sitemap'ler" bölümüne gidin
- Blogger sitemap'inizi ekleyin:
https://blog-adiniz.blogspot.com/sitemap.xml - "Kapsam" bölümünden indekslenen görselleri kontrol edin
Google, alt etiketleri, dosya adlarını ve çevreleyen metni analiz ederek görsellerinizi indeksler.
Mobil Uyumluluk ve Görsel Boyutları
Blogger bloglarının %60-70'i mobil cihazlardan ziyaret edilir. Bu nedenle görsellerin mobil uyumluluğu kritik öneme sahiptir.
Mobil İçin İpuçları
Dikey görseller tercih edin: Mobil ekranlarda dikey formatlar daha iyi görünür. Özellikle Pinterest gibi platformlarda paylaşım yapıyorsanız 2:3 oranı idealdir.
Maksimum genişlik ayarlayın: CSS ile görsellerin ekran genişliğini aşmamasını sağlayın:
img {
max-width: 100%;
height: auto;
}Dokunmatik uyumlu galeriler: Birden fazla görsel kullanıyorsanız, kaydırılabilir galeri yerine alt alta sıralama tercih edin.
Tap (dokunma) alanları: Görsellere tıklanabilir linkler ekliyorsanız, dokunma alanının en az 48x48 piksel olmasına dikkat edin.
Google PageSpeed Insights'ı Kullanma
Blog hızınızı ve görsel optimizasyonunuzu test etmek için Google PageSpeed Insights kullanın.
Test Adımları
- pagespeed.web.dev adresine gidin
- Blog URL'nizi girin
- Hem mobil hem masaüstü skorlarını inceleyin
- "Fırsatlar" bölümünde görsel optimizasyon önerilerini kontrol edin
Hedef skorlar: Mobilde 50+ puan iyi, 80+ mükemmel kabul edilir. Masaüstünde 90+ puana ulaşmayı hedefleyin.
Yaygın Uyarılar ve Çözümleri
"Uygun boyutlu görseller kullanın" uyarısı: Görselleri gerçek boyutlarında yükleyin, tarayıcıda yeniden boyutlandırmayın.
"Yeni nesil format kullanın" uyarısı: WebP formatına geçiş yapın.
"Görünür olmayan içeriği erteleyin" uyarısı: Lazy loading'i aktif edin.
Blogger'da Görsel Ekleme En İyi Pratikleri
Görsel Yerleşimi
Yazı başında bir çarpıcı görsel: İlk 100 kelime içinde mutlaka bir görsel kullanın. Bu, sosyal medya paylaşımlarında da öne çıkan görsel olacaktır.
Alt başlıklar arasında dengeli dağıtım: Her 300-500 kelimede bir görsel ekleyerek okuyucunun dikkatini canlı tutun.
İlgili görseller seçin: Stok fotoğraf yerine, mümkünse kendi ekran görüntülerinizi veya özel grafiklerinizi kullanın.
Telif Hakları ve Kaynak Gösterme
Ücretsiz görsel siteleri:
- Unsplash: Yüksek kaliteli, telif hakkı olmayan fotoğraflar
- Pexels: Çeşitli kategorilerde ücretsiz görseller
- Pixabay: Fotoğraf, vektör ve video içerikler
Önemli: Görseli nereden aldığınızı alt açıklamada belirtmek hem etik hem de SEO açısından faydalıdır.
Sonuç ve Kontrol Listesi
Blogger blogunuzda görsel optimizasyonu yaparak hem SEO performansınızı artırabilir hem de ziyaretçilerinize daha hızlı bir deneyim sunabilirsiniz. İşte uygulama öncesi kontrol listeniz:
✅ Görselleri yüklemeden önce sıkıştırın (TinyPNG, Squoosh) ✅ Dosya adlarını SEO uyumlu şekilde düzenleyin ✅ Her görsele açıklayıcı alt etiketi ekleyin ✅ Uygun format seçin (JPEG fotoğraflar, PNG logolar için) ✅ Lazy loading aktif olduğundan emin olun ✅ Mobil uyumluluğu test edin ✅ PageSpeed Insights ile performans kontrolü yapın ✅ Görselleri responsive hale getirin (srcset kullanımı) ✅ Blogger boyut parametrelerini kullanarak optimal boyut sunun
Bu adımları takip ederek blogunuzun görsel performansını önemli ölçüde iyileştirebilirsiniz. Unutmayın, küçük optimizasyonlar bile toplamda büyük fark yaratır. Her blog yazısında bu pratikleri uygulamaya özen gösterin ve düzenli olarak site hızınızı test edin.
Başarılı bloglar dilerim! 🚀
Sık Sorulan Sorular
S: Blogger'da bir gönderide kaç görsel kullanmalıyım? C: İçerik uzunluğuna bağlı olarak, 1000 kelimelik yazıda 3-5 görsel optimal kabul edilir. Her alt başlıkta en az bir görsel bulunmasına dikkat edin.
S: WebP formatı tüm tarayıcılarda çalışır mı? C: Modern tarayıcıların %95'i WebP'yi destekliyor. Safari 14+, Chrome, Firefox ve Edge'de sorunsuz çalışır.
S: Görsel optimizasyonu yapınca kalite kaybı olur mu? C: Doğru araçları kullandığınızda kalite kaybı minimum seviyede kalır. TinyPNG gibi araçlar kayıpsız sıkıştırma yapar ve fark gözle görülmez.
S: Blogger görselleri nerede saklanır? C: Blogger, görselleri Google'ın sunucularında (googleusercontent.com) otomatik olarak saklar. Bu nedenle yedekleme endişeniz olmamalı.
0 Yorumlar