Konuyu daha iyi kavrayabilmek için örnek bir senaryo oluşturalım. Diyelim ki bir oyun sitesi oluşturuyoruz. Grafiker tarafından sitenin tasarımı çizildi ve CSS / XHTML olacak şekilde kodlanmak üzere elinize geldi. İşte bu dakikadan itibaren her adımınızda SEO‘yu (Arama Motoru Optimizasyonu) düşünmeli, tasarımı ona göre kodlamalısınız. Bu aşamada genelde yapılan hata ise logonun SEO’ya uygun şekilde kodlanmamasıdır. Gelin beraber bir örnek bir oyun sitesi logosu kodlayalım ve bunu SEO’yu aklımızdan çıkarmadan yapalım.
Logomuz ve Hedeflenen Kelimeler
Sitemiz bir oyun sitesi ve logomuz da solda gördüğünüz gibi olsun. SEO açısından düşünürsek arama motorlarında aratıldığında üst sıralarda çıkmayı istediğimiz kelimeler sırasıyla Oyun ve Flash Oyunlar‘dır. Şimdi sadece bir logoyla bu kelimeleri nasıl vurgulayabileceğimizi görelim.
Yanlış Örnek
Aşağıdaki gibi bir kodla tek yaptığınız sitenize Oyun başlığına sahip bir bağlantı ve resim koymaktır. Burada Oyun kelimesi herhangi bir şekilde vurgulanmamıştır çünkü normal bir bağlantıdan farksızdır.
HTML kısmı:
[php]<a href="index.html" title="Oyun"><img src="resimler/logo.png" alt="Oyun" /></a>[/php]
Doğru Örnek
SEO’lu tasarımlarda başlık etiketleri (h1, h2, h3 vb. ) büyük önem arzeder çünkü arama motorları bu başlıklar arasında girilen verileri, sitenin yoğunlaştığı kelimeler olarak algılar. İşte logomuzu bu başlıkları kullanarak kodlayabiliriz. HTML ve CSS kodlarını aşağıdaki gibi uygularsınız aynı anda hem Oyun hem de Flash Oyunlar kelimelerini vurgulamış olursunuz.
HTML kısmı:
[php]<div id="logo">
<h1><a href="index.html" title="Oyun">Oyun</a></h1>
<p>Flash Oyunlar</p>
</div>[/php]
CSS kısmı:
[php]#logo {float:left;width:200px;height:71px;}
#logo h1 a{display:block;width:200px;height:71px;background: url(resimler/logo.png) no-repeat;text-indent: -999em;}
#logo p{display:none;}[/php]
Sonuç
Yukarıda yazdığımız kod sayesinde ziyaretçi siteye baktığında logomuzu görecektir. Bir arama motoru siteye uğradığında ise kodlara bakacak ve h1 ile ardından içerik olan p etiketleriyle vurgulanmış Oyun ve Flash Oyunlar kelimelerini görecektir. Böylece sitenin bu kelimelere ağırlık verdiğini anlayacak, diğer bir deyişle sitenin içeriği hakkında bilgi sahibi olacaktır.
Arama motorlarında her gün daha üst sıraya çıkmanız dileğiyle…
Bunu ilk defa sizde öğrendim. Teşekkür ederim anlatımınız için
Site tasarımlarında dikkate alınmayan; fakat SEO bakımından çok önemli bir nokta.
Site içerisinde de kullanmış olduğumuz görsellere alt=”tanım” etiketini yazarak SEO uyumlu görseller oluşturabiliriz. Emeğinize sağlık..
bu yararlı bilgi için teşekkür ederim..
Yararlı bilgiler için teşekkürler yakuter. SEO konusunda birçok makale bulunmakta. Bununla ilgili ufak ipuçları ve yapılması gerekenler kategorimde mevcut.
http://www.paymag.net/paymag-seo-dersleri-ve-ipuclari.html
Teşekkür ederim arkadaşlar, beğenmenize sevindim ;)
Aslında şuradaki kaynaktaki EZ-CSS
http://www.bildirgec.org/yazi/web-sayfa-yerlesimleri-layouts-icin
Sayfa yerleşimi dışında bu tür logo ve footer yerleşimlerinin nasıl olacağınada bir örnek olabilir.
@Burak, bu siteyi bilmiyordum. Gerçekten güzel işlemişler konuyu ;)
İlginç bir yazı. Hiç değinilmeyen bir noktaya temas etmişsin. Teşekkürler
display:none; biraz risk taşımaktadır. ;)
@iyinet, ne gibi riskler?
Matt Cutts, sitenizde ziyaretçilerinize göstermeyeceğiniz şeylere, neden sitenizde yer verirsiniz diye bir soru soruyor. :) ve sonrasında ziyaretçilerinizin görmesini istemiyorsanız, o zaman yer vermeyin. Sitenizin bir bölümünü display özelliği ile gizlemek (veya margin-top:-8000px gibi) risklidir. Bu metod her ne kadar özellikle css tabanlı menülerde kullanılsada, botların display:none özelliğini hangi amaçla kullanıldığını ayırt edebileceklerini düşünüyorum.
h1,2 ve 3 kullanımı gerçekten önem taşımaktadır fakat bu kullanımı oldukça masumane ve dikkat çekmeyecek bir şekilde yapmamız gerekiyor.
Diğer bir bakış açısı ile konuyu ele alırsak, h (header) başlık demektir. Başlıktan sonra içerik gelir. Fakat örneğinizdeki kullanımda, ana başlık var ve altında alt başlık yer alıyor. Mantıken bu kullanımı, sitenizde yer alan makalede yapmanız rahatsız edici olmaz aksine oldukça da iyi olur fakat kaynak koda baktığımızda bu kullanımın çevresinde herhangi bir metin olmayacak. (logoda kullandığınız için) Dolayısı botlar bu duruma biraz agresif yaklaşabilir.
Örneğinizdeki h1 kullanımı bence doğru fakat h2nin kullanımı risk taşıyor kanaatimce.
İyi çalışmalar dilerim.
Söylediğinde tamamen haklısın. Bu nedenle makaleyi güncelledim ve h2 yerine paragraf etiketi (p) kullandım. Kısacası başlıktan sonra içerik mantığı. Böyle daha doğru sonuç elde edebileceğimize inanıyorum.
Daha önce site logosunda paragraf kullanım denemesini yapmamıştım. Bir ara deneyebilirim :)
Yurtdışında gördüğüm siteler genelde logolarını hep bu söylediğim şekilde kodluyordu. Örneğin Smashingmagazine h1 id="logo" şeklinde kodlamış. Paragrafı da görmüştüm bir yerlerde ama hatırlamıyorum. Sadece severek kullanıyorum :)
Bu zaman’a kadar hiç değinilmemişti bu konuya. H1 ve H2 tag’lerinin önemini bildiğim halde bu şekil kullanmamıştım bende.
Teşekkürler Erhan :)
Sitenizde sürekli faydalı bilgiler yayınlıyorsunuz, örnek olarak bu logo ipucunu daha önce hiçbir yerde okumamıştım..
Teşekkürler Erhan Bey.
H1 tag’i olmuş ama H2 olmamış.
Mustafa söylediğinde haklısın. Bu nedenle yazıyı güncelledim. SEO açısından başlıktan sonra içerik gelmesi mantığını düşünerek paragraf etiketi (p) kullandım. Böyle daha doğru sonuç elde edebileceğimize inanıyorum.
görünmez yapılan içerikleri sevmem ben diyo galiba google… bence görünmez içerik riskli bi deneme… kızmazsa fayda sağlayacağı kesin…. ama kızarsada kötü olur :)
yok be google sesini çıkartmıyor. Spam için, hacklink için geri bildiri kısmı ayarlamış.Şikayet ediyorsun fakat her hangi bir ceza vermiyor siteye.
Güzel bir bilgi teşekkürler
Yeni tasarımda nasip olursa bu yöntemi kullanıcaz.
Bilgi için teşekkürler.
text-indent:-10000px kullanımı daha doğru olcaktır.
Güzel bir paylaşım teşekkürler hocam.
Verdiğiniz bu yararlı bilgi için çok teşekkür ederim..
extra bir paragraf eklemek yerine span etiketi arasında ve h1 içerisinde aşağıdaki şekilde kullanarak daha iyi performans aldığımı düşünüyorum. yanılıyor muyum?
<h1 class="logo"><span>Site Açıklaması</span></h1>
h1.logo { font-size: 250%; line-height: 1; height: 75px; width: 200px; }
h1.logo a { background: url(../images/logo.png) no-repeat left; display: block; height: 75px; width: 200px; }
h1.logo a span { display:none; }
logo eğer resimse h1 tagları içinde kullanmak önerilmiyor diye okumuştum
http://csswizardry.com/2010/10/your-logo-is-an-im…
Çok güzel bir makale olmuş. Teşekkürler.
sizce bunu logoya uygulamakla texte uygulamak arasında ne gibi bir fark var?
mesela ben sitemin sol tarafında tasarım gereği sitenin title ve sloganını kullanıyorum, bu seolu logoyu da headerın sağına aldım. ikisinin de olmasının bir sakıncası var mı ?
yada şöyle sorayım: her wordpress temasında bulunan headerın sol tarafındaki kendi sitemizde link verilen site ismi ve site sloganının olduğu yer yeterli midir, yoksa bu taktik site sloganını falan headerda kullanmayan, sadece slogan kullanan siteler için mi geçerlidir?
teşekkür ederim :)
@yakuter , örneğinize ek olarak
#logo h1 {
margin: 0px;
padding: 0px;
}
css kodunu eklediğimizde yerleşim açısından uygun olmakta ve tüm tarayıcılarda düzgün çalışmaktadır. Tabi il baştan reset css kullanmadığımızı farzederek.. hatalıysam lütfen düzeltin. Makale için çok teşekkür ederim.
Resimlerde seo açısından çok faydalı oluyor kesinlikle yararlı bir bilgi. teşekkürler.
@serdar arkadaşımızın dediği de içime kurt düşürmedi değil.. denemek gerek
Kullanılması gereken çok önemli bir yöntem. Teşekkürler.
gayet faydalı oldu sağolun
SEO heryerde ya. :) cidden iyi öğrenmek lazım bu sektörü.. Yazı için Teşekkürler