Mobil Tasarım İçin Bir Hile Sayfası: Duyarlı Tasarım, Dinamik Sunum ve Mobil Siteler

Editörün güncellemesi (Temmuz 2015): Nisan 2015'te Google, mobil arama sonuçlarını sıralayan algoritmada önceden duyurulan bir güncelleme yaptı. Bir web sitesinin mobil uyumluluğu, mobil arama sıralamaları için onaylanmış bir sıralama sinyalidir. Aşağıdaki makalenin yardımıyla not alın ve web sitenizi mobil uyumlu hale getirin.

İstatistikleri hepimiz duymuşuzdur: 2014, bir bilgisayar veya dizüstü bilgisayardan çok daha fazla kişinin akıllı telefondan İnternet'e eriştiği yıldır. Mobil tasarım gelecek. Sitenizin geride kalmasını istemiyorsunuz, ancak bu giderek mobil hale gelen İnternet için tam olarak nasıl programlıyorsunuz? Her biri kendi avantajları ve dezavantajları olan üç ana seçenek vardır. Bu yazıda, web siteniz ve SEO stratejiniz için ileriye dönük en iyi yolu seçmenize yardımcı olmak için size her birinin artılarını ve eksilerini vererek mobil hazır olma seçeneklerinizi parçalayacağım.

Seçenek 1: Duyarlı Tasarım

Duyarlı tasarım, medya sorgularını kullanarak bir sayfanın görüntülendiği ekranın çözünürlüğünü belirler, ardından sayfanın boyutunu ve düzenini uygun şekilde ayarlar. Google, duyarlı web tasarımını tercih ettiğini belirtti ve bu da onu bu tartışmada ağırlaştırıyor.

Artıları :

1. Her sayfanın yalnızca bir sürümü vardır. Aynı sayfa, onu görüntüleyen cihazın türüne göre uyarlanır (cihazın türünü tespit edip buna göre farklı içerik sunmak yerine). Tüm cihazlarda aynı HTML ve URL'ye sahip olmak sitenizin bakımını kolaylaştırır.
2. Duyarlı tasarım, diğer iki seçeneğin yaptığı gibi kullanıcı aracısı algılamasına dayanmaz. Kullanıcı aracısı algılaması (yani, hangi tarayıcının veya cihazın bir web sayfası istediğini algılamak) kendi içinde kötü değildir, ancak mükemmel değildir ve süreçte bir aksaklık varsa, kullanıcılara sitenizin yanlış sürümü sunulabilir. Ek olarak, bu, arama motoru örümceklerini sitenizi birkaç farklı kullanıcı aracısı olarak taramaktan kurtarır - bu, sitenizin daha fazla taranması anlamına gelir.
3. Duyarlı genellikle tarayıcılarda daha hızlı yüklenir. Tüm cihazlar aynı içeriği aldığından, istek-kullanıcı aracısı algılama-olası yeniden yönlendirme işlemi yoktur. Ve akıllı telefonunda acıkmış ve iyi bir restoran arayan herkes, hızın önemli olduğunu bilir.

Eksileri:

1. Mevcut bir siteyi yeniden tasarlamak uzun ve yoğun bir süreç olabilir. Bu nedenle, büyük bir siteniz varsa, yanıt verene geçmek en iyi seçim olmayabilir.
2. Sitenizin düzenine bağlı olarak, içeriği bir mobil ekrana sıkıştırmak çok zor olabilir. NYTimes.com gibi siteler ayrı mobil siteler bulundurur çünkü içeriği bölmek, tek bir sayfaya koymaktan daha kolaydır.
3. Gezinme öğeleri her zaman iyi boyutlandırılmaz; üzerine gelinen öğeler dokunmatik ekranda hiç çalışmıyor. Dolayısıyla duyarlı olmak, navigasyonunuzu değiştirmek anlamına gelebilir.
4. Çok sayıda resim içeren duyarlı sayfaların duyarlı tasarımla daha yavaş yüklendiği durumlar olmuştur. Bunun norm olmadığını vurgulamalıyım, ama oldu.

Duyarlı tasarımı tercih ederseniz, canlı yayınlamadan önce resimlerinizi optimize etmek ve sitenizi çeşitli tarayıcılarda ve cihazlarda test etmek (veya iyi bir kullanıcı aracısı emülatörü kullanmak) isteyeceğinizi unutmayın.

2. Seçenek: Dinamik Sunum

Bazen kullanıcı aracısı "sniffing" olarak anılan dinamik sunum iki şekilde yapılabilir ve uygulanması zordur. Aslında Google, dinamik sunumla yapılan bazı yaygın hataları özetliyor. Bu tekniğin yaptığı şey, bir ziyaretçinin kullanıcı aracısını (yani sitenizi görüntülemek için hangi cihazı kullandıklarını) tespit etmek ve ardından sunucu düzeyinde yönlendirme yapmaktır . Dinamik sunumu uygulamanın bir yolu, bir siteye bağlantıların masaüstü sitesine varsayılan olduğu, ancak mobil cihazların masaüstü sitesinden mobil siteye yönlendirildiği tek yönlü yeniden yönlendirmedir .

İkinci tür, çift yönlü yönlendirme , hem masaüstü hem de mobil sitelerde koda sahiptir ve cihazdan bağımsız olarak herhangi bir ziyaretçiye uygun içeriğin sunulmasını sağlar. (Bu kod parçalarına bazen santral etiketleri denir.) Uygulama, masaüstüne mobil siteye işaret eden bir rel=”alternate” etiketi koymak anlamına gelir; ve mobil sitede, masaüstü sitesini işaret eden bir rel=”canonical” etiketi koymak.

Artıları:

1. Yönlendirme sunucu düzeyinde yapıldığından, sayfa başına yalnızca bir URL'ye ihtiyacınız vardır.
2. Dinamik sunum, özellikli telefonlarda da işe yarar. PCMag.com tarafından tanımlandığı gibi, özellikli telefon "sesli arama ve yazılı mesajlaşmanın ötesinde sabit bir dizi işlev içeren ancak bir akıllı telefon kadar kapsamlı olmayan bir cep telefonu"dur. Örneğin, özellikli telefonlar genellikle uygulamaları indiremez, ancak genellikle bazı web tarama özelliklerine sahiptir. Google'a göre en büyük fark, özellikli telefonların CSS'yi işleyememesi ve bu nedenle duyarlı tasarımı çok iyi idare edememeleridir. Bu nedenle, hedef kitlenizi ve ne tür mobil cihazlar kullandıklarını bilmek önemlidir.
3. Özellikle mobil kullanıcılarınız için ayrı bir anahtar kelime grubuna sahip olmak istiyorsanız, mobil kullanıcılar ve masaüstü kullanıcılarının her biri farklı HTML gördüğünden bu seçenek bunu yapmanıza olanak tanır. (Search Engine Land, mobil cihazlara özel anahtar kelimeleri tartışan harika bir makaleye sahiptir.)

Eksileri:

1. Dinamik yeniden yönlendirme, ayrı bir SEO projesi gerektiren ayrı bir dizine alınmış HTML kümesiyle mobil cihazlar için ayrı bir site oluşturduğu için site bakım çalışmanızı iki katına çıkarır.
2. Yeni bir mobil cihaz piyasaya sürüldüğünde yeni dizilerin eklenmesi gerektiğinden, gerekli kullanıcı-aracı dizileri listesi de sürekli bakım gerektirir.
3. Son olarak, siteniz dinamik olarak içerik sunuyorsa bir “Vary HTTP-User Agents” başlığı kullanmanız gerekeceğini unutmayın. Başlık, içeriğin düzgün bir şekilde sunulmasına ve motorların onu doğru şekilde önbelleğe almasına yardımcı olur. Google, bu başlığın nasıl ekleneceğine ilişkin ayrıntılara sahiptir.

Seçenek 3: Mobil Site

Bu seçenek, adından da anlaşılacağı gibi, özellikle mobil kullanıcılar için ayrı bir alan oluşturmayı içerir. En yaygın örnekler m.domain.com veya mobile.domain.com'dur . Büyük perakendeciler için popüler bir seçenektir; Bridget Randolph, "Quantcast Top 100.000 sitesinde sıralanan web sitelerinin %73'ünün, mobil cihazlara özel bir URL'ye URL yönlendirmeleri kullandığına" dikkat çekiyor. Dinamik sunum gibi, bu teknik de özellikle mobil cihaz kullanan ziyaretçiler için içerik geliştirmeyi içerir; ancak, ayrı bir mobil sitenin URL'leri farklıdır, bu nedenle sunucu düzeyinde yeniden yönlendirme yoktur.

Artıları:

1. Yüz binlerce veya milyonlarca sayfa sayısına sahip daha büyük siteler için duyarlı tasarım uygulamak çok fazla iş olabilir. Mobil site, kullanıcı deneyimini özelleştirmenize ve yavaş yavaş benzersiz bir mobil deneyim oluşturmanıza olanak tanır.
2. Dinamik sunum gibi, mobil site de özellikli telefonlar için duyarlı tasarımdan daha iyidir. Sitenizin demografisine bağlı olarak bu bir kriter olmayabilir; ancak bazı işletmeler için bu önemli bir husustur.

Eksileri :

1. Mobil siteniz, masaüstü sitenizin oluşturduğu herhangi bir pozitif geri bağlantı profilinden yararlanmaz (çift yönlü yönlendirmeler uygulamadığınız sürece). Dolayısıyla, mobil kullanıcılarınızın sizi organik aramada bulmasını istiyorsanız, bu gerçek bir aksilik olabilir.
2. Mobil siteniz bazı ekstra SEO çalışmaları gerektirecektir. Google ve Bing Web Yöneticisi Araçları'na ayrı bir XML Site Haritası göndermeniz gerekecek. Ayrıca, daha küçük ekranlar daha küçük SERP'ler anlamına gelir, bu nedenle Meta etiketlerinizi düzenlemeniz gerekebilir. Mobil cihazlara özel Meta etiketleri, masaüstü sitelere göre daha kısa olmalıdır.

Gördüğünüz gibi, içerik önemli ölçüde yeniden biçimlendirildi ve bir mobil cihazda okunabilmesi için küçültüldü.

Siteniz için doğru seçimi yapmak için tüm bu bilgileri gözden geçirirken, siteye erişmek için kaç ziyaretçinizin mobil cihaz kullandığını kendinize sormayı unutmayın. Analitiklerinizi kontrol edin. Mobil trafiğin toplam yüzdesi yüzde beşin altındaysa, muhtemelen mobil tasarımı uygulamak için bekleyebilirsiniz. Şimdilik. Tahminler doğruysa, mobil kullanım yalnızca giderek daha fazla İnternet trafiği talep etmeye devam edecektir.

Sayfalarınızı hız ve mobil SEO için nasıl optimize edeceğiniz hakkında bilgi için şu kaynaklarla başlamanızı öneririz:

• Hepsi Bir Arada Mobil SEO ve Tasarım Kontrol Listesi
• 7 Mobil Dostu Navigasyon En İyi Uygulaması
• SEO Rehberi: Mobil SEO ve UX Optimizasyonu
• Görüntü Optimizasyonu: Mobil Kullanıcı Deneyimini Geliştirmek İçin Yapabileceğiniz 1 Numaralı Şey
• Google Developers'tan Web Yöneticisi Mobil Rehberi