Wordpress

Wordpress Yakuter

RT @foxy_up: 3 Kişiye 1'er yıllık domain ve hosting çekilişi | http://t.co/YSDwxTlm Twitter

1187 takipçi

Tasarımlarda SEO’lu Logolar Kodlamak

15 Mayıs 2010

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

Oyun 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ı:

<a href="index.html" title="Oyun"><img src="resimler/logo.png" alt="Oyun" /></a>

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ı:

<div id="logo">
	<h1><a href="index.html" title="Oyun">Oyun</a></h1>
	<p>Flash Oyunlar</p>
</div>

CSS kısmı:

#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;}

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…

Benzer Yazılar

Erhan Yakut

www.yakuter.com

Genç yaşlarda programlama ile tanıştı ve Delphi ile başladığı programlama macerasına şuanda PHP, SQL, Javascript, AJAX, CSS, XHTML teknolojileri ile devam etmektedir. Elektrik - Elektronik bölümü mezunu olan "yakuter" 2006 yılından itibaren yakuter.com'un yazarlığını yapmaya başlamıştır.

Sponsor Olmak İstiyorum!

Bu Yazıya Ait Yorumlar

Ahmet
15 Mayıs 2010

Bunu ilk defa sizde öğrendim. Teşekkür ederim anlatımınız için

Arslan
15 Mayıs 2010

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..

Erdemir
15 Mayıs 2010

bu yararlı bilgi için teşekkür ederim..

Paymag Online
15 Mayıs 2010

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

yakuter
15 Mayıs 2010

Teşekkür ederim arkadaşlar, beğenmenize sevindim ;)

Burak YILDIRIM
15 Mayıs 2010

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.

Emrah
15 Mayıs 2010

İlginç bir yazı. Hiç değinilmeyen bir noktaya temas etmişsin. Teşekkürler

yakuter
15 Mayıs 2010

@Burak, bu siteyi bilmiyordum. Gerçekten güzel işlemişler konuyu ;)

iyinet frmtr trkygnclr
31 Mayıs 2010

display:none; biraz risk taşımaktadır. ;)

yakuter
01 Haziran 2010

@iyinet, ne gibi riskler?

Emir Karşıyakalı
03 Haziran 2010

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 :)

Doktor Yakup
04 Haziran 2010

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.

mustafa
06 Haziran 2010

H1 tag’i olmuş ama H2 olmamış.

iyinetfrmtr
09 Haziran 2010

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.

yakuter
09 Haziran 2010

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.

yakuter
09 Haziran 2010

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.

iyinetfrmtr
09 Haziran 2010

Daha önce site logosunda paragraf kullanım denemesini yapmamıştım. Bir ara deneyebilirim :)

yakuter
09 Haziran 2010

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 :)

serdar
14 Haziran 2010

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 :)

Seo
15 Haziran 2010

Güzel bir bilgi teşekkürler

MyBB
04 Ağustos 2010

Yeni tasarımda nasip olursa bu yöntemi kullanıcaz.
Bilgi için teşekkürler.

MMMM
16 Ağustos 2010

text-indent:-10000px kullanımı daha doğru olcaktır.

Seo
19 Ağustos 2010

Güzel bir paylaşım teşekkürler hocam.

SEO danışmanlığı
04 Eylül 2010

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.

web tasarım
27 Eylül 2010

Verdiğiniz bu yararlı bilgi için çok teşekkür ederim..

ezoryak
02 Ekim 2010

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; }

Hamza ERBAY
20 Ekim 2010

logo eğer resimse h1 tagları içinde kullanmak önerilmiyor diye okumuştum
http://csswizardry.com/2010/10/your-logo-is-an-im…

Gürkan
02 Kasım 2010

Çok güzel bir makale olmuş. Teşekkürler.

misafir369
07 Kasım 2010

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 :)

Kemal
07 Aralık 2010

@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.