Bir portfolio sitesinde görsel hem işin kendisidir hem de sayfanın en ağır kaynağı olabilir. Yanlış hazırlanan tek bir kapak mobil ziyaretçiye gereksiz megabaytlar gönderebilir; belirsiz dosya adı ve yetersiz bağlam ise arama motorunun görselin ne anlattığını anlamasını zorlaştırabilir. İyi görsel SEO, dosya adına anahtar kelime eklemekten ibaret değildir. Kaynağın keşfedilmesi, doğru ölçekte sunulması, erişilebilir biçimde açıklanması ve ilgili metinle aynı bağlamda yer alması birlikte çalışır.
Tek master dosyayı her ekrana göndermemek
1600 piksel genişliğinde bir kapak arşiv için mantıklı olabilir; fakat 360 piksel genişliğindeki telefonda aynı dosyayı indirmek çoğu zaman gereksizdir. HTML içindeki srcset ve sizes bilgileri, tarayıcının ekrana ve piksel yoğunluğuna uygun kaynağı seçmesine yardımcı olur. Google da responsive görseller için picture veya srcset kullanılabileceğini, bunun yanında img öğesinde bir src geri dönüşünün bulunmasını önerir.
Her breakpoint için rastgele yeni kırpım üretmek yerine tasarım sistemi içinde birkaç gerçek kullanım genişliği belirlenebilir: küçük liste kartı, standart grid kartı ve geniş detay kapağı gibi. Görsel bileşeni bu rollere göre kaynak üretir. Böylece CMS editörü hangi teknik dosyayı seçmesi gerektiğini düşünmez; içeriğin görsel odağına karar verir.
Format seçimini içerik türüne bağlamak
WebP ve AVIF fotoğraf benzeri kapaklarda yüksek sıkıştırma sağlayabilir. Düz renkli küçük ikonlarda SVG veya optimize PNG daha doğru olabilir. Format tercihi yalnızca “en yeni olan” üzerinden yapılmamalıdır; görsel kalite, şeffaflık, tarayıcı desteği ve işlem maliyeti birlikte değerlendirilmelidir.
Kalite ayarı masaüstünde yüzde 100 zoom ile değil, kartın gerçek kullanım boyutunda incelenmelidir. Tipografi veya ince çizgi içeren kapaklarda aşırı sıkıştırma kenarları bozabilir. Aynı zamanda kaynak dosyayı doğrudan yüklemek de çözüm değildir. Otomatik pipeline, maksimum genişlik ve kalite sınırı uygulamalı; üretilen dosyanın gerçek byte bilgisini kaydetmelidir.
Alt metin görselin görevini anlatmalı
Google, alt metni sayfa bağlamı ve görüntü analiz sistemleriyle birlikte kullanır. Alt metin aynı zamanda görseli göremeyen kullanıcı için içerik sağlar. Bu nedenle “web tasarım web tasarım ajansı profesyonel web tasarım” gibi anahtar kelime dizileri hem erişilebilirliği bozar hem spam görünümü yaratır.
Bir proje kapağı için “Otomotiv servis teklif akışının masaüstü ve mobil arayüz ekranları” gibi kısa ve bağlamsal bir açıklama yeterlidir. Başlığın aynısını tekrar etmek yerine görselde görülen ve yazının anlaşılması için önemli olan unsur söylenir. Tamamen dekoratif şekiller boş alt metinle sunulabilir. Bir görsel bağlantı olarak kullanılıyorsa bağlantının amacını da anlaşılır kılmak gerekir.
Dosya adı hafif bir ipucudur, ana strateji değildir
Kısa ve açıklayıcı dosya adı bakım kolaylığı sağlar. rastgele-123.jpg yerine mobil-bankacilik-dashboard-kapak.webp daha anlaşılırdır. Ancak dosya adına onlarca sorgu eklemek veya aynı görseli farklı anahtar kelimelerle kopyalamak değer üretmez. Aynı görsel birden fazla sayfada kullanılıyorsa tutarlı URL, önbelleğin verimli çalışmasına da yardımcı olabilir.
Görsel, ilgili başlık ve açıklamanın yakınında bulunmalıdır. Arama sistemi yalnız dosyayı değil çevresindeki metni de değerlendirir. Proje detayında problem, rol ve çözüm anlatılmadığında kusursuz dosya adı görselin bağlam açığını kapatamaz.
İlk ekran ve galeri aynı önceliğe sahip değildir
İlk görülen önemli kapak, tarayıcının erken keşfedebileceği HTML içinde yer almalı ve gereken durumda yüksek yükleme önceliği almalıdır. Ekranın çok altında kalan galeri görselleri tembel yüklenebilir. Bütün görselleri yüksek öncelikle çağırmak kritik kaynağın bant genişliğini paylaşmasına neden olur; her şeyi lazy yapmak ise ilk ekranı geciktirebilir.
Next.js Image bileşeni genişlik, yükseklik, fill ve sizes gibi bilgilerle responsive kaynak üretimini kolaylaştırır. Fakat bileşen tek başına doğru karar vermez. Fill kullanılan bir grid kartında sizes tanımlanmazsa tarayıcı ihtiyacından büyük kaynak seçebilir. Tasarımın gerçek kolon genişliği geliştiriciye açık biçimde iletilmelidir.
Kırpma odağını CMS verisine dönüştürmek
Aynı görsel 16:9 kartta, kare sosyal paylaşımda ve geniş hero alanında kullanılacaksa merkezden otomatik kırpım her zaman doğru değildir. Projenin ana nesnesi kenarda kalabilir veya metinli mockup kesilebilir. CMS içinde focal point veya önceden tanımlı varyant seçimi, editörün odağı kontrol etmesini sağlar.
Bu alan erişilebilir alt metinden ayrıdır. Focal point görsel sunumu, alt metin ise anlamı yönetir. İkisini tek bir metin alanına sıkıştırmak editör deneyimini karmaşıklaştırır ve veriyi yeniden kullanmayı zorlaştırır.
Yayın öncesi görsel kontrol listesi
Her kapak için gerçek dosya ölçüsü, doğal genişlik-yükseklik, format, alt metin ve odak noktası doğrulanmalıdır. Mobil ağ yavaşlatılarak ilk ekran kontrol edilir; büyük ekranda aşırı bulanıklık aranır. Görsel yüklendiğinde sayfa kaymamalı, hata durumunda yerleşim bozulmamalıdır. Google'ın standart img öğelerini keşfedebildiği, CSS background görsellerini aynı şekilde indekslemediği unutulmamalıdır.
İyi sistem tasarımcıyı dosya teknikleriyle yormaz. Editör doğru görseli, anlamlı açıklamayı ve odağı girer; pipeline varyantları üretir, bileşen bağlama uygun kaynağı seçer. Sonuç hem daha hızlı portfolio hem daha anlaşılır görsel arama varlığıdır.
Görsel formatı, boyutlandırma ve alt metin; hem sayfa hızını hem görsel aramadaki görünürlüğü aynı anda belirliyor. SEO çalışmalarımda görsel SEO'yu performans ve erişilebilirlikle birlikte ele alıyorum.
