E-ticaret teması nasıl seçilir? Hız, mobil uyum, erişilebilirlik ve SEO kontrol listesi

E-ticaret teması seçerken çoğu kişi önce vitrine bakar. Renkler uyumlu mu, ana sayfa etkileyici mi, slayt akıcı mı? Oysa müşteriniz temayı görmez, yaşar. Sayfa ne kadar çabuk açılıyor, düğme parmağa uyuyor mu, beden seçimi karışıyor mu, ödeme adımı bir yerde takılıyor mu?

Biz e-ticaret mağazalarını kuruyor ve yönetiyoruz. E-ticaret teması kararı, ilk yol haritası görüşmesinde netleşen maddelerden biridir; çünkü sonradan değiştirmek, ürün sayfalarını ve ödeme adımını baştan sınamak demektir. Bu yazıda e-ticaret teması seçerken bakılacak yedi alanı anlatıyoruz: hız, mobil uyum, erişilebilirlik, SEO altyapısı, ödeme adımı, ürün sayfası ve özelleştirme sınırları; her alanda neyin ölçülebildiğini, hangi sayının hedef sayıldığını ve satın almadan önce demoda nasıl sınanacağını adım adım gösteriyoruz. Marka önermiyoruz, fiyat da yazmıyoruz.

E-ticaret teması neyi belirler, neyi belirlemez

E-ticaret teması, mağazanızın görünüşünü ve sayfa şablonlarını belirleyen pakettir. Ana sayfanın, kategori listesinin, ürün sayfasının, sepetin ve ödeme ekranının düzeni ona aittir. Ürünlerin saklandığı altyapıyı, ödeme sağlayıcısını ve sunucuyu belirlemez.

Bu ayrım önemli. Yavaş açılan bir mağaza hem temadan hem sunucudan kaynaklanabilir. Sunucu tarafını hosting nedir yazımızda anlattık. Burada tema tarafına bakıyoruz.

Bir de demo meselesi var. Demolar çoğunlukla vitrin için hazırlanmış içerikle gelir: profesyonel çekilmiş görseller, kısa ürün adları, üç dört seçenek. Sizin mağazanızda ise uzun ürün adları, eksik görseller ve onlarca varyant olacak; demo temanın parlak yüzünü gösterirken sizin kataloğunuz onun en zor sınavını oluşturacak. Kararı demoya göre değil, kendi içeriğinizle yapacağınız sınava göre verin.

Hız: açılış, etkileşim ve düzen kayması

Google'ın web.dev rehberi iyi kullanıcı deneyimi için üç hedef koyar. En büyük içeriğin görünmesi (LCP) 2,5 saniyeyi, etkileşime yanıt süresi (INP) 200 milisaniyeyi, düzen kayması (CLS) 0,1'i aşmamalıdır. Ölçüt, sayfa yüklemelerinin 75. yüzdelik dilimidir ve mobil ile masaüstü ayrı değerlendirilir; bir sayfanın geçmesi için üç hedefin de tutması gerekir, yani ziyaretlerin dörtte üçünde hepsi birlikte sağlanmalıdır, tek bir şanslı ölçüm yetmez. Bu bir ortalama değil.

E-ticaret teması bu üç sayıyı doğrudan etkiler. Nasıl, tek tek görelim.

• LCP: Ana sayfa vitrininde ve ürün sayfasında en büyük öğe çoğunlukla bir görseldir. web.dev, LCP görselinin asla tembel yüklenmemesini söyler; çünkü tarayıcı tembel görseli ancak düzen hesaplandıktan sonra yüklemeye başlar. Tüm görsellere loading="lazy" ekleyen bir e-ticaret teması bu hatayı yapar. Demoda ilk ekrandaki büyük görselin böyle işaretlenip işaretlenmediğine bakın. Ekran dışındaki görsellerde tembel yükleme doğru araçtır.
• CLS: Görsel ve video öğelerine width ve height verilmeli ya da CSS aspect-ratio ile yer ayrılmalıdır. Kategori kartlarında bu yoksa liste yüklenirken sayfa aşağı kayar ve müşteri düğmeye basmak üzereyken düğme yer değiştirir, bu da yanlış ürüne tıklamayla biter. Can sıkıcı.
• INP: web.dev, etkileşim gecikmesinin ana itici gücünün çoğunlukla JavaScript olduğunu yazar. Ana iş parçacığındaki uzun görevler girdiyi bekletir. Slayt, açılır menü, ürün yakınlaştırma, canlı sohbet: her biri kod ekler ve sonradan eklediğiniz her eklenti bu yükü artırır.

İpucu: Ölçümü demo adresinde, mobil ayarla ve yalnızca ana sayfada değil bir ürün sayfasında da yapın. Lighthouse gibi bir araç hangi öğenin kaydığını ve hangi görselin geç yüklendiğini gösterir. Sunucu tarafının maliyet kalemleri için hosting maliyetleri yazısına bakabilirsiniz.

Mobil uyum: küçülen ekran yetmez

Google indeksleme ve sıralama için sitenin mobil sürümünü kullanır; yani mağazanızın asıl sürümü, masaüstü ekranda gösterdiğiniz değil müşterinizin cebindeki sürümdür ve tema seçerken ilk bu sürüme bakmanız gerekir. Wikipedia'nın tanımıyla duyarlı tasarım; akışkan oranlı ızgara, esnek görseller ve CSS medya sorgularıyla cihaza uyumdur. E-ticaret teması seçerken üç şeyi arayın.

Birincisi viewport etiketi. MDN önerilen ayarı width=device-width olarak gösterir. Bu etiket temanın kaynak kodunda bulunmalıdır.

İkincisi görsel boyutu. HTML'in srcset, sizes ve picture araçları cihaza uygun boyutta görsel sunmayı sağlar. Telefona masaüstü boyutunda görsel gönderen bir e-ticaret teması hem yavaşlar hem de müşterinin veri paketini harcar.

Üçüncüsü içerik eşitliği. Google, mobil sürümün masaüstüyle aynı birincil içeriğe, aynı yapılandırılmış veriye ve aynı robots meta etiketlerine sahip olmasını ister. Mobilde farklı bir tasarım kullanabilirsiniz; içeriği sekmeye ya da akordeona koymak da olur. Ama ürün açıklamasını mobilde tamamen kaldıran ya da yalnızca müşteri dokunduğunda yükleyen bir e-ticaret teması bu kuralı bozar, çünkü Google kaydırma, tıklama veya yazma gerektiren içeriği yüklemez ve o açıklama indekse hiç girmeyebilir.

Erişilebilirlik: çoğu rehberin atladığı ölçüt

İncelediğimiz 12 Türkçe tema rehberinde erişilebilirlik ve WCAG kelimeleri hiç geçmiyor. Oysa erişilebilir bir e-ticaret teması yalnızca engelli ziyaretçiler için değil, güneş altında telefon kullanan, tek elle gezinen ya da klavyeyi tercih eden herkes için daha kullanışlıdır.

W3C'nin WCAG 2.2 standardı dört ilke altında 13 yönerge içerir: algılanabilir, işletilebilir, anlaşılabilir ve sağlam; başarı ölçütleri ise A, AA ve AAA düzeylerinde sıralanır ve bir sitenin standarda uygunluğunu bu ölçütler belirler. Tema demosunda beş şeyi denemek için uzman olmanız gerekmez; tarayıcı, klavye ve biraz sabır yeter.

1. Kontrast: Metin ile arka plan arasındaki oran en az 4,5:1 olmalıdır; büyük metinde 3:1 yeter. Açık gri açıklama metni, soluk indirim etiketi ve görselin üstündeki beyaz yazı en sık bozulan yerlerdir.
2. Hedef boyutu: Dokunma ve tıklama hedefleri en az 24 x 24 CSS pikseli olmalıdır. Sepete ekle, miktar artır, pencereyi kapat ve beden seçici düğmeleri bu ölçüye uymalıdır.
3. Klavye: Tüm işlevler klavyeyle kullanılabilmelidir. Tab tuşuyla menüyü, ürün seçeneklerini ve sepeti gezin.
4. Odak göstergesi: Klavye odağı hangi öğedeyse görünür bir gösterge taşımalıdır. Tab'a basınca imleç kayboluyorsa tema bu ölçütü karşılamıyor demektir. Ayrıntı değil, kural.
5. Metin alternatifi ve etiket: Ürün görseline eşdeğer amaçlı bir metin yazılabilmeli, giriş alanlarının etiketi ya da yönergesi bulunmalıdır. Tema alt metin girmenize izin vermiyorsa bu sorunu içerikle çözemezsiniz.

Dikkat: Bu beş kontrol temanın tamamını değerlendirmez, yalnızca demoda görünen kısmını gösterir. Boş alt metin gibi içerik hatalarını yayına almadan önce ayrıca denetleriz.

SEO altyapısı: e-ticaret teması neyi sağlar, neyi sağlamaz

Önce bir sınır. Google, tek bir sayfa deneyimi sinyalinin olmadığını söyler. Çekirdek sıralama sistemleri Core Web Vitals'ı kullanır, ama bu değerlerin iyi çıkması sayfanızın aramada ilk sıraya yerleşeceği anlamına gelmez, çünkü iyi bir sayfa deneyimi bu üç ölçümden fazlasını kapsar. E-ticaret teması SEO'yu tek başına çözmez. Yalnızca zemini hazırlar.

Zemin üç parçadan oluşur. Sırayla.

Ürün işaretlemesi. Google ürün yapılandırılmış verisini ikiye ayırır: doğrudan satın alınamayan sayfalar için ürün parçacıkları, müşterinin satın alabildiği sayfalar için satıcı listeleri. Satıcı listelerinde kargo ve iade politikası gibi ayrıntılar da yer alır. Fiyat, stok durumu ve puanlar arama sonuçlarında görünebilir. Varyant işaretlemesi, Google'ın hangi ürünlerin aynı ana ürünün çeşitleri olduğunu anlamasına yardım eder. Ürün sayfasının kaynak kodunu görüntüleyip Product ve Breadcrumb ifadelerini aratın. Bulamazsanız satıcıya sorun. Google'ın mobil indeksleme belgesi de işaretlemeyi önceliklendirmeniz gerekiyorsa Breadcrumb, Product ve VideoObject ile başlamanızı söyler.

Bağlantı yapısı. URL düzeni çoğunlukla altyapının işidir. Yine de temanın filtre ve sıralama bağlantılarını nasıl ürettiğine bakın. Google, /urun/3243 yerine ürün adını içeren bir adres, ?renk=yesil gibi anahtar=değer biçiminde parametreler ve oturum kimliği gibi geçici parametrelere dahili bağlantı verilmemesini önerir.

Sayfa yapısı. Başlık sırası, kırıntı bağlantıları ve kategori düzeni temada gelir. Bu parçaları nasıl planladığımızı web sitesi tasarımı yazısında anlattık.

Ödeme adımı ve ürün sayfası

Müşteri kararını çoğunlukla bu iki ekranda verir. E-ticaret teması burada hem tasarımı hem de formun arkasındaki kodu sağlar, yani telefonda adres yazarken yaşanan her pürüz doğrudan temanın hanesine yazılır.

Ödeme formu için web.dev şu kontrolleri sayar: her alana label, uygun type ve autocomplete değerleri, kart numarası gibi artırılmayacak sayılar için type="number" yerine type="text" ile inputmode="numeric", konuk ödemesinin varsayılan olması, gönder düğmesinin basıldıktan sonra devre dışı kalması, girişte doğrulama ve adımların net gösterilmesi. Telefonunuzda test siparişi verip adres alanının otomatik dolup dolmadığını görün.

Ürün sayfasında şunlara bakın.

• Varyant seçimi telefonda parmakla rahat yapılıyor mu?
• Fiyat ve stok durumu görsele göre geride kalıyor mu, yoksa ilk ekranda mı?
• Kargo ve iade bilgisi sayfada yer alıyor mu? Google bu bilgileri satıcı listelerinin parçası sayar.
• Görsel galerisi dokunmayla gezilebiliyor, uzun ürün adı taşmadan görünüyor mu?

Sanal POS entegrasyonu çoğunlukla altyapının konusudur; tema yalnızca ekranların düzenini taşır. Kullanacağınız ödeme yöntemlerinin temada nasıl göründüğünü deneme kurulumunda mutlaka görün.

E-ticaret teması özelleştirme sınırları

Hazır e-ticaret teması, hazır bir kalıptır. Kalıbın sınırı, markanızın ihtiyacı büyüdüğünde ortaya çıkar. Sonra ne olur?

WordPress'in geliştirici belgeleri bu konuda iyi bir örnek verir. Alt tema (child theme) yaklaşımında özelleştirmeler üst temadan ayrı tutulur; üst tema güncellenirse değişiklikleriniz kaybolmaz. Aynı belge bir uyarı da yapar: alt temada kapsamlı özelleştirme zamanla yönetim sorunu olabilir ve büyük projelerde temayı çatallamak, yani kendi kopyanız olarak sürdürmek daha uygun düşebilir; ama o noktada güncellemeleri kimin taşıyacağı sorusu doğar. İlke platformdan bağımsızdır. Satın almadan önce üç soruya yazılı cevap alın.

1. Hangi değişiklikleri kod yazmadan yapabilirim: renk, yazı tipi, bölüm sırası, menü?
2. Tema güncellendiğinde yaptığım değişikliklere ne olur?
3. Temayı kim güncelliyor ve geliştirici desteği bırakırsa ne yapacağım?

Üçüncü soru çoğu zaman sorulmaz. Oysa geliştirici temayı bırakırsa güvenlik ve uyumluluk güncellemeleri durabilir ve siz, üzerine yıllarca ürün girdiğiniz bir şablonla baş başa kalırsınız. Hazır araç yetmediğinde ihtiyacınızı biz geliştiriyoruz. Yine de sınırı baştan bilmek, sonradan zorunlu geçiş yapmaktan çok daha kolaydır.

E-ticaret teması satın almadan önce demoda yapılacak test

Aşağıdaki tablo e-ticaret teması için yedi alanı bir arada toplar. Kendi ürünlerinizden birkaçını girerek deneyin.

İpucu: Testi tek e-ticaret temasında değil iki üç adayda aynı ürünlerle yapın. Kıyas, tek tek bakıldığında görünmeyen farkları ve hangi temanın kendi kataloğunuzda sıkıştığını sayılarla gösterir.

E-ticaret teması seçimi bir zevk meselesinden önce bir ölçüm meselesidir. Görünüş önemli. Ama müşterinin sepete ulaşıp ulaşmadığını belirleyen şey saniyeler, piksel ölçüleri ve form alanlarıdır. Mağazanızın ürün sayısına, kullanacağınız ödeme yöntemlerine, büyüme planınıza ve bakım için ayırabileceğiniz zamana bakarak e-ticaret temasını sizinle birlikte planlıyor, seçimden kuruluma ve sonraki güncellemelere kadar yönetimi üstleniyoruz. Hizmet paketlerimiz için fiyatlandırma sayfasına bakabilirsiniz.

Yazar: Blakfy Studio ekibi, web sitesi, reklam ve e-ticaret projelerinde kurulum ve yönetim. Kaynaklar aşağıda listelenmiştir.

Kaynaklar

• web.dev, Web Vitals
• web.dev, Optimize Largest Contentful Paint
• web.dev, Optimize Cumulative Layout Shift
• web.dev, Interaction to Next Paint (INP)
• web.dev, Payment and address form best practices
• Google Search Central, Core Web Vitals ve Google arama sonuçları
• Google Search Central, Sayfa deneyimi
• Google Search Central, Mobil site ve mobil öncelikli dizine ekleme
• Google Search Central, Ürün yapılandırılmış verisi
• Google Search Central, E-ticaret siteleri için URL yapısı
• W3C WAI, WCAG 2 Overview
• W3C, Web Content Accessibility Guidelines 2.2
• W3C WAI, Contrast (Minimum)
• W3C WAI, Target Size (Minimum)
• W3C WAI, Keyboard
• W3C WAI, Focus Visible
• W3C WAI, Non-text Content
• W3C WAI, Labels or Instructions
• MDN, Viewport meta etiketi
• MDN, Responsive images
• MDN, Lazy loading
• MDN, autocomplete özniteliği
• Wikipedia, Responsive web design
• WordPress Developer Resources, Child Themes