Blogger’lar ve İçerik Pazarlamacıları için HTML Kodlamanın Temelleri
Eğer WordPress veya bir başka İçerik Yönetim Sistemi’ni sıkça kullanıyorsanız bazı biçimlendirmelerin her zaman plana uygun gitmediğini de bilirsiniz. Kopyalanıp yapıştırılan metin düzgün görünmeyebilir ya da düzensiz aralıklara sahip madde işaretleri olabilir. Bunlar küçük sorunlar olsa da çözümlenmeleri fena halde uzun sürebilir ve birçoğumuzun da bu kadar zamanı yoktur. Ne var ki böyle sorunlar, kendinizin veya müşterinizin blog’unda yapacağınız basit HTML metin kodu düzenlemeleriyle kolayca giderilebilir. Bu nedenle, bir içerik pazarlamacısı ya da blogger’sanız içerikle kodun arasında yakın bir ilişki olduğunu bilmelisiniz, yani HTML kodlamasının temellerini bilmek size inanılmaz bir fayda sağlayabilir.
Sizin gözünüzü boyamaya çalışmıyoruz; blog HTML’sini düzenlemeyi öğrenmek kolay değil. Fakat unutmayın, bütün bir web sitesini sıfırdan nasıl oluşturacağınızı bilmek zorunda değilsiniz çünkü bu son derece karmaşık olabilir. Bunun yerine, temel HTML bilgisine sahip olmak içeriğinizin görünümü üzerinde size daha fazla kontrol sağlayacaktır.
Bu, merak uyandıran bir içerik yaratırken ve siteden çıkma oranlarını düşürme gibi arama motoru optimizasyonları uygularken de inanılmaz önemlidir. Peki, içeriğinizin kullanıcılarınıza çekici görünmesini nasıl garanti edeceksiniz? Yeni başlayanlar için HTML rehberimizi okumaya devam ederek daha fazla bilgi alın.
İÇİNDEKİLER
1. Temel HTML etiketleri nelerdir ve nasıl kullanılır?
2. HTML’de köprü nasıl oluşturulur
– Peki ya no-follow bir bağlantı?
3. HTML’de sayfanın belirli bir bölümüne atlayan bağlantı nasıl oluşturulur?
4. HTML’e içindekiler listesi nasıl eklenir?
5. İçindekiler listesi eklemek SEO açısından neden faydalıdır?
1. TEMEL HTML ETİKETLERİ NELERDİR VE NASIL KULLANILIR?
– BAŞLIKLAR
HTML, H1’den (ana başlık) H6’ya (en küçük alt başlık) kadar altı farklı seviyede başlık içerir. Arama motoru optimizasyonu (SEO) amaçları için, gönderi başına sadece tek bir H1 etiketi kullanmak önemlidir, bu da genel olarak konuşursak gönderinin başlığıdır ve otomatik olarak oluşturulur. Gönderinin geri kalanında, uygun yerlere çeşitli alt başlıklar (H2, H3, vs.) ekleyerek metni bölümlere ayırıp içeriğin kusursuzca akmasını sağlamalısınız.
Her bir başlık etiketi şu şekilde biçimlendirilir:
<h1>başlık 1</h1>
<h2>başlık 2</h2>
<h3>başlık 3</h3>
<h4>başlık 4</h4>
<h5>başlık 5</h5>
<h6>başlık 6</h6>
SEO yönünden, H2 başlıkları Google’da en büyük gücü elinde tutanlardır, bu nedenle gönderideki H1 etiketinden sonraki her ana başlığın <h2>___</h2> şeklinde biçimlendirildiğinden emin olun.
– KALIN
Eğer metni kalınlaştırmak istiyorsanız kelimenin ya da cümlenin başına ve sonuna <strong> ekleyin. Yıllar boyunca kalın metin için hangi HTML etiketini kullanılacağı hakkında bir kafa karışıklığı vardı; <strong> mu yoksa <b> mi? Artık <b> etiketi kullanılmadığı için, bir metni kalınlaştırırken onun her zaman şu şekilde biçimlendirildiğinden emin olun: <strong>Metni buraya girin</strong>
Örneğin:
<strong>Arama motoru optimizasyonu (SEO) organik arama sonuçları aracılığıyla sitenize gelen trafiğin sayısını ve kalitesini artırma uygulamasıdır.</strong>
Arama motoru optimizasyonu için belirli metinleri kalınlaştırmak, Google’a bilginin önemli parçalarının içeriğin neresinde olduğunu gösterebileceği için önemli olabilir; özellikle de içeriğinizin odak anahtar kelimesini içeriyorlarsa. Bununla beraber, çok tartışılmasına rağmen, bu arama motoru sonuç sayfasındaki (SERP) sıralamayı etkilemez. Yine de anahtar kelime kalın olarak yazılmışsa genelde SERP parçacıklarında (snippet) belirir ve bu da kullanıcıları sayfanıza tıklamaya teşvik eder. Buna rağmen, kullanıcı deneyimini göz önünde bulundurmayı unutmamak gerekir, o yüzden içeriğinizde kalın metin kullanırken asla aşırıya kaçmayın.
– EĞİK
Tıpkı metni kalın hale getirmek gibi, metninizin eğik yazı tipinde görünmesini sağlamak için metninizin iki ucunda emphasis (vurgu) etiketi olduğundan emin olun. Bunu yapmak için sadece kelime ya da cümlenin başıyla sonuna <em> ekleyin. Bu, şu şekilde biçimlendirilir: <em>Metni buraya girin</em>
Örneğin:
<em>Arama motoru optimizasyonu (SEO) organik arama sonuçları aracılığıyla sitenize gelen trafiğin sayısını ve kalitesini artırma uygulamasıdır.</em>
– ALTI ÇİZİLİ
Aynı prensip, içeriğinizdeki metnin bir alt başlık (H2) gibi bir bölümünün altını çizmek için de geçerlidir. Bunu yapmak için başına <u> ve sonuna </u> eklemelisiniz.
Örneğin:
<u>1. SEO Nedir?</u>
– PARAGRAF
Yeni bir paragrafın başladığını belli etmek için kodlamada metnin o bölümünün başına <p> ve sonuna </p> eklenir. Bunu yaparak içeriğin biçiminin net ve okunaklı olmasını garantilersiniz, aksi takdirde gönderiniz dev bir metin bloğu gibi görünecektir ve bu da kullanıcı deneyimi için iyi değildir.
Örneğin:
<p>Arama motoru optimizasyonu (SEO) organik arama sonuçları aracılığıyla sitenize gelen trafiğin sayısını ve kalitesini artırma uygulamasıdır.</p>
– SATIR SONU
Eğer içeriğinizin iki satırı arasında bir boşluk oluşturmak ya da içerik yönetim sistemlerinde (CMS) sıkça rastlanan boşluk bırakma sorunlarını çözmek istiyorsanız satır sonu kullanmayı düşünebilirsiniz. İçeriğin iki satırının arasına <br/> eklemeniz yeterlidir.
Örneğin:
<p><strong><a href=”#seonedir”>1. SEO Nedir? </a></strong><br/>
ALINTI
Blog içeriğinize bir alıntı eklerken, bu özellikle de okuyucularınız için bir değer taşıyorsa veya gönderinizin konusuyla bilhassa ilgiliyse, onu okuyucularınız için vurgulamak faydalı olur.
Örneğin:
<blockquote>
<p><strong>Optimize edilmiş içerik yoksa, görünürlük de olmaz</strong></p>
</blockquote>
– LİSTELER
Bir liste oluştururken, bu ister madde işaretli ister numaralı bir liste olsun, kodun hatalı olma olasılığı vardır. Eğer bu gerçekleştiyse, ‘Kaynak’ kodunu denetleyin ve kodun aşağıda açıklandığı gibi düzgün olduğundan emin olun:
Öncelikle numaralı ya da madde işaretli listenize ayrı ayrı maddeler yazmak için, her bir maddenin, “liste” anlamına gelen <li> ve </li> arasına yazılması gerekir.
Eğer numaralı bir liste oluşturmak istiyorsanız listenizin en başına (ilk maddenizi yazmadan önce) <ol> ve en sonuna da </ol> eklemelisiniz.
Aynı prensip madde işaretli liste için de geçerlidir, sadece en başına <ul> ve en sonuna ise </ul> ekleyin.
Bunu aklınızda tutmanın bir yöntemi <ol>’nin açılımının ‘ordered list’ (sıralı liste), <ul>’nin açılımının ise ‘unordered list’ (sırasız liste) olduğunu bilmektir.
– FOTOĞRAF
Fotoğraf eklemek genellikle kolaydır, bir butona basarsınız ve bu sizin adınıza halledilir. Yine de, bunun özellikle zor olduğu zamanlarda kodunuzun şuna benzediğinden emin olmalısınız: <img src=”Görselin URL’sini girin” alt=”Görselin açıklamasını girin”/>
“Alt” kısmında blog gönderinize eklediğiniz görselin bir açıklamasını yazmalısınız. Bu, herhangi bir sebepten dolayı görsel dosyası yüklenmezse sayfada görünecek metindir.
“Alt etiketleri” SEO konusunda da faydalıdır çünkü arama motorlarına daha iyi görsel açıklamaları sunar; bu da bir görselin düzgün endekslenmesine yardım eder, hatta fotoğrafınızın arama motorunun görsel aramasında sıralanmasını bile sağlayabilir. Bu yüzden odak anahtar kelimenizi eklemek faydalıdır.
Örneğin:
<img src=”/uploads/2018/08/24/seo-bloggers.jpg” alt=”çalışma masasında SEO yazılı not defteri”
2. HTML’DE KÖPRÜ NASIL OLUŞTURULUR?
HTML’de bir şeye nasıl bağlantı vereceğinizi hiç merak ettiniz mi? Gönderinizde, doğrudan kendi web sitenizdeki başka sayfalara ya da gönderilere (dahili bağlantılar) ve diğer web sitelerine (harici bağlantılar) yönlendiren bir köprüyü elle yaratmak için “a href” HTML etiketleri kullanmanız gerekir. Bunun biçimi şu şekilde görünür: <a href=”URL Girin”>Buraya bağlantı metnini girin</a>
İşte bir dahili bağlantı örneği:
<p> Reboot’ta, <a href=https://www.rebootonline.com/seo-dictionary/>SEO’nun tanımını</a> web sitenizin Google sıralamasını yükseltmenin yanı sıra bunun uzun vadeli sürdürülebilirliğini de artırarak onun güncel kalmasını ve ceza almamasını sağlayacak stratejik ve sürekli iyileştirme diye yapıyoruz. </p>
Eğer gönderinize bir no-follow bağlantı eklemek istiyorsanız bunun biraz farklı bir yöntemi vardır. No-follow bağlantıların şablonu şu şekildedir: <a href=”URL Girin” ref=”nofollow”>Buraya bağlantı metnini girin</a>
Örneğin:
<p> Reboot’ta, <a href=https://www.rebootonline.com/seo-dictionary/ ref=”nofollow”>SEO’nun tanımını</a> web sitenizin Google sıralamasını yükseltmenin yanı sıra bunun uzun vadeli sürdürülebilirliğini de artırarak onun güncel kalmasını ve ceza almamasını sağlayacak stratejik ve sürekli iyileştirme diye yapıyoruz. </p>
3. HTML’DE SAYFANIN BELİRLİ BİR BÖLÜMÜNE ATLAYAN BAĞLANTI NASIL OLUŞTURULUR?
Başka bie web sayfasına gerek dahili gerekse harici bağlantı eklemeyi artık bildiğinize göre, bir sonraki adım, içeriğinizdeki başka bir bölüm için bağlantı oluşturmak üzere temel HTML kodunu öğrenmek olmalı. Amacınız ister okuyucularınız için “SEO kontrol listesi için 3. bölüme atlayın” gibi site içi gezintiyi kolaylaştırmak ister onları sayfanın en yukarısına yönlendirmek olsun, bunu tam olarak nasıl yapacağınızı keşfetmek için okumaya devam edin.
Öncelikle WordPress’te (veya benzerinde) ‘Metin’ görüntüsü sekmesine geçin ve örneğin “Başa dönün” veya “3. bölüme atlayın”a tıkladığınızda bağlantının sizi nereye götürmesini istiyorsanız oraya şu şablonu ekleyin: <a name=”Metin girin”></a>
Örneğin:
Eğer “Başa dönün” bağlantısı oluşturmak istiyorsanız, bağlantıyı blog içeriğinizin en tepesine yerleştirin; giriş bölümünüzün yakınındaki bir yer iş görecektir. HTML kod için şuna benzer bir şey yazın: <a name=”Yukarı”></a>
Bu basit HTML kod şablonunda, normalde > </a> arasında bulunan bağlantı metninin olmadığını fark edeceksiniz. Bu sayede, bağlantı okuyucuyu doğrudan sayfanın başına yönlendirir, o sırada istenmeyen herhangi bir metin belirmez ve kullanıcı deneyimi etkilenmez.
Sonra, “Başa dönün” bağlantısının metnin neresinde olmasını istiyorsanız oraya, örneğin bir paragrafın sonuna, şunu ekleyin: <a href=”#top”>Başa dönün</a>
4. HTML’E İÇİNDEKİLER LİSTESİ NASIL EKLENİR?
Aynı zamanda ana HTML kodlamanın temellerinden de biri olan ve ‘Başa dön’ bağlantısı oluşturmak için kullanılan “a href” bağlantı tekniği, HTML içindekiler listesi oluşturmak için de kullanılabilir. Blog içeriğinizin başına içindekiler listesi eklemek, çeşitli alt başlıkları olan ya da yaklaşık 2000 kelimelik ve daha uzun içerikler için inanılmaz faydalıdır ve yalnızca temel bir HTML programlaması gerektirir. Reboot’un “Blogger’lar için SEO’nun temelleri” içeriğinde bir içindekiler listesi oluşturmasındaki amacı da buydu. İçindekiler listesiyle hem okuyucuların içeriğin hangi bilgileri içerdiğini görmesi hem de daha fazla ilgilendikleri belli bölümlere hızla gidebilmesi kolaylaştırıldı.
Blog gönderinizi yazmayı bitirdiğinizde artık temel HTML yazmaya başlamanızın zamanı gelmiş demektir: Ya sayfanın kaynak kodunu açın ya da ‘Metin’ görünümüne gidin. Blog gönderinize daha fazla aşina olmak için ‘İçindekiler’de erişilebilir olmasını istediğiniz, ana alt başlıklar (H2) ve daha küçük alt başlıklar (H3) dahil bütün başlıklarınızı içeren numaralalı bir liste yaratın.
“Blogger’lar için SEO’nun temelleri” gönderisinde, alt başlıklar da dahil dört bölüm bulunuyordu.
1. SEO Nedir?
– Blog’umun neden SEO’ya ihtiyacı var?
– Herkes SEO yapabilir mi?
2. Arama motoru optimizasyonu nasıl yapılır?
– Blog’unuzu nasıl SEO’ya uygun hale getiririsiniz?
– Blog dışı optimizasyon
3. Blog gönderinize eklemeniz gerekenler [Kontrol Listesi]
4. Kendinizi test edin [Test]
TEMEL HTML KOD ŞABLONLARI
Ardından, çalışan bir ‘İçindekiler’ listesi yaratmak için bu basit html şablonlarını takip edin:
– İÇİNDEKİLER LİSTESİNE BAŞLIK NASIL EKLENİR
Aşağıdakini kopyalayıp kaynak kodunuza yapıştırın, gereken yerleri doldurun:
<strong><a href=”#blogbasliginizinadinedir”>Blog başlığınızın adı nedir?</a></strong>
Çoğu durumda başlığın, gönderinizin ‘ana’ bölümlerini temsil etmesi için kalın yazı tipiyle yazılmasını istersiniz. Bu nedenle a href’in başında <strong> ve sonunda </strong> bulunduğundan emin olun.
– İÇİNDEKİLER LİSTESİNE ALT BAŞLIK NASIL EKLENİR
Alt başlık eklerken de başlık yaratırken kullandığınız içindekiler listesi HTML şablonunun aynısı kullanılır ama ana başlığın altında bir madde imi oluşturmak için a href’in başına bir tire eklemeniz gerekir.
Eğer metni yine kalın yazmak istiyorsanız <strong> etiketini ekleyebilirsiniz; fakat çoğu zaman bu normal metin olarak bırakılır.
– <a href=”#blogaltbasliginizinadinedir”>Blog alt başlığınızın adı nedir?</a>
İpucu: Yukarıdakini yazarken etikette (hashtag) hiç noktalama işareti olmasın ve bütün harfler küçük olsun.
Bundan sonra, içindekiler listesindeki bağlantıların hayata geçmesi için “a href”i mutlaka düzgün biçimde bitirin. İlk H2 başlığını örnek olarak kullanarak aşağıdaki etiketi gönderinizin ana gövdesindeki alt başlıklara ekleyin.
Önce böyle görünüyordu: <h2><strong>1. SEO Nedir?</strong></h2>
‘İçindekiler’ bağlantısı oluşturmak için şuna dönüştürüldü: <h2><strong><a name=”seonedir”></a>1. SEO Nedir?</strong></h2>
5. İÇİNDEKİLER LİSTESİ EKLEMEK SEO AÇISINDAN NEDEN FAYDALIDIR?
HTML’yi biraz daha akıllıca kullanmaya başladığımızda, içindekiler listesi yaratmanın birçok nedenden dolayı SEO açısından dikkate değer bir fayda sağladığını keşfettik. Bu liste, gönderilerdeki siteden çıkma oranını düşürmekle kalmıyor, kullanıcı deneyimi açısından da faydalı oluyor. Ama en önemlisi, blog gönderinizi arama sonuç sayfasındaki (SERP) görünüşünü değiştirebiliyor.
Örneğin, “Blogger’lar için SEO’nun temelleri” gönderimize içindekiler listesi eklediğimiz zaman, içeriğin (içindekiler listesinde bulunan) ana başlıklarının arama sonuç sayfasında görünür ve tıklanabilir olduğunu fark ettik. Bu da kullanıcıya, o henüz gönderiye bile tıklamadan blog’umuzun ne hakkında olduğunu hızlıca gösteriyor (böylece siteden çıkma oranını da düşürüyor) ve okuyucuyu içerikte özellikle aradığı kısma yönlendirerek onun istediği cevabı bulmasını kolaylaştırıyor.
Şunu da belirtmeden geçmeyelim, bu anında gerçekleşmedi: Bu minik bağlantılar, birkaç gün içinde, büyük olasılıkla Google içeriği ön belleğe kaydettikten (cache) sonra görünür oldu. Bu sayede daha şimdiden gözle görülür bir SEO faydası deneyimledik: Hem gönderiye hem de genel olarak Reboot’un web sitesine gelen trafik miktarında artış gerçekleşti.
Kaynak: https://www.rebootonline.com/blog/html-coding-basics-bloggers-content-marketers/
