Merhaba arkadaşlar, bu blog serisinde sizlere seo hakkında çok önemli bilgiler sunacağım. Elimden geldiğince en ince ayrıntılarına kadar aktarmak istiyorum çünkü, internet üzerinde bulunan seo derslerinin oldukça yetersiz bir düzeyde olduğuna inanıyorum. Öncelikle sunacağım bilgilerin kaynağının büyük bir kısmını, aldığım seo kursundan aktaracağım. Eğer olurda bu yazımı Fatih GÖK hocam okursa, burdan kendisine bolca selamlarımı iletiyorum. İkinci bir kaynağım ise, tamamen kendi deneyimlerim üzerinden olacaktır 🙂 Keyifli okumalar…
Web sitesinin kod yapısına giriş;
Google, web sitelerinin kod yapısına dikkat eder ve güncel olmasına önem verir. Eğer web sitesi yapmaya yeni başlamış iseniz kesinlikle html5 standartlarında bir kod yapısı ile çalışmanız gerekir. Standart kod yapısı aşağıda görüldüğü gibi olmalıdır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Web bulutu - Seo dersleri giriş 1</title> </head> <body> </body> </html> |
Yukardaki Html iskeletinin en üstünde duran <!doctype html> bildirimi, sayfanın html5 standartlarına göre tasarlanacağını ve web tarayıcılarının sayfayı görüntülerken buna göre hareket etmelerini bildirmiş oluyoruz. Dreamweaver gibi editörler bu kalıbı otomatik olarak sizlere sunmaktadır.
Evet html5 olarak kodlama yapacağımıza göre, sayfamızdaki kısımları da html5 standartlarında yapmamız gerekir. Sonuçta, “Bak canım ben html5 tasarım yapıcam haberin olsun” deyip de, yeni güncel kodlar kullanmazsak, gösteripte vermemek gibi bir durum olur, yazdığımız bildirim kodunun bir anlamı kalmaz 🙂
Nedir bu html5 bölümleri hemen bir göz atalım;
Eskiden her kısım için bir div oluşturur ve “header”, “content”, “footer” gibi class veya id’ler vererek çalışırdık. Şimdi ise bunların yerini Header, nav, main, aside ve footer etiketleri almış bulunmakta. kullanımları ise şu şekildedir;
<header>başlık, logo vs..</header> - <nav>Top menü</nav> - <main>Web sitesinin içeriği</main> - <aside>Yan menü</aside> - <footer>sitenin en alt kısmı</footer>
Tasarımlarınızı yaparken sıradan divler yerine bu kalıpları kullanmanız sitenizin kodlarının güncelliğini arttıracaktır.
bir de, <main> içerisinde bulunan kod kalıpları vardır onlar da şu şekildedir;
<article>
<hgroup>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p>
</hgroup>
</article>
Şeklinde html5 kod yapısı oluşturulur. Bir de article içerisinde h1,h2,h3,h4,h5 etiketlerinin tamanının kullanılmasını tavsiye ederim ve H etiketinde geçen anahtar kelimelerin, P etiketinde bulunan paragraf içerisinde de geçmesi çok önemlidir bu konuya yine uzun uzun değineceğim.
Article kullanımının w3.org sitesinde şu şekilde de kullanıldığı belirtilmiştir.
Son olarak bu kod kalıplarına nasıl müdahale edeceğinize gelelim. Css bilgisi olanlar, şu şekilde bu kodlara müdahale edeceğini bilirler;
|
1 2 3 4 5 6 7 8 9 |
<style type="text/css"> header { background:#000; } </style> |
Ama benim tavsiyem, html5 etiketlerine yeni bir class veya id vererek müdahale etmenizdir çünkü bazı etiketler birden fazla kullanılmaktadır. Ayrı bir id ile müdahale ederseniz işiniz kolaylaşır ve sorunsuz bir şekilde ilerlersiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style type="text/css"> #header-top { background:#000; } </style> </head> <body> <header id="header-top"></header> </body> |
Seo derslerinde html5 kod yapısına değindik. Bir sonraki ders, meta etiketleri hakkında olacaktır, görüşmek üzere 🙂
Web bulutu.