Sitenizi 5 Dakikada Mobil Uyumlu Hale Getirebilirsiniz

Özellikle 2000’li yılların başlarında hayatımıza çok hızla giren bilişim ve iletişim teknolojisi tüm alışkanlıklarımızı alt üst ettiği söylenebilir. İlkbaşlarda şuanki kadar gelişmiş olmayan bu araçlar ve uygulamalar her geçen gün değişip, yenilenirken bazen bizlerinde ister istemez, bazende mecbur kalarak peşinde sürüklemektedir. Web tasarım ve internet yayıncılığı uğraşan, hobi yada bu işi ticari amaçlı, kazanç amaçlı yapan insanların son zamanlarda kulağı sürekli google’den gelecek haberlerdedir. Yeni çıkacak bir algoritma haberi, google güncellemesi, değişen sıralar vs derken yalan değil, biz yayıncıları güzelce hizaya sokmuş durumdadır. Ama her önerdiği, her uymamızı istediği şeyler insanlar için gerekli ve önemlidir. Şimdi bizde sitelerimizin mobil cihazlara uyumlu olmasını istemektedir. Gerçi bunu yanlış hatırlamıyorsam ilk olarak 2 yıl önce istemişti artık zamanı geldi, kazanmak istiyorsanız bu isteğime uyarsınız demeye başladı.

Mobil Site

Mobil Sitemi, Mobil Uyumlu Sitemi?
Google ilk olarak konuyu ortaya attığında parası ve yeterli gücü olanlar ilk etapta mobil cihazlar için yazılımlar geliştirdi. Android ve İphone uyumlu bu yazılımlar cihazlara yüklenip kullanılmaktadır. Asıl mobil site bu olup, masraflı ve bir okadarda zahmetlidir. Normal sitenizden ayrıca mobil içinde içerik girmeniz gerekmektedir. Başarılı bir haber sitesine sahipseniz sizin için ideal olabilir. Ama benim gibi günlük ziyaretçisi 1K olan biri için gereksiz zaman kaybıdır. Google’de bunun farkında olacakki mobil site yapmak zorunda değilsin hacı siteni mobil cihazlara uygun hale getir demektedir.

Mobil Cihazlardan Sitelere Girilmiyor mu?
Şuan akılsız telefonu olan insan yok denencek kadar azdır. Bu cihazlardan google’de arama yapabilir çıkan sonuçlarda dilediğiniz siteye girebilirsiniz. Örnek https://www.sachastaliklari.com sitesi sağdan soldan genişlik olarak 990px olarak tasarlanmıştır. Bu siteye girdiğinde site mobil yada mobil uyumlu değilse cihaz bunu alıyor 990px’den 320px’ düşürüyor. Bunu daraltma yöntemi ile yapmaktadır. Bu aşamada tabiki yazılarınız bazen okunmayacak kadar küçüllüyor. Cihaz sahibi onları okumak için parmakları ile ekranı genişletmeli vs yoksa mobil uyumu olmayan siteye girilmeme gibi bir sorun yoktur. Google diyorki ya hacı işte sitene giren rahatça içeriği incelesin, gerekli bilgiyi alsın. Ekranı büyüt, küçült, sağa kaydır, sola kaydır uğraşmasın diyor. Bana bunu yap yeter söz siteni arama sonuçlarsa mobil uyumlu olarak göstereceğim diyor.

Biraz CSS Bilginiz Varsa Bu İş Tamam
Dünya genelinde wordpress tabanlı bir siteye sahipseniz zaten bir temanız ve kendi css dosyası vardır. Temanız yeni nesil değilse tasarımcı muhtemelen % yerine px olarak boyutlandırma yapmış olacaktır. İşte bunu düzenlemek için az CSS bilgisi yeterlli olmaktadır. Yoksada sorun değil baktığımda öğrenirim diyorsan hemen sitenizi tema editörüne girerek işlemlere başlayabilirsin. Öncelikle CSS kodlarınızı bir yere yedekleyin bozulunca geri yüklersiniz.

Metaların Arasına Eklemeniz Gereken Kod
Arama motorları ile sitenizin iletişim meta taglarla yapılmaktadır. Başlık, açıklama, site sahibi vs bir çok bilgiye yer verdiğimiz bu kısımda aynı zamanda google benim sitem mobil uyumlu dediğimiz bir kod olmalıdır. Aşağıda yer alan kodu <head>…</head>arasına ekleyerek işleme başlıyoruz.

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

Siteniz Mobil Uyumlumu Kontrol Edin?
Öncelikle gerek bir akıllı telefon, gerekse googlenin sağladığı araçlar ile sitenizin mobil uyumlu olup, olmadığını sadece 30 saniye gibi kısa bir sürede öğrenebiliriz. Yandaki linke https://search.google.com/test/mobile-friendly?utm_source=mft&utm_medium=redirect&utm_campaign=mft-redirect tıklayarak sizde sitenizin durumunu öğrenebilirsiniz. İşlem sonucu kırmızı çıkarsa maalesef uyumlu değildir.

Px Tasarımları % Olarak Değiştirecez
İşimiz muhtemelen %99 sadece CSS dosyamızla olacak olup, size olayı anlatmaya çalışayım. WordPress siteler genelde 4-5 ana bölümden oluşur. Bunlar header (üst) Content (İçerik Alanı) Footer (Alt) Sidebar (Sağ yada sol kısım) bir çok tasarımcı bu bölümleri bir div içine (Container) kapsayıcı div içine almaktadır. Bu genelde body kısmında olmaktadır. Muhtemelen 990px yada o arada bir rakam olabilir. 100% olarak girilmişse sorun yoktur. Rakam ve px olarak girişmişse onu 100% şeklinde değiştirebiliriz. Bu aşamadan sonra sitenizi kontrol ediniz. Ekranı tamamen kaplıyorsa burada dilerseniz maksimum bir genişlik için sınır koyabilirsiniz. Css kısmına max-width:990px; şeklinde bir ibare koyduğunuzda siteniz 990px boyutunu geçmeyecektir. En büyük ekrandada girse bu boyutla görülür.

Bu işlemi diğer iç kapsayıcı divler içinde yapmalıyız. Örnek içerik alanı 800px olup geri kalan 190px’lik kısmı ise sidebara vermiş olabilir. Burada iki kişinin paylaştığı bir yer olup, content’e 75%-80% verebiliriz. Geri kalan %20-%25’lik alanı ise sidebara sağ menüye bıraktık. Onun piksellerine bilerek dokunmuyorum, çünkü benim müdahale edeceklerim 300px ve üzeri olanlardır. Çünkü en küçük mobil cihazın boyutu 320px gibidir. Aynı şekilde header, footer içinde uyguladığınızda siteniz mobil uyumlu hale gelecektir.

Bootstrap Kütüphanesi Kullanın
Sıfırdan mobil uyumlu site yapmanın en kolay yolu olan Bootstrap kütüphanesi bundan böyle bizimde çok işimize yarayacaktır. Sitenize ekleyeceğiniz araçlar, tablolar mobil uyumlu olmalı, bu işlemleri bootstrap ile çok kolay bir şekilde yapabilirsininiz. Örnek bir slider ekleyeceksiniz. Sadece 30 saniye gibi bir sürede kolayca ekleyebilirsiniz. Aynı zamanda mobil uyumlu olan bu araçlar işini oldukça kolaylaştıracaktır.

Bootstrap Nedir, Nasıl Kullanılır?
jQuery tarzı bir sistem olup, hazır JS ve CSS kütüphanesi ile size sadece kodların kısa yolunu kullanmak kalıyor. Bu konuda daha fazla bilgi edinmek isteyenler için yararlı olacağını umduğum bir video ekliyorum. Anar Samadov tarafından hazırlanan Bootstrap anlatım videosunun ilki aşağıda olup, devamını merak edenler içinde http://www.anarsamadov.net/kategori/bootstrap bu linkten devamına ulaşabilir. Kesinlikle bilmeniz, uygulamanız gereken güzel bilgilerdir.

WordPress mobil site hakkında aktaracaklarım bukadar olup, ilerleyen zamanlarda Repsonsive uyumlu video ve resim ekleme konularınıda paylaşacağım. Kolaya kaçmak isteyenler içinde WordPress Wp-Touch gibi eklentiler sitenize geçici mobil çözümler sunar. Ben pek tavsiye etmediğim için çok fazla değinmedim.

About SEO Uzmanı Mustafa Gövercin

Merhaba arkadaşlar ben SEO uzmanı Mustafa Gövercin yaklaşık 20 yıldır İnternet siteleri ve SEO konusunda kendimi geliştirmeye çalışıyorum. İnternet siteleri ile tanışmam 1999 yılına uzanmaktadır. Windows 95 işletim sisteminin olduğu ve harici depolama aracı olarak 1.44 MB alanı olan disketli bilgisayarlarla başlamıştım.

Mustafa Gövercin
Esenyurt Belediyesi kültür merkezinde öğrendiğim bilgisayarı o zaman yeni açılan ve hızla yaygınlaşmaya başlayan İnternet kafe türü yerlerde geliştirme imkânı bulmuştum. Çünkü kendime ait ne bilgisayar nede İnternetim vardı. İnternet kafede insanlar o dönemin en ünlü Chat (sohbet) programı Mirc ve ICQ ile vakit geçirirken ben Word ile yazı yazarak parmaklarımı hızlandırmaya çalışıyordum.

Sonrasında İnternet sitelerini incelemeye ve onların nasıl yapıldığını merak etmeye başlamıştım. Karşıma HTML işaretleme dili çıktı. O zaman henüz CSS stil dili bulunmuyordu. Biraz oradan bilgi, biraz bir yerden kod çalma derken site olamayacak kadar kötü siteler yapmaya başlamıştım.

İlk sitem sadece 10MB hosting olan bedavaweb.gen.tr olduğunu söylemeliyim. Eskiden free hosting kelimesi en çok aranan kelimeler arasında yer alıyordu. Çünkü hosting fiyatları gerçekten fahiş fiyatlarla satılıyordu. Depolama alanı ise oldukça azdı. İnsanlar bu nedenle özellikle yabancı kaynaklardan ücretsiz hosting alarak bir şeyler yapmaya çalışıyordu. Hatta bu hizmeti verenlerin büyük bir bölümü sitenize rahatsız edici reklamlar koyardı. Reklam koymayanlar ise çok kaliteli oldukları söylenemez. Bende Atspace.com sitesinden 50MB fakat MYSQL veritabanı olmayan birkaç hosting aldım. Halen o sitelerin açık olduğunu söyleyebilirim. Bu nedenle Atspace firmasına yürekten teşekkür ediyorum.

Toplistler ve Dizinler Çok Yoğun Kullanılıyordu

Google 1998 yılında kurulmasına karşın tam olarak etkin hale gelmesi 2002 sonrası olmuştur. Biz o süreçte sitelerimize trafik çekebilmek için yerli ve yabancı toplist, dizin sitelerini kullandık, o nedenle sitelerin alt (footer) kısmı toplist ve dizinlerin verdiği banner çöplüğü haline gelirdi. Çünkü bir toplist ya da dizinde siten yer alması için o banneri eklemek zorunda kalıyorsun. Tabii ki şuan bu tür siteler tamamen yok olmasa bile sayıları bir elin parmakları kadar az diyebilirim. Arama motoru olarak Yahoo.com daha eski fakat ABD’den başka ülkelere hayrı yok diyebilirim.

Eskiden SEO Diye Bir Şey Yoktu

Çünkü Google algoritmaları çok amatörce çalışıyordu. Bir kelimede ilk sayfaya gelmek için Title kısmına yazman yeterli olurdu. Daha fazla kelimede yer almak için kelimeler arasına virgül koyman yeterli diyebilirim. Şuan 60-70 karakter olan Title (başlık sınırı) eski sistemde title etkili olduğu için insanlar 600-700 hatta daha fazla başlıklara yer verirdi. Çok iyi hatırlıyorum sitemin biri Hülya Avşar kelimesinde ilk sırada çıkıyordu. Hülya Avşar ile ilgili hiçbir içerik ya da görsel olmadığı halde! Çünkü title Hülya Avşar yazması yeterli oluyordu.

2004 Yılında Google Adsense İle Kazanmaya Başladım

Bu işe başladığım ilk zamanlarda bu işlerden para kazanmayı hedefliyordum. İlk olarak kitapyurdu.com gibi sitelerin reklamını alarak başladım. Fakat biriken paramı hiçbir şekilde ödemediler. Şuan büyük bir şirketiz diye övünseler bile geçmişte benim gibi insanların küçük meblağ olmasına karşın ödemedikleri ve hiçbir şekilde cevap vermedikleri haklarını eminim unutmazlar.

Tabii ki böylesi başarısız Türk sponsorlar sonrası Google Adsense Türkiye’de de başvuru almaya başladı. Bende kayıt oldum ve reklam yayınlamaya başladım. İlk ödemem 1400$ değerinde olmuştu (birkaç aylık reklam yayını sonrası) çek gönderdiler. O zaman Havele vs yoktu, çek gönderdiler ama ne yapacağımı bilemiyorum. Bankaları dolaşmaya başladım. Çözüm bulan banka neredeyse hiç çıkmadı. Hatta Ziraat Bankasında görevli bir ihtiyar artık sinirimi dayanılmaz hale getirmişti. Koydum önüne bakmadan bile ne bu diyerek artistçe bir yaklaşımda bulunmuştu. Neyse ki Akbank görevlisi durumu anladı ve sorunu çözdü. Çeki bankaya veriyorum 20$’da işlem ücreti ödüyorum. 1 Ay sonra çekin ödemesi hesabıma geçiyordu.

Eğitim, Moda, Turizm Siteleri Yaptım

Google Adsense ile kazanmaya başlayınca artık sitelerimin sayısını artırmaya karar verdim. Bu kapsamda başlıkta da belirtildiği gibi eğitim, moda ve turizm alanında siteler yaptım. Fakat şuan ki kadar başarılı içerik oluşturduğum söylenemez. Bu nedenle sitelerim birçok algoritmadan zarar gördüler. Bunlar benim için aslında engel ve tecrübe oluyordu. Böylece Google’yi daha iyi anlama ve kurallara adapte olmayı öğrendim.

Sağlık Alanında Hizmet Vermeye Başladım

2009 Yılında Webmastersitesi.com yöneticiliği yaparken bir iş ilanı konusu açıldı ve ben başvuru yaptım orada başladım. Tek şubesi olan bir sağlık merkeziydi. Başladığım o işte 10 yıl geçti ve halen devam ediyorum. 1 Olan şube sayısı 3 tanesi İstanbul’da olmak üzere 6’ya yükseldi. Bu süreçte yaklaşık 100 sitenin tasarım ve SEO işlemlerini gerçekleştirdim.

Sağlık Alanında İçerik Oluşturmayı Öğrendim

En sevdiğim şeylerden biri haline gelen sağlık alanında yazı yazmak, öğrenmek, öğretmek daha önce yaptığım işlerin tümünü geride bıraktı diyebilirim. Çünkü bazı hastalıkların çok kolay nüfus ettiğini öğreniyorsun. İnsanlar çok basit, çok kolay önlemlerle hastalıklardan korunabileceğini öğreniyorsun. Bu bilgiyi bir an evvel insanlarla paylaşmak için heyecanlanıyorsun. Bu nedenle sağlık alanında her yazıyı yazabilirim. Tabii ki henüz ilgilenmediğim alanlarda önce araştırma ve öğrenme süreci olacağı için bazen 2-3 saat geç bitebilir.

Bundan Sonraki Çalışma Alanım Sağlık Siteleri

Bugüne kadar yaptığım işler arasında en keyiflisi olan sağlık ve doktorlarla bir arada çalışma güzelliğini devam ettireceğim. Bunda sonra her işi yapmak, her sektörde yer almak yerine sadece sağlık sektöründe olarak, hastaneler, klinikler ve doktorların İnternet siteleri ve SEO çalışmalarını yapacağım. Çünkü severek yaptığım bu işte daha başarılı oluyorum. Böylece hizmet verdiğim kurum, kuruluş ve bireylere faydalı oluyorum.

4 comments

  1. Aynı şekilde header, footer içinde uyguladığınızda siteniz mobil uyumlu hale gelecektir.

  2. Özür dilerim eklentileri belirtmeyi unuttum 🙂

    Akismet
    AMP
    Google Analytics by MonsterInsights
    Google XML Sitemaps
    LayerSlider WP
    Simple Tags
    W3 Total Cache
    Jetpack
    WP-Optimize
    WPFront User Role Editor
    Yoast SEO
    Zopim Widget

    Tekrar Saygılarımla.

  3. arkadaşım, ellerine bilgine sağlık. sabahtan beri bi türlü başa çıkamadığım konuyu öyle net anlatmışsın ki, sonunda oldu. Bu yazıyı hangi tarihte yazdın bilmem ama çok işime yaradı, helal sana dostum

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir