SEO Uyumlu HTML Kodlamanın Detayları

SEO uyumlu web site için yazılarda ve sayfalarda title tag, meta description, header tag, anchor text gibi sıkça kullanılan HTML kodlarının kullanılması son derece önemli ve kaçınılmazdır.

Bu HTML etiketleri bir içerikle ilgili önemli bilgileri Google, Bing, Yandex gibi arama motorlarına belirtir. SEO uyumlu HTML kodlamanın detaylarını bu makalede paylaşacağız.

HTML Nedir? HTML Programlama dili midir?

HTML (Hiper Metin İşaretleme Dili) en çok kullanılan web dili olması sebebiyle çoğu kişi tarafından programlama dili sanılabilir ancak bilinenin aksine HTML bir programlama dili değil metin işaret dilidir. HTML web sayfasının nasıl gösterileceğinin yapısını ve öğeleri tanımlar. HTML kodları tarayıcı (Browser) tarafından okunur ve yorumlanır.

HTML kodları tek başına bağımsız olarak çalışamadığı ve bir tarayıcı tarafından okunup ekrana gösterilmesi gerektiği için programlama dili sınıfına girmez. HTML kodunu okuyup çalıştırma işlemini yapan tarayıcıdır Html’in buradaki görevi tarayıcıya bir web sayfasının hangi kısımlarının başlık, paragraf, açıklama, link, resim vs. olduklarını göstermektir.

Programlama dili kategorisine girmemesi önemli olmadığı anlamına gelmez aksine her web sitesi tarafından kullanılan ortak dildir ve bu sebepten oldukça önemlidir ve SEO uyumlu web tasarım için HTML bilinmesi gereken en temel dildir.

Html’in görevlerini sıralayacak olursak şu şekilde gösterebiliriz:

• Sayfanın genel yapısını belirtir ve tarayıcılarda görüntülenmesini sağlar.
• Arama motorlarına sayfa hakkında ve içeriğin önemli kısımları hakkında bilgi verir.
• Görsel, yazı ve video gibi öğelerin sayfa içerisinde kullanılmasını sağlar ve sayfanın hangi kısmında yer alacağını belirtir.

HTML her web sayfasının kullandığı bir dildir. Dolayısıyla HTML kodlarını iyi anlamak ve bilmek her web sitesi sahibi için gereklidir. SEO ile ilgileniyor ya da web sitelerine meraklıysanız SEO uyumlu HTML kodlarını iyi tanımak başladığınız bu yolculukta size büyük katkılar sağlayacaktır.

HTML web sayfasının iskelet sistemidir. HTML kodları kullanılarak bir sayfanın temel organizasyonu ve bu düzenin içerisindeki malzemeler (resim, video, yazı gibi her türlü içerik) web tarayıcısına sunulur. Web tarayıcısı bu HTML kodlarını ve akabinde gelen CSS, JavaScript kodlarını birleştirerek ekranda görmüş olduğumuz web sayfalarını bizlere gösterir.

HTML ile web sayfası hazırlamak için herhangi bir derleyici (compiler) kurmanıza gerek yoktur. Not defteri, Word, WordPad, Sublime Text 3 gibi ücretsiz metin düzenleyicilerle (text editor) HTML kodlamaya başlayabilirsiniz.

Web Programlamada Kullanılan Diller

SEO uyumlu web tasarım için HTML en azından orta seviyenin biraz üstünde bilinmesi önemlidir. CSS ve JavaScript bilmekte oldukça önemli bir artı sağlayacaktır.

WordPress, Opencart gibi Linux üzerinde çalışan içerik yönetim sistemleri kullanıyorsanız php hakkında en azından temel bilgilere sahip olmak oluşturacağınız web sitesinin genel yapısı hakkında daha fazla bilgi sahibi olmanızı sağlar.

HTML: Web sayfası oluşturabilmek için kullanılan metin işaretleme dilidir. Her web sitesin muhakkak kullanılır. Sayfanın yapısını yani iskeletini tarayıcıya sunan dildir.

CSS: Web sitesine ait sayfalardaki öğelerin stillerinde modifikasyonlar yapılmasına olanak sağlar.  Örneğin bir alanın arka planının rengini, içerisindeki ve dışarısındaki öğeler arasındaki boşluğu, gölgelendirmesini, içerisindeki yazının fontunu, rengini, kalınlığını değiştirebilirsiniz.

JavaScript: Web sayfasına dinamizm katmak için kullanılan bir script dilidir. JavaScript sayesinde kullanıcı etkileşimlerine tepki verilebilir ve birtakım animasyonlar gerçekleştirilebilir. Örneğin kullanıcının fareyi alanın üzerine getirmesi, alana tıklaması alana basılı tutması gibi aktiviteleri takip edebilir bu aktivitelere göre site içerisinde bir takım script kodları çalıştırılabilir.

Back-end Diller: Java, php, asp.net, python gibi server taraflı diller yukarıdaki dillerin aksine kullanıcı tarafında değil sunucu tarafında çalışır. Bu diller görsellikten ziyade veri üzerine işlemler yapmak için kullanılır.

HTML Kodlarını Kısaca Tanıyalım

Aşağıda Html dosyasının temel yapısını görebilirsiniz. Head etiketi içerisine CSS, JavaScript kodları yerleştirilebilir ya da dışarıdan CSS, JavaScript dosyaları bu alanda çağırılabilir.

JavaScript kodları sayfanın oluşturulmasını engelleyip yavaşlatacağından dolayı JavaScript kodunu footer denilen sayfanın en alt kısmında çağırmak SEO uyumlu web tasarım ve sayfa yüklenme hızını arttırmak için oldukça önemlidir. SEO uyumlu web programlama için önemli diğer bir hususta CSS ve JavaScript kodlarının sıkıştırılmasıdır. Sıkıştırılma işlemi boşluk, satır boşlukları ve yorum satırlarının silinmesiyle gerçekleştirilir. Böylece dosya boyutu düşer ve sayfa yüklenme hızı atar.

Body kısmına sayfa içerisinde gözükmesini istediğimiz yazı, resim, video gibi bileşenleri yerleştiririz. Bu alanda sıkça kullanacağımız; paragraf, header, img, div, form, link gibi HTML etiketlerini inceleyelim.

Body Kısmında Sıkça Kullanılan HTML Etiketleri

HTML tags olarak bilinen etikler sayfa içerisinde kullanılan öğelerin ne olduğunu belirten yani metin işaretlemesi yapan etiketlerdir.

Paragraf <p>

Web sayfasında göstermek istediğimiz yazıları bu etiketin içerisine yazarız. Bu etiketin içerisine konulan yazılar bir paragrafı oluşturur.

<p> Bu paragraf içerisinde ki bir yazıdır. </p>

Yukarıda görüldüğü gibi Çoğu HTML etiketi < > ile başlar ve < /> ile biter.

Bağlantı – Link <a>

Bir web sitesini referans etmek istediğinizde o sitenin adresini <a> etiketi kullanarak işaret edebilirsiniz. Oluşturduğunuz bu bağlantıya köprü denir. Link hem başka sitelere hem de kendi sitenizin başka sayfalarına verebilirsiniz.

• href: Yönlendirmek istediğiniz adresi belirtirsiniz
• title: Linkin üzerine geldiğinizde çıkan küçük kutunun içerisindeki yazıyı belirtirsiniz.

<a href=https://www.seobil.com/blog title=”SEO Bogu”> Blog paylaşımlarını göster</a>

Yukarıdaki kullanımda “Blog paylaşımlarını göster” yazısının üstüne geldiğinde “SEO Bloğu” yazısı gözükür ve tıklandığında blog sayfasına gider.

Buton <button>

Buton oluşturmak için kullanılan HTML etiketidir. Form içerisinde bulunan gönderme butonu veya arama butonu buton kullanımına örnek verilebilir.

<button type=”button”> Gönder </button>

Başlık – Header (<h1> – <h6>)

Header etiketi yazı yazarken sıkça kullanacağımız önemli bir etikettir.

h1, h2, h3, h4, h5, h6 olmak üzere 6 adet başlık bulunmakta. Sırasıyla en büyüğü h1 ve en küçüğü h6’dır. Buradaki önemli nokta header etiketinin başlığın önemini arama motorlarına belirtmesidir. En önemli vurgu etiketi h1 ve en önemsizi h6’dır.

<h1> Ana Başlık </h1>

<h2> Alt Başlık </h2>

<h3> Altın altındaki başlık </h3>

Alan <div>

Div etiketi en çok kullanılan etiketlerden biridir. Kodları ve içerikleri gruplayıp konumlandırmak için kullanılır. Div etiketi diğer HTML etiketlerini içerisinde bulundurabilir.

<div class=”menü”>

<!– Bu bir yorum satırı –>

</div>

<div class=”content”>

<h1> Bu bir başlıktır </h1>

<p> Bu bir paragraftır </p>

</div>

<div class=”footer”>

<p> Örnek footer alanı</p>

</div>

Resim <img>

Ekranda gördüğümüz resimleri img etiketi kullanarak oluştururuz. Yukarıdaki diğer etiketlerin aksine tek bir tag kullanılarak oluşturulur. <img> etiketi içerisine resmin kaynağı boyutu belirtilebilir. Resmin kaynağı kendi sitenizden olabildiği gibi farklı bir siteden de olabilir.

• alt: Resmin açıklaması arama motoru tarafından resmin ne ile alakalı olduğunu anlamasını sağlar.
• src: Resmin kaynak adresi
• height ve width: Yükseklik ve Genişlik

<img src=”resim.jpg” alt=”resim” height=”80” width=”200” />

Form <form>

Formlar genellikle kullanıcıdan birtakım bilgileri almak için kullanılır. Bunlar iletişim formu, öneri formu, şikâyet formu vb. olabilir. Bu formların içerisinde kullanıcıdan veri almak için input tagları kullanılır. İnput tagları düz metin, sayı, tarih, dosya gibi değerler alabilir. Açılır menü (Dropdown), seçme butonu ve gönderme butonu gibi elemanlar bulundurabilir.

• POST: Formdaki verileri güvenli bir şekilde hedefe gönderir.
• GET: Gizlilik gerektirmeyen formlarda kullanılır. Girilen bilgiler URL yani adres çubuğunda parametre olarak gözükür ve kullanıcı tarafından değiştirilebilir. Örneğin bir e-ticaret sitesinde kategoriye göre sıralama yaptığımızda ya da bir ürüne tıkladığımızda domain adresinden sonra şu paterni görebiliriz: www.ornek.com/kulaklıklar.php?urunId=25&categoriId=3

<form action=”hedef-sayfa.php” target=”_blank” method=”POST”>

Adınız:<br>

<input type=”text” name=”ad” placeholder=”adınız”>

<br>

Soyadınız:<br>

<input type=”text” name=”soyad” placeholder=”soyadınız”>

<br><br>

<textarea name=”mesaj” placeholder=”Mesajınızı girin” style=”height:200px”></textarea>

<br> <br>

<input type=”submit” value=”Gönder”>

</form>

Yukarıdaki form Gönder butonuna tıklandığında hedef sayfasını yeni sekmede açarak post metoduyla kullanıcı adı, soyadı ve mesajını gönderir.