Merhaba arkadaşlar.. Bu yazımda, saat sabahın 4 ünü geçerken aklıma gelen birazcık kod bilgisini sizlere aktarmak istedim.. Öyle çok olduğunu sanmıyorum ama birkaç tane de olsa takipçim varsa muhtemelen dün geceden sabaha kadar siteye giremediler.. Bende giremedim çünkü ihs sunucularında bulunan hostingimiz ve ihs nin belkide ayda yılda bir yapacağı IP değişikliği durumu dün geceye vurdu.. Her neyse bu yüzden bugün 3. kez alexa da gerilemişken hem biraz özgün tarz yapalım hem de ziyaretçiler off yeni birşey yok deyip çıkmasınlar hem hem hem de acayip bir paylaşma duygusu kabarmış durumdayken blogum da bundan istifade etsin dedim..
Arkadaşlar, bu semantik web denilen web 3.0 ya da anlamsal web denilen şeyi aslında öyle büyüttüler ki sanki internet siteleri kalkıpta bizimle iki kadeh rakı içecekmiş gibi hissetmiştim bir an.. Öyle ahım şahım bi özellik olmasa da web girişimcilerinin özelilkle de google’in üstünde durduğu semantic kavramı aslında iyi de birşey.. Bu tamamen web kod yazıcılarına uygun, onların anlayacağı ve uygulayacağı türden bir özellik olarak geldi.. Semantic anlamsal verileri, site içerisindeki kodları Arama motorlarının siteyi anlamalarını sağlayan temiz kodları girebilme sanatıdır dersem eğer, semantic webe belki küfretmiş olurum belki de ulan web 3.0 hakkında değişik bir yazı yazmak için saçmalamış denilmektende kaçamam.. Bu yüzden semantic web’in getirdiği bir özelliktir diyip konuyu bağlıyorum.. Bahsedeceğim konu temiz kodlar kullanarak arama motorlarına bilhassa Google’a web içeriğinizden bahsedin derim.. Seo alt yapısında aslında sadece head etiketlerinde bitmediğini söylemeliyim.. Birkaç makalede h1 , h2, h3 gibi başlıklar koyun gibisinden tüyolar vardı ben bunları toplayıp kendi bilgilerimi de birleştirip uzunca bir makale oluşturayım diyorum ve bir türlü başyalayamadığım örneklerime başlıyorum.ilk olarak;
1. Gereksiz <div> etiketlerini kaldırın!

Bir çok web sitesinde görüyorum ki , <div> etiketininin içerisinde <form> ya da <li> , <ul> gibi etiketler kullanılmakta.Bu kullanım şekli kodlarınızı botlardan gizlemekten başka bir işe yaramaz.. Aşağıdaki resimde göstereeğim tipi uygularsanız, o içeriğin neyi anlattığı daha açıklayıcı olacaktır;
Örnek 1;

Aşağıdaki örnekte <div> etiketini kullanmadan da form oluşturabileceğiniz bir tutam kod var..

Örnek 2;

Bazen, <div> etiketinin içerisine başka bir <div> etiketi daha yerleştiririz. Bunu yapmak yerine her bir <div> kalıbını tek tek nitelendirirsek hem daha temiz kodlara hem de kolay anlaşılabilir, bir kaynağa sahip oluruz.

2.Anlamlı Biçimlendirme Kullanın

En başta dediğim gibi bir yerde (şu an hatırlamıyorum) h1, h2, h3 gibi etiketleri kullanın diyen bir arkadaşımız vardı.. Onun da dediği gibi başlık etiketleri indexleme açısından çok önemlidir ve bir nevi başka sayfalar gibi algılanırlar.. Google sizin bir sayfanızı sadece içeriğindeki meta etiketleriyle algılamaz. Kullanıcının arama yaptığı kelimeye göre içeriğinizden kelimeleri açıklama grubunda gösterebilir. Bu açıklama gruplarında başlık etiketleri ön plandadır. Eğer anlatmak istediğiniz konuyu h1, h2, h3 gibi başlık etiketleri kullanarak yaparsanız tercih edilme olasılığınız yüklecektir.
Örnek;


3. <div> Etiketini kullanmamaya özen gösterin!

Arkadaşlar, özellikle html diline yeni başlamış ve div etiketinin yararlarını yeni yeni öğrenmiş webmasterların kaybettiği nokta burası oluyor işte.. Tamam <div> etiketi çok yararlıdır, her zaman kullanabiliriz, fakat yukarıda da dediğim gibi, eğer bir paragraf, kutu ya da bir form oluşturacaksanız bunu bir katman içerisinde göstermek zorunda değlisiniz.Aşağıdaki örneklere bakarsanız ne demek istediğimi daha iyi anlayacaksınız.
Örnek 1:

breadcrumb navigasyonunu kullanırken, <div> etiketinin hiçbir işlevi olmaz. Bunun yerine p kullanarak paragraf niteliğini oluşturabilirsiniz.

Örnek 2:

Aşağıda ki örnek de hem gereksiz <div> etiketini kullanmamaya hem de CSS yi daha ufak bir hale getirmeye dairdir.

4. Listeleme Şeklini Kullanın

Yukarıda bahsettiğim gibi, h etiketinin yanında listeleme şekli de yine bizim açımızdan yararlı bir kod kullanımıdır.Aşağıda gösterdiğim biçimde bir listeleme oluşturursanız, kapsama alanınız genişler her yerde çekersiniz =)
Örnek;


5. <div> Etiketini Kapatıyoruz

CMS sistemlerinin temalarını kullanırken belki aklınıza gelmiştir, ulan adam ne diye <!-- /yorumlar -->, <!-- /content -->, <!-- /sidebar --> kapanış mesajları veriyor ki.
Bu sistemin amacı kodlama yaparken, size yardımcı olur arkadaşlar.. Bu şekilde açıklamaların hiç bir zararı yoktur ve size yardımcı olacaktır. Kod satırında eğer özellikle not defteri gibi tek renkte yazılar gösteren bir program kullanıyorsanız, neyi ne zaman kapattığınızı görür hata yapma riskiniz azalır ve de zamandan kazanırsınız.
Örnek 1:


Sonuç

• Minimum <div> etiketi kullanın.
• <div> etiketini öncelikle header, content, sidebar, ve footer gibi durumlarda kullanın.
• İçerik semantic HTML kodlarından oluşmalı, gereksiz <div> leri silin.
• Yardımcı olabilmesi için etiket kapandı mesajlarını girin.
• Listeleme kullanın.

Kaynak (Kendi sitemden Kendi yazımdır.)