Mobil SEO Rehberi

Vaktinizin ve enerjinizin (hatta belki paranızın da) önemli bir kısmını vererek sonunda mükemmele yakın hale getirdiğiniz bir web siteniz var. Tüm browser’larda istediğiniz gibi çalışacak şekilde optimize ettiniz, kullanıcıların size ulaşabileceği tüm anahtar kelimeleri içeriğe özenle yerleştirdiniz, tasarımın göze hoş görünmesi için uykusuz geceler geçirdiniz. Artık ziyaretçilerin hiçbir şeyden şikayet etmeyeceğini, herkesin aradığını bularak sitenizden memnun ayrılacağını umuyorsunuz. Peki masaüstü ve dizüstü bilgisayar yerine telefonundan veya tabletinden gelecek ziyaretçileri hesaba kattınız mı? Cevabınız hayırsa ilk bölümde anlatacaklarımızı kesinlikle dinlemelisiniz, çünkü fikrinizin değişeceğinden eminiz. Bununla beraber, hali hazırda bir mobil siteniz bulunuyorsa ve efektif bir şekilde kullanarak ziyaretçileri sitenize çekmek istiyorsanız da aradığınız tüm bilgilere oluşturduğumuz bu rehberden ulaşabilirsiniz.

BÖLÜM 1: WEB SİTENİZ NEDEN MOBİL UYUMLU OLMALI?

Bilgisayarların büyük ekranlarına göre tasarlanmış bir sayfa, mobil cihazlarda görüntülenirken zorluk çıkarabilir. Kullanıcılar, sitenizde yer alan metinleri telefonun veya tabletin ufak ekranından okumak için sürekli ekranı yakınlaştırmak zorunda kalabilir, sayfalarda yer alan bağlantılar parmakla tıklamak için fazla küçük olduğu için web sitenizde istediği gibi gezinemeyebilir, kötü bir kullanıcı deneyimi yaşadığı için sitenizden ayrılarak rakip web sitelerine yönlenebilir. Mobil uyumlu sürüm ise, uygun bir şekilde kurgulandığı takdirde, bu sorunların önüne geçecektir. Söz konusu site ister bir e-ticaret sitesi olsun ister kişisel bir blog, ziyaretçi kazanmak, hatta kaybetmemek istiyorsa mobile yatırım yapmalıdır.

Mobil Trafiğin Yükselişi

Mobil trafiğin önemi her geçen gün artmakta ve bu yükselişin artan bir ivmeyle devam etmesi beklenmektedir. Aşağıdaki istatistikte de görüleceği üzere, son dönemde mobil kullanıcıların sayısı ciddi oranda artmış durumda. We Are Social’ın Ocak 2015 yılında yaptığı araştırmanın sonuçlarına göre, Türkiye’de aktif mobil internet kullanıcıların sayısı, nüfusun neredeyse yarısına tekabül ediyor. Benzer şekilde, Türkiye’de, toplam web sayfası görüntülenme sayısının yaklaşık üçte biri mobil cihazlardan gerçekleşiyor. Şayet sizi ilgilendiren web siteniz üzerinden gerçekleştirdiğiniz satışlar ise aynı araştırmanın mobil e-ticaret kullanımına dair kısmı oldukça ilginizi çekebilir. Zira 2015 Ocak ayında gerçekleştirilen ankete göre, alacağı ürün hakkında mobil cihazlar üzerinden araştırma yapan kullanıcıların toplam nüfusa oranı %24, satın almayı mobil cihazlar üzerinden gerçekleştiren kesimin nüfusa oranı ise %19.

Mobil Kullanıcıların Ne Farkı Var?

Google Analytics vb. araçlar üzerinden bir web sitesinin trafiğini incelediğimizde, mobil kullanıcılar ile masaüstü kullanıcıların ayrı tutulduğunu görürüz. Bu kullanıcıların davranışları, sitede geçirdikleri süre, ziyaret ettikleri sayfalar, hatta siteye ulaşmak için kullandıkları anahtar kelimeler birbirinden çok farklı olabilir. Peki kimdir bu “mobil kullanıcılar”? Mobil kullanıcılar, sayfamızı masaüstünden de ziyaret edenlerle tamamen aynı kişiler olabilir. Ancak mobil üzerinde yaptıkları ziyaret yine de farklı ele alınmalı, dolayısıyla bu ziyaretler için gerçekleştirilecek optimizasyonlar da buna göre değişiklik göstermelidir. Mobil kullanıcıların ihtiyaçlarını ve bizden beklentilerini öngörmek için dikkat etmemiz gereken birkaç temel nokta var. Öncelikle, her ne kadar günümüzde bilgisayarlar mobil cihazlara, mobil cihazlar ise masaüstü bilgisayarlara gitgide benzemeye başlamış olsa da aralarında gerek boyut gerek hız gerekse teknoloji bakımından hala pek çok fark mevcut. Dolayısıyla 13 inç bir dizüstü bilgisayarda muhteşem görünen sitenizin 4.7 inç bir akıllı telefonda da aynı keyifli tasarımı ve kolay kullanımı sağlamasını beklemeniz pek mümkün değil. Tıklanamayacak kadar küçük linkler, okunamayacak boyutlarda yazılmış metinler ve açılamayan veya açılınca kapanması oldukça zor olan pop-up’lar ziyaretçilerin arkalarına bakmadan kaçmalarına sebep olabilir. Mobil aramaların getirdiği en büyük farklılıklardan biri de lokasyon bazlı olmaları. Örneğin, bir marka veya ürünün ismini aratan kullanıcının evde bilgisayar başındaysa online alışveriş yapmayı veya söz konusu marka/ürün hakkında bilgi edinmeyi amaçladığını varsayabiliriz. Ancak bu aramayı mobil bir cihazdan gerçekleştirdiyse kendisine en yakın mağazaya ulaşma ihtimali daha yüksek olabilir. Dolayısıyla kullanılan anahtar kelimelerin ne ifade ettiği, masaüstü ve mobilde büyük farklılıklar gösterebilmektedir. SEO’nun temel kaidelerinden birinin kullanıcıların anahtar kelimelerle neyi bulmak istediğini öngörmek olduğunu düşünürsek, bu, mobil optimizasyonun tamamen farklı olabileceği anlamına gelmektedir. Tabii bunun web sitenizin niteliğine ve ziyaretçilerinizin sizden beklentilerine göre değiştiğini de eklemeliyiz. Web sitenize gelen ziyaretçilerin mobil cihazlar üzerinden arama yaparken niyetleri farklı olduğu gibi, içeriğinizi tüketirken davranışları da farklı olabiliyor. Artık kullanıcıların mobil cihazlar üzerinden arama yapmasının tek sebebi büyük ekranlı bir bilgisayara erişimlerinin olmaması değil. Zira hepimiz bilgisayarımızın başında otururken bir yandan akıllı telefonumuzu kullanıyor, yanıbaşımızda bilgisayarımız olduğu halde televizyon karşısında tabletimizle ilgilenmeyi tercih edebiliyor, bazı ihtiyaçlarımız için mobil cihazımızı, bazıları için ise akıllı telefonumuzu tercih ediyoruz. Farklı cihazları bazen aynı anda bazen de ayrı zamanlarda kullandığımız için, bu cihazlar arası senkronizasyon da son derece önemli bir hale geliyor. Örneğin bir e-ticaret sitesinde mobilden sepetimize eklediğimiz ürünleri bilgisayar başına geçtiğimizde de sepetimizde görmek, ödemeyi oradan yapmak isteyebiliyoruz. Google’ın sesli arama özelliği mobilin gelecekte daha da artacak önemini ortaya koyuyor. Kullanıcıların mobil cihaz üzerinden sözel bir şekilde arama yapabilmesi, kullanılan anahtar kelimelerden mobil üzerinden arama yapma sıklığına kadar tüm arama alışkanlıklarını değiştirmektedir.

21 Nisan’da Her Şey Değişiyor!

Zaten bir süredir mobil cihazlardan yapılan aramalarda mobil uyumlu siteleri “Mobile-friendly” etiketiyle sunan Google, bu davranışını bir adım öteye taşıdı ve  21 Nisan 2015 tarihinde algoritmasında önemli bir değişikliğe giderek mobil uyumlu sitelere öncelik vereceğini açıkladı. Yani sitenizi Google arama sonucu sayfalarında daha yukarılara taşımak için yalnızca mobil uyumluluk konusunda çalışmalar yapmanız bile yeterli olabilecek. Google’ın amacı, arama yapan kullanıcıların, kullandıkları cihaz ne olursa olsun cihazına optimize edilmiş web siteleriyle karşılaşmasını sağlamak. Web sitenizin ne kadar mobil uyumlu olduğunu test etmek için yine Google’ın aracından faydalanabilirsiniz.

BÖLÜM 2: MOBİL SİTENİZİ KULLANICILARA NASIL SUNABİLİRSİNİZ?

Mobil uyumlu web sitenizi tasarlarken dikkat etmeniz gereken en önemli etkenlerden birisi de mobil sitenizi kullanıcılarınıza nasıl sunmanız gerektiği. Bu konuda, tabii ki web sitenizin amacını ve kullanıcı kitlesini net olarak belirleyebilmenin işinizi oldukça kolaylaştıracağı bir gerçek. Örneğin, web sitenizin içeriğini olduğu gibi kullanıcınıza aktarmak istiyorsanız responsive design (duyarlı tasarım) tercih etmenizde fayda var. Hem Google’ın hem de diğer arama motorlarının da tavsiyesi, web sitenizi bu şekilde kullanıcılarınıza aktarmanız yönünde. Fakat bir haber sitesiyseniz ve tüm içeriğinizi sunmaktan ziyade, son dakika haberleri gibi daha çok mobil kullanıcı kitlesine hitap eden içerikleri ön planda sunmak istiyorsanız dynamic serving, yani mobil ve masaüstü kullanıcılarına aynı URL’de farklı içerikler sunmak, sizler için daha kullanışlı olabilir. Bir diğer alternatif ise mobil ve masaüstü versiyonları farklı sitelerde sunmak. Örneğin, m.seozeo.com ve www.seozeo.com gibi. Bunun temel amacı da ölçümlemeleri daha rahat yapabilmek ve yoğun içerikli web sitelerini farklı sunucularda barındırmak olabilir. Bunlar tabii ki biraz da sizlerin tercihinize kalmış metodlar. Daha detaylı bilgilere aşağıdaki başlıklardan ulaşarak web siteniz için en doğru tercihi yapabilmeniz de mümkün.

1. Responsive Design

Responsive tasarımın öncelikle çalışma mantığından bahsetmek istiyoruz. Türkçe haliyle duyarlı web tasarımı, ister masaüstü ister tablet isterse de telefon ile web sitesine girildiğinde aynı sitenin açılması, fakat CSS kodlarının kullanılarak görsel ve içeriklerin farklı şekilde sunulmasıdır. Responsive tasarım sayesinde farklı ekran boyutlarına sahip cihazlardaki tarayıcılar, en uygun şekilde web sitesini son kullanıcıya sunar. Fakat öncelikli olarak tarayıcıların bu tasarımı algılayabilmesi adına, dökümanın başındaki meta etiketlerine “viewport” adında bir etiket eklenir. Bu kod aşağıdaki gibidir:

                               <meta name="viewport" content="width=device-width, initial-scale=1.0">

Bu etiket sayesinde tarayıcı, giriş yapılan cihazın çözünürlüğünü algılayarak yazıları daha rahat okunabilir şekilde büyütür, görselleri ise genişliği ilgili cihazın sınırlarını aşmayacak şekilde düzenler. Hatta Google, bunun nasıl olduğuna dair oluşturduğu animasyonda detaylı bir gösterimde bulunuyor. Responsive tasarımı, Türkiye’de oldukça verimli bir şekilde kullanan web sitelerinden birisi de Chip.com.tr. Chip’in sitesinin masaüstünde ve bir akıllı telefonda nasıl göründüğüne göz atalım: Web sayfasının tamamen aynı içerikle fakat farklı boyutlardaki görsel-metin dengesi ile sunulduğunu görebiliyoruz. Peki, Google’ın da kesinlikle tercih edilmesini önerdiği bu tasarımı kullanmanın artıları ve eksileri neler?

Artıları

• Yalnızca bir URL'den son kullanıcıya ulaşılması.
• Kullanım kolaylığı sağlayarak, tek bir URL'den içeriğin paylaşılabilmesi imkanı.
• Google botlarının web sitesini crawl ederken sadece tek bir siteyi analiz etmesi.
• Yazılım ekibinin kontrolünü kolaylaştırması.
• Mobil sitenin sebep olabileceği olası problemlerin önüne geçilmesi.
• Herhangi bir yeniden yönlendirmeye ihtiyaç duyulmaması ve bu sayede yükleme zamanının kısalması.

Eksileri

• Farklı boyutlardaki cihazlara içeriğin sunulması için ekstra tasarım maliyeti.
• Mobil ve masaüstü sitenin ayrıştırılmaması.
• Kullanıcı deneyiminin, ayrı tasarlanan mobil siteye göre biraz daha düşük olma riski.

2. Dynamic Serving

Dynamic serving'de ise web sitesi, mobil kullanıcılar ile masaüstü kullanıcılara aynı URL üzerinden gösteriliyor olsa da farklı HTML kodları devreye giriyor ve iki kullanıcıya farklı içerikler sunuyor. Burada dikkat edilmesi gereken en kritik nokta, mobil ve masaüstü cihaz kullanıcılarının doğru hedeflenmesi ve aynı şekilde Google botlarının da en doğru biçimde bilgilendirilmesidir. Şu anda, aktif olarak dynamic serving modelini kullanan çok sayıda web sitesi bulunmasa da, bazı haber siteleri ve kurumsal siteler, bu yöntemi tercih edebiliyor. Hepimizin bildiği bir örnek üzerinden gitmek için Tumblr'a göz atalım: Tumblr, masaüstü kullanıcılarına mobilde sunduğundan daha farklı bir sayfa sunuyor. Buradaki temel amaç da mobil kullanıcıları daha çok uygulama kullanmaya yöneltmek. Bu benzer modeli, birçok mobil uygulamanın resmi sitesinde görebilmemiz mümkün.

Artıları

• Responsive'e oranla tasarımda daha özgür olma ve farklılaşma imkanı.
• Daha iyi kullanıcı deneyimi sunma imkanı.
• Tek bir URL'den iki versiyon için de yayın yapılabilmesi.

Eksileri

• Teknik altyapı yönetiminin, diğer alternatiflere göre daha zor olması.
• Her platformdan aynı içeriğe ulaşmak isteyen son kullanıcıların deneyimini düşürmesi.

3. Paralel Site (m.siteadi.com)

Mobil siteyi farklı bir subdomain (URL structure) ve farklı tasarım altında sunmak da sıkça tercih edilen alternatiflerden birisidir. Bu yöntem dahilinde de URL yapıları farklı olduğu için yönlendirme kurgularının oldukça iyi yapılması gerekmektedir. Hem kullanıcıların hem de Google botlarının hangi platformdan ziyaret ettiği, sistem tarafından en doğru şekilde tespit edilmeli ve içerikler bu doğrultuda sunulmalıdır. Örneğin, mobil Googlebot'un ya da mobil cihazını kullanan bir kullanıcının siteadi.com/urun/abc adresine girmek istediğini varsayalım. Bu durumda, sistemin talebin mobil bir cihaz üzerinden geldiğini anlayarak ziyaretçiyi mobil alternatife (büyük ihtimalle m.siteadi.com/urun/abc) yönlendirmesi gerekmektedir. Ayrıca dikkat edilmesi gereken diğer noktalardan birisi ise mobil ve asıl URL'ler arasındaki ilişkinin rel="canonical" ve rel="alternate" etiketleriyle bildirilmesidir. Bu da arama motorlarının işini kolaylaştıracak çalışmalardan birisidir. Genellikle büyük çapta e-ticaret sitelerinin sıkça tercih ettiği bu modeli güzel bir şekilde uygulayan Evmanya.com'u ele alalım: Bu örnekte, farklı iki site farklı domainlerde, farklı kullanıcılara hitap etmekte. Masaüstü sitede daha çok slider'lardaki ürün tanıtımları, popüler kampanyalar ve günün fırsatları sunulurken, mobil sitede ise öncelikle kategorilerin müşterilere sunulması, mobil kullanıcı deneyimini doğrudan arttırmayı amaçlamaktadır.

Artıları

• Mobil içeriği, masaüstü içerikten ayrıştırabilme fırsatı.
• Tamamen özelleştirilmiş tasarımın kullanılmasıyla daha yüksek kullanıcı deneyimi.
• Diğer alternatiflere oranla daha rahat bir implementasyon sürecinin bulunması.

Eksileri

• Doğru yazılım kurgusu yapılmadığı takdirde external duplicate probleminin oluşması riski.
• Link değerlerinin ikiye bölünmesi nedeniyle mobil ve masaüstü değerlerinin birleştirilememesi.
• Barındırma ve bakım maliyetlerinin daha yüksek olması.

BÖLÜM 3: MOBİL SİTE TASARIMI

Yukarıdaki yöntemlerden hangisini seçmiş olursanız olun, es geçmemeniz ve tasarım süresince dikkat etmeniz gereken bazı noktalar var. Ancak bunların hepsini uymanız gereken “kurallar” olarak değil de kendi sitenize uyarlanabilecek farklı görüşler olarak ele almanızı istiyoruz.

 Benzer Tasarım Dili

Kullanıcılar mobil sitenin daha kompakt, sayfalarının daha ulaşılabilir olmasını bekleyecektir. Ancak tamamen ayrı bir site tasarımı geliştirmek istiyor olsanız bile gerek kullandığınız renklerle gerekse tercih ettiğiniz fontla ziyaretçilere tanıdık görünmeniz oldukça önemli. Baştan aşağı tasarımı değiştirilmiş bir site, ziyaretçilerin aynı sitede olduğundan şüphe etmesine sebep olabilir.

“Mobile First” İlkesi

Eğer fırsatınız varsa önce mobil siteyi tasarlamak, daha sonra bu tasarımı masaüstü kullanıcılara uyarlamak, tam tersini yapmaktan daha kolay ve efektif olacaktır. Çünkü bir iPhone ekranına yerleştirip de monitöre sığdıramayacağınız hiçbir içerik türü olamaz; ancak tam tersi gayet mümkündür. İster duyarlı ister dinamik bir tasarım yapacak olun, öyle bir imkanınız varsa bu tasarımı ilk önce mobil için gerçekleştirmenizi öneriyoruz. Tabii bu mümkün değilse de mükemmel bir tasarım ortaya çıkarabilirsiniz; sadece bunun için daha fazla efor sarf etmeniz gerekebilir. Çünkü zor olandan başlayıp kolay olana entegre etmek her zaman daha verimli olacaktır. Eğer seçtiğiniz yöntem tamamen ayrı bir site tasarımı kurgulamaksa bu ilkenin anlamlı olmadığını da eklemeliyiz. Mobil tasarıma başlamadan önce masaüstü sitenizi hayata geçirdiyseniz elbette bunun da avantajları var. Google Analytics ve benzeri ziyaretçi takip araçları sayesinde hangi cihazlardan gelen kullanıcıların hangi linklere tıkladığını, hangi davranış biçimine sahip olduğunu, hangi sayfalarda ne kadar vakit geçirdiğini vb. işinize yarayacak pek çok veriyi elde edip mobil sitenin tasarımında bunlardan faydalanmanız mümkün.

Kullanım Kolaylığı

Daha küçük ekranlı cihazların getirdiği en büyük sorunlardan biri, web sitenizde kullandığınız site içi link sisteminin kullanışsız kalabilmesi. Mouse kullanan kullanıcılar gerek üst menüde gerek f​ooter’​da bulunan linklere tıklayarak sayfalar arasında rahatlıkla gezinebilirken, telefon ekranından kategorilerinize ulaşmaya çalışan ziyaretçiler zorluk yaşabilir. Dolayısıyla dokunmatik ekranlarda kullanıcıların parmak boyutlarına uygun linkler oluşturmak hayati önem taşımaktadır. Kullanıcıların rahatlıkla tıklayabileceği linklerin 28x28 piksel ebatlarında olması gerektiğini söyleyebiliriz. Benzer şekilde, mobil bağlantıların zaman zaman daha yavaş olabileceği de hesaba katılmalı. Bir linke tıklandığında kullanıcıya bir f​eedback​ vermek, ziyaretçinin sayfanın açılacağına dair umudunu kesip başka sitelere yönelmesinin önüne geçecektir. Mouse ile bir metin veya görselin üzerine gittiğinizde orada bir link olup olmadığını anlamak oldukça kolay; ancak aynısını maalesef dokunmatik ekranlar için söyleyemiyoruz. Dolayısıyla kullanıcıların etkileşime geçmesini istediğiniz linklerin tıklanabilir olduğunu ifade etmeli, mümkün olan her yerde butonlar kullanmalısınız. Drop­down​ menüler, mobilde de işleyişini yitirmez, ancak yine aynı şekilde mouse kullanmayan kullanıcılar burada açılır kapanır bir menü olup olmadığını anlamak için bir işarete ihtiyaç duyacaktır. Üst menüyü d​rop­down​ yapmak her ne kadar yerden tasarrufu sağlasa da (ki mobil tasarım için yeri iyi kullanmak oldukça önemlidir) burada kullanışlılığı düşünmek gereklidir. Mouse nasıl eksikliğini hissettiriyorsa klavyenin yokluğu da aynı ölçüde hissedilebilir. Telefon ve tabletlerin küçük klavyeleri, kullanıcıların yazmaktan olabildiğince kaçınmasına sebep olmaktadır. Dolayısıyla ziyaretçilerinizi uzun metinler yazmaya zorlayacak hamlelerden kaçınmalısınız. Ayrıca klavye aktif olduğunda ekranın yarı yarıya küçülmesi de bir dezavantaj teşkil eder. Ziyaretçilerin doldurmasını istediğiniz bir form varsa bunu mümkün olduğunca çok sayfaya bölerek kısa metinler girip “Sonraki sayfa” vb. tuşlarla sayfalar arası geçiş yapabilmelerini sağlamanız faydalı olacaktır. Elbette mobilin birçok zorluğunun yanında avantajları da var. Web sitenizde yer alan tüm telefon numaralarının tıklayınca aranabilir olmasını sağlamak, masaüstü sitelerde yakalayamayacağınız bir fırsat; dolayısıyla bunu değerlendirmenizi tavsiye ediyoruz.

Duyarlı Siteler için Tasarım Önerileri

Yukarıda belirtmiş olduğumuz gibi, burada amaç her cihaza aynı HTML’i sunmak, ancak CSS komutları sayesinde bu içeriği ekran boyutuna göre ayarlamak. En büyük avantajınız tek bir tasarımla her boydaki ekrana hitap edebilmek olduğu için, bu avantajınızı sonuna kadar kullanmanızı öneriyoruz. Yani sitenizin her türlü cep telefonu, tablet ve bilgisayar ekranından mükemmel görünmesini sağlayabilirsiniz; dolayısıyla kendinizi yalnızca iPhone ekranıyla sınırlamak durumunda değilsiniz. Burada web sitenizde yer alacak sayfaları tek başlarına birer bütün değil, onlarca unsurun bir araya gelmesiyle oluşan, modifiye edilebilir bir toplam olarak düşünmelisiniz. Ekran küçüldükçe tüm unsurlar küçülmemeli, bazıları küçülürken bazıları şekil değiştirmeli, hatta bazıları kaybolmalıdır. Yani her bir unsurun varlığını ve biçimini koruyacağı minimum ekran boyutunu belirlemeniz gerekmektedir. Dolayısıyla tek bir tasarım kararıyla aynı içeriği telefonda farklı, tablette farklı, bilgisayarda farklı sunmuş olacaksınız. Tasarım şablonunuzu çıkarırken hangi öğenin ne kadar önemli olduğunu belirleyerek ilk önce hangilerini gözden çıkarabileceğinize de karar vermiş olacaksınız. Burada dikkat edilmesi gereken önemli bir nokta, ekran küçülse de metin içeriklerin puntolarının küçülmemesi. Böylece aynı ekranda daha az içerik sunmuş olsanız da ziyaretçilerin içeriğinizi okumakta zorlanmasını engellemiş olacaksınız. Ayrıca her öğenin en çok ne kadar küçülebileceğini de belirlemelisiniz. Örneğin, görseller kullanıcılara fayda sağlamayacak noktaya kadar küçüleceğine, bir yerden sonra görünmeyebilir; böylece görüntü kirliliğinin ve yer israfının da önüne geçilmiş olacaktır. Veya söz konusu görselin sol tarafı daha önemliyse görselin o kısmının sabit kalması, ekran küçüldükçe görselin sağ taraftan eksilmesi ve yeni açılan bu yere başka bir öğenin yerleşmesi sağlanabilir. Bu tür kararlar, sayfa tasarımının gidişatına ve sayfa içi önceliklerinize bağlı olarak alınmalıdır. Benzer şekilde, masaüstünde sol tarafta yer alacak menü, daha küçük ekranlarda içeriğin en üstüne konumlandırılabilir; çünkü sayfa tasarımını dikey olarak ikiye veya üçe bölmek çok kullanışlı olmayacaktır. Bu nedenle cep telefonu gibi küçük ekranlarda her türlü içeriği tek sütunda vermek akıllıca olacaktır.

 Dinamik veya Paralel Siteler için Tasarım Önerileri

Burada esas sitenize bağımlı olmadığınız için her türlü kararı almakta özgürsünüz; ancak yukarıda da belirtmiş olduğumuz genel kurallara bağlı kalmanız çok önemli. Ayrı bir site kurguluyor olsanız da oluşturmuş olduğunuz içeriğin mümkün olduğunca büyük bir kısmını mobil sitenize dahil etmeye çalışmanızı öneriyoruz.

BÖLÜM 4: TEKNİK OLARAK DİKKAT EDİLMESİ GEREKENLER

Mobil web sitesi uygulamaya geçirilirken, seçilen yöntemden belki de daha çok dikkat etmeniz gereken nokta, bu metodu en doğru şekilde sisteme entegre etmek olacaktır. Doğru yapılmayan bir kurgu, hem mobil cihazından websitenizi ziyaret eden kullanıcıları hem de arama motoru botlarını doğru bir şekilde bilgilendiremeyeceği için ciddi problemler yaratabilir. Bu nedenle, bu işlemlerin aşağıda belirtilen maddeler doğrultusunda dikkatlice kurgulanması gerekmektedir.

1. CSS, JavaScript ve Resim Dosyalarını Erişilebilir Kılın

Mobil kullanımda CSS, JavaScript ya da resim dosyalarının erişimine izin verilmemesi, uzun vadede de listelenme başarısını düşürebilecek, dolayısıyla SEO performansını olumsuz etkileyecek durumlar arasındadır. Bu nedenle aşağıda bahsi geçen maddelere dikkat etmek oldukça önemli görünüyor.

• Google Webmaster Tools dahilinde bulunan "Google gibi getir" aracını kullanarak, Google örümceklerinin sitenizi nasıl taradığını rahatlıkla görebilirsiniz. Bu sayede, ilgili dosyaların erişime açık olup olmadığını görebilirsiniz. Bir diğer alternatif de SEO ajansınızdan ya da personelinizden crawl araçlarıyla analiz yapmasını talep etmek olabilir.
• Robots.txt dosyanızın arama motorlarını doğru bir şekilde bilgilendirdiğine emin olun. Manuel kontrollerin yanı sıra, yine Webmaster Tools üzerinden de bu kontrolleri sağlayabilirsiniz. Bu sayede, botların tüm ilgili alanlara erişiminin olup olmadığını test etmiş olursunuz.
• Google'ın hizmetlerinden birisi olan Mobil uyumluluk testi'ni de uygulayarak, web sitenizin uyumlu bir şekilde sisteme geçip geçmediğini tespit edebilir, olası problemlere müdahale edebilirsiniz.

2. Yönlendirmelerin Doğru Kurgulandığından Emin Olun

Eğer web sitenizin mobil versiyonu farklı bir subdomain'de bulunuyorsa bu problemin yaşanma ihtimali olduğunu belirtmemiz gerek. Örneğin, www.siteadi.com/abc sayfasının mobil versiyonunun doğru bir şekilde m.siteadi.com/abc olarak kurgulanmaması, hem son kullanıcının hem de arama motorlarının negatif etkilenmesine neden olacaktır. Bu konuda dikkat etmemiz gereken noktalar ise şu şekilde:

• Masaüstü versiyonuyla tam eşleşmeyen sayfalara yönlendirmelerin yapılması, en sık karşılaşılan hatalardandır. Google'ın kendi rehberinde açıkladığı görseldeki gibi, masaüstü URL'in her alternatifine girildiğinde (örn: abc.com/ornek), bu sayfanın ilgili mobil versiyonu direkt olarak mobil anasayfaya yönlenmesi, problem yaratan sebeplerin en başında geliyor. Hataları tespit edebilmek adına, Google Webmaster Tools'un Akıllı Telefon Tarama Hataları kısmını dikkatli bir şekilde kullanmanızı öneriyoruz. Bu aracında Google, farklı URL'lerden (anasayfa haricindeki) doğrudan mobil anasayfaya giden yönlendirmeleri tespit ederek, "Hatalı Yönlendirme" sekmesi altında sizlerin bilgisine sunuyor.
• Bir diğer kritik ve akıllarda soru işareti yaratan nokta ise, mobil bir anasayfa bulunmasına rağmen tüm ya da bazı alt sayfalarda bulunmayan mobil sayfanın nasıl idare edilmesi gerektiği. Bu tarafta yapılması gereken işlemi Google kendi rehberinde de açık bir şekilde belirtiyor: "Sitenizdeki bir sayfanın akıllı telefon eşdeğeri yoksa kullanıcıları akıllı telefon sitesinin ana sayfasına yönlendirmek yerine masaüstü sayfasında tutun. Bu durumda, hiçbir şey yapmamak, yanlış bir şey yapmaktan daha iyidir."

Tabii ki bu problemin hiç yaşanmaması adına bazı alternatif yöntemler de mevcut. Bu yöntemlerin başında da responsive tasarıma geçiş yapmak geliyor. Fakat, sanıyoruz ki, yalnızca bu hataların yaşanmasını engellemek, köklü bir değişiklik için yeterli bir sebep olmayabilir. :)

3. Mobil Uygulamanın Tanıtıldığı Reklamları Doğru Konumlandırın

Yukarıda Tumblr'dan bahsederken de gördüğümüz uygulama indirme reklamlarının doğru şekilde konumlandırılması da oldukça önemli. Bunun temel sebebi de kullanıcıların ya da arama motoru örümceklerinin web sitesine geçiş yapamama ya da problem yaşama ihtimali. Dikkat edilmesi gereken en önemli nokta ise şu şekilde:

• Mobil siteye yönlenme esnasında çıkan reklam şeklindeki uygulama indirme linkleri, kullanıcı deneyimini ciddi oranda negatif etkileyen ve arama motoru botlarının asıl sayfaya erişimini engelleyebilen bir faktör. Bu nedenle, neredeyse artık bir çok web sitesinin yaptığı şekilde, üst kısımda bir banner olarak indirme linklerinin belirtilmesi ya da tasarım dahilinde bir buton oluşturularak, kullanıcının oradan uygulama merkezine gitmesinin sağlanması gerekmektedir.

4. Mobil Site Haritasını Kullanmayı Unutmayın

Eğer web sitenizin mobil versiyonu farklı bir subdomain'de bulunuyorsa, sitenizin mobil cihazlardaki versiyonuna özel bir site haritası hazırlanması faydalı olacaktır. Burada temel amaç, arama motorlarını doğru bir şekilde bilgilendirmek ve herhangi bir sebeple listelenemeyebilecek ya da site içerisinden linklenmeyen sayfaların mobil site haritası tarafından bulunmasını sağlayabilmektir. Bu konu hakkında ayrıntılı bilgi almak için buradan yararlanabilirsiniz. Aşağıda tek bir giriş içeren örnek bir mobil site haritası görebilirsiniz:

<?xml version="1.0" encoding="UTF-8" ?>

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"

xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0">

<url>

<loc>http://mobile.example.com/article100.html</loc>

<mobile:mobile/>

</url> </urlset>

5. Tarama Hatası Olup Olmadığını Kontrol Edin

Sitenizin, Google mobil robotları tarafından ziyaret edildiğinde karşılaştığı hataların listelendiği Google Webmaster Tools'da bulunan Tarama Hataları kısmının sıkça kontrol edilmesi oldukça önemli. Gerek sunucu bazlı hatalar gerekse site içerisinde karşılaşılan ulaşılamayan sayfa hatalarının buradan kontrol edilmesi gerekmektedir ve herhangi bir problemde yazılım ekibi tarafından müdahale edilmesi de oldukça kritiktir. Akıllı telefon sekmesini kullanarak Google botlarının erişemediği ya da erişmesine rağmen bulamadığı sayfaları görebilirsiniz. Dört farklı ana madde üzerinden sizlerle paylaştığımız bu rehber dahilindeki temel amacımız, Google'ın 21 Nisan 2015 tarihinde uygulamaya geçirdiği Mobilegeddon güncellemesinden kârlı çıkabilmek adına dikkat etmeniz gereken noktaları göstermekti. Üç farklı tasarım alternatifi üzerinden, farklı uygulamalar ve entegrasyonlarla mobil sitenizi başarılı bir noktaya getirebilmek için, paylaşmış olduğumuz önerileri dikkate almanızda fayda var.

Yazar: Öykü Elitez & Mehmet Aktuğ