Seo dersleri, ders 1 - Web sitesinin kod yapısı. | Web bulutu

Seo dersleri, ders 1 – Web sitesinin kod yapısı.

web sitesinin kod yapısı seo dersleri

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

seo-dersleri-article-kullanimi
seo-dersleri-article-kullanimi

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

Bir önceki yazımız olan Scroll aşağıya indikçe efektli açılan divler / Resimler. başlıklı makalemizde animate css, div efekt ve scroll efekt hakkında bilgiler verilmektedir.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir