Kısa cevap: tema editörü görünümü ve yerleşimi değiştirir, sayfanın kaynak kodunda ne yazdığını değiştirmez. SEO tarafındaki pek çok düzeltme ikinci gruba giriyor ve kod düzenlemesi gerektiriyor. Hangisinin hangisi olduğunu bilmek zaman kazandırıyor.
Mağaza sahipleriyle en çok şu noktada takılıyoruz: editörde bir ayar aranıyor, bulunamıyor ve “Shopify bunu yapmıyor” sonucuna varılıyor. Çoğu zaman yapılıyor, sadece editörde değil.
Editör neyi yapar?
Tema editörü bölüm bazlı çalışıyor. Yapabildikleri şunlar:
- Bölümleri ekleme, kaldırma ve sıralarını değiştirme
- Renk, yazı tipi ve boşluk ayarları
- Metin ve görsel içeriğini değiştirme
- Menü yapısını düzenleme
- Mobil ve masaüstü için ayrı görünüm ayarları
- Temanın kendi sunduğu ayarları açıp kapatma
Son madde belirleyici. Editörde görebildiğiniz şey, temayı yazan kişinin ayar olarak sunmayı seçtiği şeydir. Sunmadığı bir ayar editörde yok ve bu Shopify’ın değil temanın sınırı.
Bu yüzden tema seçimi sandığınızdan daha önemli. İyi yazılmış bir tema, editörden pek çok şeyi düzenlenebilir hâlde sunuyor; aceleyle yazılmış bir tema her küçük değişiklik için kod gerektiriyor.
Editör neyi yapmaz?
Kaynak kodda duran ve sayfanın yapısını belirleyen şeyleri yapmıyor.
| İş | Editörde var mı | Nerede yapılır |
|---|---|---|
| Başlık etiketi sırası | Hayır | Tema dosyası |
| Kanonik etiketi | Hayır | theme.liquid |
| Schema işaretlemesi | Genelde hayır | Tema dosyası |
| Kırıntı yolu | Bazı temalarda | Tema dosyası |
| robots.txt kuralları | Hayır | robots.txt.liquid |
| Görsel boyut ve yükleme biçimi | Kısmen | Tema dosyası |
| Koleksiyon metni konumu | Bazı temalarda | Tema dosyası |
| Kullanılmayan uygulama kodu | Hayır | Tema dosyası |
Tablodaki ilk iki satır SEO açısından en kritik olanlar. Başlık sırası bozuksa her sayfanın H1’i yanlış olabiliyor; kanonik bozuksa kopya adresler oluşuyor. İkisi de editörde görünmüyor ve ikisi de sessizce zarar veriyor.
Kod ne zaman gerekiyor?
Şu durumlarda kod düzenlemesi kaçınılmaz oluyor:
Başlık yapısı bozuksa. Logo H1 olarak işaretlenmişse ya da sayfada iki H1 varsa. Düzeltmesi küçük ama editörden yapılmıyor.
Kanonik etiketi yanlışsa. Özellikle elden geçirilmiş temalarda oluyor. Ürün koleksiyon altındaki adresinden açıldığında kanonik kısa adrese işaret etmiyorsa kopya adres üretiliyor.
Koleksiyon metnini ürün listesinin altına almak gerekiyorsa. Çoğu tema metni üste koyuyor. Alta almak hem dönüşüm hem deneyim açısından daha iyi ve bu bir şablon değişikliği.
Schema işaretlemesi eksikse ya da hatalıysa. Ürün, kırıntı yolu ve organizasyon işaretlemeleri tema tarafında duruyor.
Kaldırılan uygulamaların artıkları kalmışsa. Uygulama silindikten sonra temada bıraktığı kod parçaları duruyor ve her sayfada yükleniyor. Shopify bunları kendi temizlemiyor.
robots.txt kuralları değişecekse. robots.txt.liquid şablonu oluşturulması gerekiyor.
Kod düzenlemeden önce ne yapılmalı?
Tema dosyalarına dokunmadan önce iki şey: yedek ve deneme.
Shopify’da temanın kopyasını almak tek tıklamayla yapılıyor. Değişiklikleri kopya üzerinde yapın, kontrol edin, sonra yayına alın. Canlı temada doğrudan düzenleme yapmak, mağazanın birkaç dakika bozuk görünmesi riskini taşıyor.
Bir de değişiklik kaydı tutun. Hangi dosyada neyi neden değiştirdiğinizi yazan basit bir not yeter. Tema güncellemesi geldiğinde bu kayıt işinize yarıyor; onsuz hangi değişikliğin sizden hangisinin temadan geldiğini ayırmak zor.
Tema güncellemesinde ne oluyor?
Burası kod düzenlemenin asıl bedeli ve genelde baştan düşünülmüyor.
Tema güncellendiğinde yeni sürüm kurulmuş oluyor ve sizin elle yaptığınız değişiklikler yeni sürümde yok. Yani her güncellemede değişiklikleri yeniden uygulamak gerekiyor.
Bunu azaltmanın yolları var:
- Mümkün olan yerde editör ayarını tercih edin, kod düzenlemesini son çare olarak kullanın
- Değişiklikleri mümkün olduğunca az dosyaya toplayın
- Her değişikliği yorum satırıyla işaretleyin, güncellemede bulmak kolaylaşır
- Değişiklik kaydını güncel tutun
- Uygulama ile çözülebilecek bir şeyi kodla çözmeyin
Son maddenin tersi de doğru: uygulamayla çözülebilecek ama her sayfaya yük bindirecek bir şey için kod daha iyi. Karar, o işin ne sıklıkta değişeceğine bakarak verilir.
Örnek durumlar
Pratikte en sık karşılaştığım dört durum ve nasıl çözüldükleri.
Koleksiyon sayfasında metin alanı yok. Panelde açıklama yazılıyor ama sayfada görünmüyor, çünkü tema o alanı basmıyor. Çözüm, koleksiyon şablonuna açıklama alanını eklemek. Küçük bir değişiklik, etkisi büyük.
Her sayfada marka adı H1 olarak çıkıyor. Logo linki H1 ile sarılmış. Çözüm, logoyu bir linke çevirip H1’i sayfa başlığına vermek.
Ürün görselleri gereğinden büyük yükleniyor. Tema görseli sabit boyutta istiyor ve mobilde de aynı dosyayı indiriyor. Çözüm, duyarlı görsel etiketlerini kullanmak.
Mağaza silinen uygulamaların kodunu taşıyor. Çözüm, tema dosyalarında o uygulamanın bıraktığı parçaları bulup kaldırmak. Sıkıcı bir iş ama hız tarafında ölçülebilir fark yaratıyor.
Bu işi kim yapmalı?
Liquid bilen biri. Shopify temaları Liquid şablon diliyle yazılıyor ve HTML ile CSS bilgisi tek başına yetmiyor.
Küçük düzeltmeler için yazılımcıya gerek olmuyor; yapılacak şey netse ve yedek alınmışsa mağaza sahibi de yapabiliyor. Ama şablon yapısına dokunan değişikliklerde Liquid bilen birinin bakması daha güvenli.
Ben bu düzeltmeleri kendim yapıyorum, çünkü SEO tarafındaki tespitin uygulamasını başka birine devretmek genelde araya kayıp giriyor. Tespit edilen şeyin neden yapıldığını bilen kişinin uygulaması daha isabetli oluyor.
Uygulama mı, kod mu?
Pek çok işi hem bir uygulamayla hem kod düzenlemesiyle çözmek mümkün ve seçim ölçüte bağlı.
| Durum | Daha uygun olan | Neden |
|---|---|---|
| Sık değişen bir içerik | Uygulama | Her değişiklik için kod gerekmiyor |
| Her sayfada çalışacak bir şey | Kod | Uygulama yükü her sayfaya biniyor |
| Tek seferlik yapısal düzeltme | Kod | Uygulama gereksiz bağımlılık yaratıyor |
| Ekibin yönetmesi gereken bir şey | Uygulama | Panelden yönetilebilir olması önemli |
| SEO etiketleri ve işaretleme | Kod | Doğrudan şablonda duruyor |
Pratikte en çok gördüğüm hata üçüncü satır. Tek seferlik bir düzeltme için uygulama kurulması, sonra o uygulamanın aylarca ücret alıp her sayfaya dosya eklemesi. Bir kere yapılacak bir iş için kalıcı bir bağımlılık kurmaya değmiyor.
Hız tarafında ne kazanılır?
Tema düzenlemesinin ölçülebilir en net kazancı burada çıkıyor. Kullanılmayan uygulama kodunu kaldırmak, gereksiz yazı tipi dosyalarını azaltmak ve görselleri duyarlı hâle getirmek üç kalem olarak toplamda ciddi fark yaratıyor.
Ölçümü değişiklikten önce ve sonra yapın. Bir ürün sayfası seçin, tarayıcının geliştirici araçlarında yüklenen toplam veri miktarını ve dosya sayısını not edin. Düzenleme sonrası aynı sayfayı ölçün. Aradaki fark tahmin değil, rakam.
Bu ölçümü yapmazsanız hız çalışmasının işe yarayıp yaramadığı his üzerinden tartışılıyor ve genelde sonuca varılmıyor.
Tema seçerken neye bakmalı?
Bu yazıdaki işlerin çoğu, baştan doğru tema seçilmişse hiç gerekmiyor. Tema alırken ya da değiştirirken şunlara bakın.
- Koleksiyon açıklaması için ayrı bir alan var mı ve ürün listesinin altına konabiliyor mu? En çok ihtiyaç duyulan şey bu.
- Başlık yapısı doğru mu? Demo sayfasının kaynağına bakıp her sayfada tek H1 olduğunu ve o H1’in sayfa konusunu söylediğini doğrulayın.
- Kırıntı yolu var mı? Hem gezinme hem işaretleme açısından faydalı.
- Demo sayfası ne kadar hızlı? Temanın demo adresini PageSpeed ile ölçün. Demo yavaşsa sizin mağazanız daha yavaş olacak.
- Güncelleniyor mu? Son güncelleme tarihi bir yıldan eskiyse uzak durun.
Beş maddeyi kontrol etmek yarım saat sürüyor ve sonradan aylarca uğraşmaktan kurtarıyor.
Nereden başlamalı?
Elinizde sınırlı zaman varsa sıra şöyle. Önce kanonik etiketini kontrol edin, çünkü bozuksa yaptığınız her şeyin etkisi bölünüyor. Sonra başlık yapısına bakın. Sonra koleksiyon metni alanını yerine getirin. Sonra silinmiş uygulamaların artıklarını temizleyin. En sonda görsel ve hız tarafına geçin.
İlk iki madde yarım günlük iş ve etkisi en büyük olan kısım da orası. Hız tarafı daha uzun sürüyor ve etkisi daha dolaylı, o yüzden sona kalıyor.
Çok dilli mağazada tema tarafı değişir mi?
Değişiyor ve bu baştan düşünülmüyor. Shopify’ın çeviri altyapısı metinleri çeviriyor ama tema içinde sabit yazılmış metinleri çevirmiyor.
Yani tema dosyasına elle yazdığınız bir başlık ya da buton metni, ikinci dilde Türkçe kalıyor. Bunu önlemek için metinleri çeviri dosyalarından çağırmak gerekiyor. Kod düzenlemesi yaparken buna dikkat etmek, sonradan düzeltmekten kolay.
Temanın ne bastığını nasıl görürsünüz?
Editörde göremediğiniz şeyler sayfanın kaynağında duruyor. Üç komut en sık bozulan üç şeyi kontrol ediyor.
curl -s https://magazaniz.com/products/ornek | grep -o '<link rel="canonical"[^>]*>'
curl -s https://magazaniz.com/products/ornek | grep -o '<h1[^>]*>[^<]*'
curl -s https://magazaniz.com/products/ornek | grep -c 'application/ld+json'Birinci komut kanoniğin kısa adresi gösterdiğini, ikincisi sayfada tek bir H1 olduğunu ve o H1’in ürün adını taşıdığını, üçüncüsü yapısal veri bloğunun basıldığını doğruluyor. İkinci komut birden fazla satır döndürüyorsa sayfada birden çok H1 var demektir.
Üçü de terminalde çalışıyor. Tema değişikliği yaptıktan sonra üçünü tekrar geçirmek, canlıya alınan bozuk bir şablonu aynı dakika yakalıyor.
Özetle
Tema editörü görünümü değiştirir, kaynak kodda ne yazdığını değiştirmez. Başlık sırası, kanonik, işaretleme ve robots kuralları kod tarafında duruyor. Kod düzenlemesine girerken temanın kopyasını alın, değişiklikleri kaydedin ve her güncellemede yeniden uygulanacağını hesaba katın.