Web sitenizdeki bozuk görseller, ziyaretçi deneyimini olumsuz etkiler ve SEO performansınızı düşürebilir. Neyse ki, Google Chrome ile bu görselleri hızlıca tespit etmek mümkün. Bu rehberde, bozuk görselleri kolayca bulmanın en pratik yollarını sizinle paylaşıyoruz.
Web Sitesinde Bozuk Görselleri Nasıl Bulursunuz?
Elbette, sayfalarda bozuk görselleri fark etmek için gözle kontrol yapabilirsiniz. Genellikle görüntü yerinde boş bir kutu görünür. Ancak çok sayfalı veya içerik açısından yoğun bir siteyi taramak istiyorsanız, Google Chrome üzerinden uygulayabileceğiniz basit bir yöntem zamandan tasarruf etmenizi sağlayabilir.
Chrome Üzerinden Bozuk Görsel Kontrolü Nasıl Yapılır?
- Google Chrome tarayıcınızda üst menüden Yer İşaretleri‘ni seçin.
- Ardından Yer İşareti Yöneticisi’ne gidin ve sağ üstteki üç noktaya tıklayıp Yeni Yer İşareti Ekle seçeneğine tıklayın.
- Yer işaretine anlamlı bir isim verin: örneğin “Bozuk Görsel Kontrolü“
- Aşağıdaki JavaScript kodunu URL kutusuna yapıştırın:
- Ardından, kontrol etmek istediğiniz web sitesine gidin ve oluşturduğunuz yer işaretine tıklayın.
- Sayfada yüklenmeyen görseller kırmızı çerçeveyle vurgulanacak ve tarayıcı konsolunda detayları görünecektir.
javascript:(function() {
const images = document.querySelectorAll('img');
const brokenImageUrls = [];
function isImageBroken(image) {
return image.naturalWidth === 0 || image.naturalHeight === 0 || image.complete === false;
}
images.forEach((img) => {
if (!img.hasAttribute('loading') || img.getAttribute('loading') !== 'lazy') {
if (isImageBroken(img) && img.getAttribute('src')) {
brokenImageUrls.push(img.getAttribute('src'));
}
}
});
if (brokenImageUrls.length > 0) {
alert('Broken Image URLs:\n' + brokenImageUrls.join('\n'));
} else {
alert('No broken images found on this page.');
}
})();
Alternatif: Web Site Denetim Araçları ile Bozuk Görsel Tespiti
Daha kapsamlı bir çözüm arıyorsanız, tüm siteyi tarayabilen bir site denetim aracı kullanmanız daha uygun olabilir. Ben genellikle Website Auditor aracını kullanıyorum. Bu araç, Site Audit bölümünde bozuk görselleri de tespit ediyor.
Görseller Neden Bozulur?
Bozuk görsellere yol açabilecek başlıca etkenler:
Başlıca Nedenler:
- Görselin bulunduğu klasör taşınmış olabilir ve bağlantılar geçersiz hale gelir.
- Görsel başka bir siteye aitse ve o site kapanır ya da yapısı değişirse, görsel yüklenemez.
- Optimize edilmemiş ve büyük boyutlu bir görsel, yavaş bağlantılarda hiç yüklenmeyebilir.
- Tarayıcı kaynaklı bir hata nedeniyle görsel gösterilemiyor olabilir.
- Görsel dosyası bozulmuş olabilir.
Daha Az Bilinen Nedenler:
- Örneğin, Rapidweaver kullanırken bazı görsellerin projeden silindiğini fark ettim. Stacks 4 kullanırken bu sorun birkaç kez başıma geldi ancak geliştirici hatayı fark ettikten sonra Stacks 5 ile bu problem ortadan kalktı.
- Geçmişe ait bir blog gönderisinde bir görselin aniden kaybolduğunu fark ettim. Çözüm olarak, o gönderiyi sıfırdan yeniden oluşturmam gerekti. Aynı sitedeki diğer içerikler ise etkilenmemişti.
Diğer Olası Nedenler:
- Sunucu düzeyinde dosya izinleri değişmiş olabilir. Bu yüzden, bozuk görseller fark ederseniz, dosya izinlerini kontrol etmek faydalı olur.
- Tarayıcı ayarları, görsellerin yüklenmesini engelliyor olabilir. Farklı tarayıcılarda siteyi test ederek karşılaştırma yapabilirsiniz.
Bu yöntemlerle hem tekil sayfalarda hem de tüm sitede bozuk görsellerin tespiti oldukça kolaylaşır. Daha fazla teknik SEO kontrolü veya görsel optimizasyon önerisi istersen, memnuniyetle yardımcı olurum.
