Mobil Uyumlu Web Sitesi Nedir? Google Neden Mobile Bakıyor?

Mobil uyumlu web sitesi, telefonda açıldığında yakınlaştırmaya, yana kaydırmaya ya da parmakla nişan almaya gerek bırakmadan okunabilen ve kullanılabilen sitedir. Bu artık yalnızca bir tasarım tercihi değil, çünkü aramada değerlendirilen sürüm mobil sürüm: Google sitenizi dizine eklerken ve sıralarken telefon gibi davranan tarayıcısıyla gördüğü mobil sürümü kullanıyor. Bu yazıda mobil uyumluluğun ne demek olduğunu, nasıl test edildiğini ve kendi sitemizde yakaladığım iki mobil hatayı anlatıyorum.

Mobil uyumlu site neden bu kadar önemli?

İki sebebi var. Birincisi ziyaretçi: telefondan gelen biri formu dolduramıyor, menüyü açamıyor ya da yazıyı okumak için ekranı büyütmek zorunda kalıyorsa geri dönüp bir sonraki sonuca geçiyor. İkincisi Google: arama motoru sitenizin masaüstü sürümünü değil, mobil sürümünü asıl sürüm sayıyor. Google buna mobil öncelikli dizine ekleme diyor. Mobil sürümde yer almayan içerik, Google'ın dizine eklediği sürümde de yer almıyor; bu da o içerikten gelebilecek trafiği kaybettirebilir.

Mobil uyumlu site kurmanın hangi yolları var?

Duyarlı tasarım

Aynı adres, aynı HTML; ekran genişliğine göre düzen değişiyor. Google bu yapıyı uygulaması ve bakımı en kolay yol olduğu için öneriyor. Kendi sitemiz de bu yapıda; yeni bir sitede ilk tercihim bu.

Dinamik sunum

Adres aynı kalıyor ama sunucu, gelen cihazı tanıyıp telefona farklı bir HTML gönderiyor. Doğru kurulmadığında Google'ın mobil sürümü eksik görmesi riski doğuyor.

Ayrı mobil adres

Mobil ziyaretçiyi "m." ile başlayan ayrı bir adrese gönderen eski yapı. İki sitenin içeriğini, bağlantılarını ve yönlendirmelerini aynı tutmak gerektiği için bence bakımı en zor yol; yeni bir sitede tercih etmiyorum.

Bir sitenin mobil uyumlu olduğunu nasıl anlarsınız?

Google'ın eski mobil uyumluluk testi aracının adresi artık Lighthouse sayfasına yönleniyor; kontrolü bugün başka araçlarla yapıyorum:

1. Telefonda kendiniz gezin: ana sayfa, bir hizmet sayfası, bir blog yazısı ve iletişim formu. Menüyü açıp kapatın, formu gerçekten gönderin.
2. PageSpeed Insights ile ölçün: mobil sekmesindeki laboratuvar ölçümü sayfayı yavaşlatılmış bir telefon bağlantısında deniyor. Ölçütlerin anlamını Core Web Vitals yazımda anlattım.
3. Tarayıcının geliştirici araçlarında dar ekranları deneyin: 360 piksel genişlikte yatay kaydırma çubuğu çıkıyorsa bir öğe ekrandan taşıyor demek.
4. Search Console'a bakın: Google sayfanızı akıllı telefon tarayıcısıyla taradığı için dizine ekleme raporlarında gördüğünüz, mobil sürümün durumu.

Kendi sitemizde hangi mobil hataları yakaladım?

İçeriği gizleyen kaydırma animasyonu

Sitemizde bölümlerin sayfa kaydırıldıkça yumuşakça belirmesini sağlayan bir animasyon vardı. Stil dosyası içeriği baştan görünmez yapıyor, onu görünür kılacak JavaScript ise sayfa yüklendikten sonra çalışıyordu. Yavaş bağlantıda ilk açılışta metin bir süre görünmüyordu; hizmet iç sayfalarında bu, gövdenin tamamı demekti. Daha kötüsü, JavaScript bir hata verseydi metin kalıcı olarak görünmez kalacaktı. Düzeni değiştirdik: içerik artık varsayılan olarak görünür, gizleme işini animasyonu çalıştıran kodun kendisi yapıyor ve ilk ekrandaki bölümler hiç gizlenmiyor.

Telefonda yana taşan sayfa

Tarayıcıyla yaptığım bir taramada hakkımızda sayfasının 390 piksel genişlikteki ekranda 430 piksele çıktığını, yani 40 piksel yana kaydırılabildiğini gördüm. Sebep tasarımın kendisi değil, sayfadaki görseller için yazılmış genel bir stil kuralıydı: seçicisi daha özgül olduğu için yazar kartındaki fotoğrafın kendi kuralını eziyor ve fotoğrafı tam genişliğe zorluyordu. Sunucu tarafındaki testlerin hiçbiri bunu yakalamıyordu, çünkü sayfa hatasız açılıyordu; sorun ancak gerçek ekran genişliğinde görünüyordu.

İki hata da aynı dersi veriyor: mobil uyumluluğu tasarım dosyasına değil, gerçek telefona ve gerçek ekran genişliğine bakarak kontrol etmek gerekiyor.

Mobil uyumlu bir sitede neler olmalı?

• Doğru görüntü alanı ayarı: sayfa telefon ekranının genişliğine göre çizilmeli, küçültülmüş masaüstü görünümüyle açılmamalı.
• Okunur yazı boyutu: metin yakınlaştırmadan okunabilmeli.
• Parmağa uygun dokunma alanları: düğmeler ve bağlantılar, parmak yanlışlıkla yandakine basmayacak kadar büyük ve aralıklı olmalı.
• Taşmayan öğeler: tablolar, görseller ve uzun kod ya da adres satırları ekranı yana kaydırmamalı.
• Telefon için düşünülmüş menü: başlıklar sığmıyorsa açılır listeye geçmeli. Kendi sitemizde yedi başlık 992 piksel genişliğe kadar yatay sığıyor, daha dar ekranda açılır menüye dönüşüyor.
• Kolay formlar: telefon alanında sayı klavyesi açılmalı, gereksiz alan olmamalı.
• Tıklanabilir iletişim: telefon numarası ve WhatsApp bağlantısı tek dokunuşla çalışmalı.
• Etkileşim beklemeyen içerik: Google, görünmesi için kaydırma, tıklama ya da yazma gibi bir kullanıcı etkileşimi gereken içeriği yüklemiyor; asıl metin sayfa açılır açılmaz orada olmalı.

Mobilde içerik masaüstünden kısa olabilir mi?

Düzen farklı olabilir, içerik farklı olmamalı. Google mobil ve masaüstü sürümde aynı içeriğin, aynı başlıkların, aynı yapılandırılmış verinin ve aynı robots meta etiketlerinin bulunmasını istiyor; mobil sürümde unutulan bir noindex sayfayı dizinden düşürebilir. Telefonda yer kazanmak için metni silmek yerine akordeon ya da sekme içine almak serbest. Mobilde bilerek içerik kısaltan site, Google o sürüme baktığı için bu içerikten gelen trafiği kaybedebiliyor.

Mobil uyumluluk hız demek mi?

Aynı şey değil ama birbirinden ayrılmıyor. Ekrana düzgün sığan ama telefon bağlantısında yavaş açılan bir site de ziyaretçiyi kaybettiriyor. Bu yüzden mobil kontrolü hız ölçümüyle birlikte yapıyorum. Doğu Vinç için kurduğumuz sitede mobil PageSpeed skoru ölçülen üç sayfada da 100 çıktı; en büyük içerik boyaması 1,3 ile 1,6 saniye arasındaydı ve düzen kayması sıfırdı. Teknik performansın algoritma güncellemelerindeki yerini Google algoritma güncellemeleri yazımda da ele aldım.

Sık Sorulan Sorular

Mobil uyumlu olmayan site Google'da hiç görünmez mi?

Görünür. Google mobil sürümü şart koşmuyor, ama önemle tavsiye ediyor. Asıl kayıp iki yerde yaşanıyor: telefondan gelen ziyaretçi siteyi kullanamayıp çıkıyor, ayrı bir mobil sürüm varsa da orada eksik bırakılan içerik Google'ın dizine eklediği sürüme girmiyor.

Hazır tema mobil uyumlu mu olur?

Hazır temalar genellikle duyarlı olarak satılıyor, ama tema mobil uyumlu diye site mobil uyumlu olmuyor. Sonradan eklenen geniş tablolar, gömülü içerikler, eklentilerin getirdiği açılır pencereler ve özel stil kuralları temanın doğru çalışan düzenini bozabiliyor. Yayından önce gerçek telefonda kontrol şart.

Mobil uyumlu hâle getirmek için siteyi baştan yapmak gerekir mi?

Her zaman gerekmiyor. Taşan öğeler, küçük dokunma alanları ve okunmayan yazı boyutları çoğu sitede stil düzeltmesiyle çözülüyor. Site masaüstü için sabit genişlikte kurulmuşsa ya da ayrı bir mobil adres kullanıyorsa, benim tecrübemde duyarlı yapıyla yeniden kurmak uzun vadede daha az uğraştırıyor. Yeniden kurulumda nelerin yapıldığını web tasarım sayfamızda anlattım.

Mobil uyumluluk dönüşümü etkiler mi?

Etkiler. Telefonda form doldurmak zor, tek dokunuşla arama düğmesi yok ya da sayfa geç açılıyorsa trafik aynı kalsa bile başvuru düşebilir. Hangi cihazdan kaç dönüşüm geldiğini GA4 dönüşüm ölçümü kurulumuyla ayrı ayrı görebilirsiniz.

Faydalı Kaynaklar

• Google Arama Merkezi: Mobil öncelikli dizine ekleme en iyi uygulamaları: Google'ın mobil sürümden beklediği içerik, meta veri ve yapı
• Chrome for Developers: Lighthouse'a giriş: sayfayı mobil koşullarda denetleyen araç
• PageSpeed Insights: mobil hız ve deneyim ölçümü