Seo Eğitimleri

Seo Eğitimleri 1 – Web sitesinin kod yapısı.

Merhaba, bu blog serisinde sizlere seo hakkında çok önemli bilgiler sunacağım. (kod yapısı) Elimden geldiğince en ince ayrıntılarına kadar aktarmak istiyorum çünkü, internet üzerinde bulunan seo derslerinin oldukça karışık ve 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 eğitimi, kendi araştırmalarım ve deneyimlerimden aktaracağım. 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.

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.

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;

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.

Seo Eğitim Serisi

Etiketler

İsmail Koç

Web & Grafik Tasarımcısı, Mühendis, Yerel Rehber, Google Developers 2019

Bir cevap yazın

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

Başa dön tuşu
Kapalı
Kapalı