Erhan Yakut Software Developer @Binalyze | Founder @Passwall | Golang Enthusiast | Open Sorcerer

Tasarımlarda SEO’lu Logolar Kodlamak

1 min read

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

OyunSitemiz 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…

Erhan Yakut Software Developer @Binalyze | Founder @Passwall | Golang Enthusiast | Open Sorcerer