Merhaba Blogger yazarları! İlk dersimizde HTML'in mantığını ve kodları nereye yazacağımızı öğrenmiştik. Bu dersimizde ise yazdığımız makaleleri hem okuyucular hem de Google botları için nasıl daha düzenli, şık ve anlaşılır hale getireceğimizi göreceğiz. html,dersleri,metin
Konumuz: Metinleri biçimlendirmek ve Başlık (Heading) etiketleri ile hiyerarşi kurmak.
1. Başlık (Heading) Etiketleri Nedir? Neden Hayatidir?
HTML'de başlıklar <h1> ile başlar, <h6>'ya kadar gider. Buradaki sayı büyüdükçe, başlığın önemi (ve genellikle yazı boyutu) küçülür.
<h1>: Sayfanın ana başlığıdır (Kitabın adı gibi).<h2>: Ana alt başlıklardır (Kitabın bölümleri gibi).<h3>: Alt başlıkların altındaki detaylardır.
<h1>Blogumuzun Ana Başlığı</h1><h2>1. Önemli Alt Başlık</h2><h3>1.1. Detay Alt Başlığı</h3>
⚠️ Blogger İçin Altın SEO Kuralı: Blogger sisteminde, yazdığınız yazının başlığı otomatik olarak
<h1>(veya bazı temalarda<h2>) olarak atanır. Bu yüzden yazı içerisine asla tekrar<h1>etiketi eklememelisiniz. Yazı içindeki en büyük başlığınız her zaman<h2>ile başlamalıdır. Bir sayfada birden fazla<h1>olması Google gözünde SEO hatasıdır.
Blogger Paneliyle Eşleştirme
Blogger yazı editöründeki sol üstteki "Metin Türü" menüsünün HTML karşılıkları şöyledir:
En Büyük Başlık $\rightarrow$
<h1>(Yazı başlığı için ayrılmıştır)Başlık $\rightarrow$
<h2>Alt Başlık $\rightarrow$
<h3>Küçük Başlık $\rightarrow$
<h4>
2. Metin Biçimlendirme Etiketleri
Yazı içerisindeki önemli kelimeleri vurgulamak, eğik yapmak veya listelemek için kullandığımız en popüler etiketler şunlardır:
A) Kalın Yazı: <strong> ve <b>
Bir kelimeyi kalın yapmak için iki seçeneğiniz vardır. Görsel olarak ikisi de aynı sonucu verir ancak arama motorları için anlamları farklıdır:
<b>: Metni sadece görsel olarak kalınlaştırır.<strong>: Metni kalınlaştırır ve arama motorlarına "Bu kelime bu yazı için çok önemli, buraya dikkat et!" mesajı verir (SEO dostudur).
Bu kelime <strong>kesinlikle çok önemli</strong> bir vurgudur.
B) Eğik (İtalik) Yazı: <em> ve <i>
<i>: Metni sadece görsel olarak yan (eğik) yazar.<em>: Metni eğik yazar ve okunuşta vurgu olduğunu belirtir.
Yabancı kelimeleri veya alıntıları <em>italik</em> yapmak şık durur.
C) Üstü Çizili Metin: <del>
Bir fiyat indirimini gösterirken veya eski/geçersiz bir bilgiyi belirtirken kullanılır.
Eski Fiyat: <del>500 TL</del> yerine sadece 299 TL!
3. Paragraf (<p>) ve Satır Atlama (<br>) Farkı
Blogger'da kod yazarken en çok karıştırılan iki etiket bunlardır:
<p>(Paragraph): Bir paragraf oluşturur. Kapatıldığında, altındaki yeni içerikle arasına otomatik olarak geniş bir boşluk bırakır.<br>(Break): Sadece bir alt satıra geçmek için kullanılır. Kapatılmasına gerek olmayan nadir etiketlerdendir (<br>veya<br />şeklinde yazılır).
<p>Bu birinci paragrafımızdır.</p> <p>Bu ikinci paragrafımızdır. Alt satıra geçmek için buraya<br>bir tane etiket koydum.</p>
İkinci Pratik: SEO Dostu Bir Makale İskeleti Oluşturalım
Şimdi Blogger panelinizde yeni bir yazı açın, HTML Görünümü'ne geçin ve aşağıdaki kod yapısını yapıştırıp Oluşturma Görünümü'ne geçerek inceleyin:
<h2>Blogger HTML Dersleri Nedir?</h2>
<p>HTML öğrenmek, blogunuzu özelleştirmenin en <strong>etkili ve kalıcı</strong> yoludur.</p>
<h3>Neden Kod Bilmeliyiz?</h3>
<p>Çünkü hazır temalar her zaman istediğimiz gibi görünmez. Küçük bir <br> satır boşluğu veya italik bir yazı tasarımı tamamen değiştirebilir.</p>
<p>Eski yöntemleri <del>unutun</del>, artık saf HTML ile çalışıyoruz!</p>
💡 Blogger Arşivim Notu: Başlıkların Altındaki Çizgileri Yönetmek
Bazı Blogger temalarında yazı içine <h2> veya <h3> eklediğinizde, başlığın altında otomatik olarak boydan boya bir çizgi (border-bottom) çıkabilir. Eğer bu çizgiler sadece ana sayfadaki başlıkları bozuyor veya hoşunuza gitmiyorsa, bu durum tamamen temanızın CSS kodlarındaki h2 { border-bottom: ... } tanımından kaynaklanır. İlerleyen derslerimizde HTML etiketlerine CSS ile nasıl müdahale edeceğimizi gördüğümüzde bu çizgileri kolayca kaldırabileceğiz.
Hiç yorum yok:
Yorum Gönder