Portfolyo siteleri için Mobil Uyumluluk Kontrolü

Portfolyo siteleri neden buna ihtiyaç duyar?

Portfolyo sitenizin galerisi masaüstünde mükemmel görünüyor, ama müşteriniz bağlantıyı telefonda açtığında görseller taşıyor, yazılar minicik kalıyor ve yakınlaştırma çalışmıyor. Görsel ağırlıklı sitelerde bu sık yaşanır: tam çözünürlüklü fotoğraflar, geniş üst bant görselleri ve sabit piksel genişlikli bloklar küçük ekranda kolayca bozulur. Üstelik galeri yalnızca görsellerden oluşuyorsa Google'ın okuyacağı metin de azdır; mobil sürüm zayıfsa elinizde hem az metin hem de sorunlu bir telefon deneyimi kalır. Mobil Uyumluluk Kontrolü, sayfanızın ham HTML'ini okuyup viewport etiketi, media query, srcset, sabit genişlik ve zoom engeli gibi işaretleri kontrol eder; 8 kontrole göre 0-100 arası bir puan ve düzeltme listesi verir. Gerçek bir telefon gibi davranmaz, sayfayı çizmez, hız ölçmez. Yani bu bir ilk eleme adımıdır: hangi proje sayfasında temel mobil işaretlerin eksik olduğunu birkaç saniyede görürsünüz, sonra asıl görünümü kendi telefonunuzda doğrularsınız. Örneğin /projeler/dugun-cekimi gibi tek bir proje sayfasını girerek başlayabilirsiniz; ana sayfanın temiz çıkması, derin galeri sayfalarının da temiz olduğunu göstermez. Sonuç ekranındaki etiketlerin tamamı İngilizcedir; bu sayfada onları olduğu gibi aktaracağız.

Portfolyo siteleri için rehber

Önce hangi sayfayı girmelisiniz

Ana sayfayla yetinmeyin; müşterilerin en çok açtığı iki sayfayı seçin. Örneğin https://siteniz.com/projeler/dugun-cekimi gibi bir galeri sayfası ve /hakkimda sayfası iyi bir başlangıçtır. Araç her çalıştırmada tek bir URL okur; yalnızca alan adı yazarsanız başına https:// ekler. Sayfa tek istekle ve sadece HTML olarak çekilir, harici CSS dosyaları, betikler ve görseller indirilmez. Adobe Portfolio, Squarespace ya da Wix gibi bir site oluşturucu kullanıyorsanız sayfalar çoğunlukla aynı şablondan geldiği için sonuçlar benzer çıkar; yine de galeri ayrı bir düzen kullanıyorsa onu ayrıca deneyin. Hemen yapabileceğiniz bir adım: telefonunuzda aynı sayfayı açıp yatay kaydırma çıkıp çıkmadığına bakın. Sonuç ekranı bunu söylemez, çünkü araç sayfayı hiçbir ekran genişliğinde çizmez.

Puanı ve etiketleri nasıl okumalısınız

Sonuçta Overall Score, Health Score ve Issues to Fix bölümlerini göreceksiniz; etiketler İngilizce kalır. Puan 8 kontrolün ağırlıklı toplamıdır: Viewport meta tag 28 puan, width=device-width 22 puan, Responsive CSS (media queries) 14 puan eder. Verdict satırında "This page is likely NOT mobile-friendly" yazıyorsa viewport etiketi ya da width=device-width eksiktir; önce onu düzeltin. Kör noktaları bilin: araç media query'leri HTML'de ve kendi alan adınızdaki ilk üç stil dosyasında arar; stiller bir CDN'den geliyorsa Not detected görünebilir. No fixed-width layout ise genişlik özniteliği 100 ve üzeri olan bir tablo ya da div'de, veya 400 piksel ve üzeri satır içi stil genişliğinde uyarı verir; görsellerdeki width öznitelikleri sayılmaz. Bu yüzden "düzeniniz bozuk" demek yerine "kontrol bunu işaretliyor" diye okuyun. Yüksek puan da telefonda iyi göründüğünü kanıtlamaz; bu Google'ın değil, SeoMods'un kendi ağırlıklandırmasıdır.

Düzeltmeleri hangi sırayla yapmalısınız

Önce Critical etiketli satırlara bakın. Temanızın ya da site oluşturucunuzun head bölümüne viewport meta etiketini width=device-width, initial-scale=1 değerleriyle eklemek ilk adımdır; WordPress'te klasik temalarda bu satır genellikle header.php içinde bulunur. Ardından Zoom not disabled (a11y) uyarısı varsa user-scalable=no ifadesini silin; fotoğrafın ayrıntısına bakmak isteyen ziyaretçi yakınlaştırabilmeli. Sonra galeri görselleri için srcset olup olmadığını kontrol edin. Ancak araç hız ölçmez; büyük fotoğrafların sayfayı ne kadar yavaşlattığını ayrı bir hız testiyle görün. Her düzeltmeden sonra aynı URL'yi yeniden çalıştırın: puandaki artış işaretlemenin düzeldiğini gösterir, görsellerin telefonda düzgün durduğunu değil. Alt metin ve galeri yazısı gibi içerik işleri de bu kontrolün konusu değildir.

Örnek senaryolar

Sık yapılan hatalar

• Yalnızca ana sayfayı test etmek. Müşterileriniz çoğunlukla belirli bir proje ya da galeri sayfasına gelir ve o sayfa farklı bir düzen kullanabilir. Hem ana sayfayı hem de en az bir galeri sayfasını ayrı ayrı çalıştırın.
• Yüksek puanı sorunsuz telefon deneyimi sanmak. Puan yalnızca HTML'deki işaretleri sayar; sayfa hiçbir ekranda çizilmez. Yatay kaydırmayı ve taşan görselleri kendi telefonunuzda ayrıca kontrol edin.
• Yakınlaştırmayı kapatmak. user-scalable=no ya da maximum-scale=1 yazmak fotoğrafın detayına bakmak isteyen ziyaretçiyi engeller. Araç bunu Zoom not disabled (a11y) satırında uyarı olarak işaretler.
• Not detected satırı yüzünden temayı değiştirmek. Media query'ler bir CDN'deki ya da başka bir alan adındaki stil dosyasındaysa araç onları göremez. Önce telefonunuzda sayfanın gerçekten bozuk olup olmadığına bakın, sonra karar verin.
• Mobil uyumu ile sayfa ağırlığını karıştırmak. Viewport doğru olsa bile 6 MB'lık bir üst bant görseli telefonda sayfayı yavaşlatır. Bu kontrol hız ölçmediği için ağır görselleri ayrı bir hız testiyle yakalayın.

Sık sorulan sorular

Portfolyo sitemin mobil uyumlu olduğunu nasıl anlarım?

Tek başına bu araçla anlayamazsınız; yalnızca ham HTML'deki işaretleri kontrol eder. Sayfa adresini girin, viewport etiketi ve width=device-width geçiyor mu bakın, verdict satırını okuyun. Sonra aynı sayfayı gerçek bir telefonda açın: görseller ekrana sığıyor mu, yatay kaydırma çıkıyor mu, yakınlaştırabiliyor musunuz? Google'ın eski Mobile-Friendly Test aracı Aralık 2023'te kapatıldı, bu yüzden tarayıcınızın geliştirici araçlarındaki cihaz görünümü de iyi bir ikinci kontroldür. İkisi birlikte size güvenilir bir fikir verir. Her ikisinde de sorun görmüyorsanız mobil temeliniz büyük olasılıkla sağlamdır.

Galerim telefonda yavaş açılıyor, bu araç nedenini söyler mi?

Hayır, hız ölçmez; Core Web Vitals ve Lighthouse puanı da vermez. Yalnızca HTML'de srcset geçip geçmediğine bakar; bu da görsellerin farklı ekranlara farklı boyutta sunulabileceğine dair bir ipucudur, sayfanın gerçekte ne kadar hızlı yüklendiğine dair değil. Tam çözünürlüklü fotoğraflar ve büyük üst bant görselleri yavaşlığın en yaygın nedenidir; bunu görmek için ayrı bir hız testi çalıştırın, görselleri sıkıştırın ve WebP gibi hafif biçimlere geçin. Bu işlemden sonra mobil kontrolü yeniden çalıştırmanız gerekmez; hız ve işaretleme ayrı konulardır.

Viewport etiketi eksik çıktı, ne yapmalıyım?

Önce sayfanın gerçekten eksik mi, yoksa farklı bir sürümü mü okunduğunu kontrol edin: araç yalnızca tek istekle gelen HTML'e bakar. Hazır bir site oluşturucu kullanıyorsanız etiketi genellikle şablon yönetir; ayarlarını değiştiremiyorsanız destek ekibine yazın. Kendi barındırdığınız sitede head bölümüne viewport meta etiketini width=device-width, initial-scale=1 değerleriyle ekleyin. WordPress'te bu satır klasik temalarda genellikle header.php içindeki head bölümünde bulunur. Ekledikten sonra aynı URL'yi tekrar çalıştırın. Etiket eklendikten sonra puanın yükselmesi beklenir; ancak sayfanın telefonda doğru göründüğünü yine kendi cihazınızda doğrulayın.

Alt metin ve görsel SEO'su da bu kontrolde çıkıyor mu?

Hayır. Alt metin, dosya adı ve görsel açıklamaları bu kontrolün konusu değildir; yalnızca mobil işaretleme sinyallerine bakılır. Google alt metni görsel meta verisinin en önemli özniteliği olarak tanıtır ve anahtar kelimeyle doldurmamanızı söyler. Galerideki her fotoğraf için kısa, açıklayıcı bir alt metin yazın, dosya adını IMG_4821.jpg yerine dugun-fotografi-istanbul.jpg gibi anlamlı yapın. Bunun için alt metin kontrol aracını ayrıca çalıştırın. Mobil puanınız yüksek olsa bile alt metni boş bir galeri görsel aramada pek işe yaramaz.

Aracı kaç kez ve hangi sayfalarda çalıştırabilirim?

Kayıt gerekmez, ücretsizdir; ancak çalıştırmalar hız sınırına tabidir: oturum başına 10 saniyede 5, dakikada 20 çalıştırma. Her çalıştırma tek bir URL'yi kontrol eder, yani 30 proje sayfanız varsa hepsini sırayla girmeniz gerekir. Önce şablonu temsil eden 3-4 sayfa seçin: ana sayfa, bir galeri, bir proje detayı, iletişim. Hepsi aynı temayı kullanıyorsa sonuçların benzer çıkması beklenir; farklı çıkan sayfa genellikle ayrı bir düzen ya da gömülü bir bileşen kullanıyordur. Sınıra takılırsanız bir dakika bekleyip devam edin.

Kaynak: Alt metin, kısa ve açıklayıcı dosya adları ve görselin çevresindeki metin konusunda Google'ın görsel SEO en iyi uygulamaları rehberi resmi bir başlangıç noktasıdır.