Derslerde “panel” dediğimiz yer, Dijenta SEO hesabınızın ekranlarıdır; “denetimimiz” sitenizi tarayan kontrollerimizdir.
Alt metni (alternatif metin)
Alt metni, görselin ne gösterdiğini anlatan kısa yazıdır (<img alt="...">). Görsel açılmadığında onun yerinde görünür, ekran okuyucular görme engelli ziyaretçilere bunu okur ve Google da görselin konusunu anlamak için ona bakar.
İyi bir alt metni görseli bir cümleyle anlatır: "kahverengi deri kadın botu, yandan görünüm" gibi. "resim1", "ürün" ya da virgülle dizilmiş kelime listeleri yazmayın; yalnız süs amaçlı görsellerde alt="" (boş) bırakabilirsiniz.
Dosya adı da ipucu verir: IMG_4821.jpg yerine kahverengi-deri-bot.jpg gibi açıklayıcı adlar kullanın. Aranmasını istediğiniz görselleri <img> etiketiyle ekleyin; Google, CSS ile arka plan olarak verilen görselleri dizine eklemez.
Dosya boyutu ve biçim
Büyük görseller sayfayı, özellikle telefonda yavaşlatır; denetimimiz 300 KB'tan büyük görselleri işaretler.
Görseli sayfada gösterildiği boyuta küçültün: 800 piksel genişliğinde gösterilecek bir fotoğrafı 4000 piksel genişliğinde yüklemeyin. Sonra WebP ya da AVIF gibi yeni nesil bir biçime çevirin; bu biçimler aynı görüntüyü genellikle JPEG ve PNG'den daha küçük dosyayla verir.
WordPress'te görsel sıkıştırma eklentileri bu işi büyük ölçüde üstlenir; Shopify görselleri kendisi uygun biçimde sunar. Yine de çok büyük fotoğrafları yüklemeden önce küçültmek en sağlam yoldur.
Genişlik ve yükseklik
Görsel etiketinde width ve height değerleri yoksa tarayıcı görselin yerini önceden ayıramaz; görsel yüklenince altındaki metin aşağı kayar. Google bu kaymayı CLS (sayfa kayması) değeriyle ölçer.
Çözüm, <img> etiketlerine görselin gerçek oranında width ve height yazmaktır (örneğin width="800" height="600"). Tasarımda görsel esnek boyutlu olsa bile tarayıcı oranı bu değerlerden hesaplar.
Tembel yükleme ve açılmayan görseller
Sayfanın aşağısındaki görsellere loading="lazy" (tembel yükleme) ekleyerek ziyaretçi o bölüme gelene kadar yüklenmemelerini sağlayabilirsiniz. Sayfanın en üstündeki büyük görseli ise tembel yüklemeyin; ilk ekranın görünmesini geciktirir.
Denetimimiz açılmayan görselleri de listeler. Ziyaretçi bu görsellerin yerinde boş bir kutu görür; dosyayı yeniden yükleyin ya da sayfadan kaldırın.
Bugün yapabilecekleriniz
- Sorunlar sayfasında "Görsellerde alternatif metin (alt) eksik" sorununu açın ve etkilenen sayfalardaki ürün görsellerinden başlayın.
- En çok ziyaret alan sayfanızdaki en büyük görseli gösterildiği boyuta küçültüp WebP'ye çevirin.
- Temanızın görsel etiketlerine width ve height değerlerini eklediğini kontrol edin.
- Açılmayan görseller varsa dosyaları yeniden yükleyin ya da sayfadan kaldırın.
- Yeni yükleyeceğiniz görselleri açıklayıcı dosya adlarıyla kaydedin.
Bu dersle ilgili kontrollerimiz
Ücretsiz analizimiz ve panelimizdeki denetim bu kontrolleri sitenizde çalıştırır:
- Görsellerde alternatif metin (alt) eksik
- Görsel dosyaları çok büyük
- Görsellerde genişlik/yükseklik yok
- Görsel açılmıyor
- Metinsiz bağlantı