Merhaba Blogger yazarları! İlk iki dersimizde metinlerimizi hizaladık, başlık hiyerarşisini kurduk. Şimdi sıra blogumuzu diğer sayfalara bağlamaya ve görsellerle canlandırmaya geldi.
Bu dersimizde <a> (Link) ve <img> (Resim) etiketlerini, Blogger'a özel SEO taktikleriyle birlikte öğreneceğiz.
1. HTML ile Link (Bağlantı) Nasıl Verilir? (<a> Etiketi)
HTML'de link vermek için <a> (Anchor) etiketi kullanılır. Ancak bu etiket tek başına bir işe yaramaz; yanına gitmek istediği adresi belirten href niteliğini (attribute) almak zorundadır.
Temel Yapı:
<a href="gidecek_olan_url_adresi">Tıklanacak Metin</a>
Örnek:
Blog sitemizi ziyaret etmek için <a href="https://bloggerarsivim.blogspot.com">buraya tıklayın</a>.
Blogger İçin Hayati Link Özellikleri (Niteliği)
Bir blog yazarı olarak dışarıya link verirken mutlaka bilmeniz gereken iki önemli ek özellik vardır:
target="_blank"(Yeni Sekmede Aç): Eğer verdiğiniz linke tıklayan okuyucunun sizin blogunuzdan çıkmamasını, linkin yeni bir sekmede açılmasını istiyorsanız bu kodu eklemelisiniz.rel="nofollow"(SEO Güvenlik Kilidi): Güvenmediğiniz, reklam amaçlı veya sponsorlu dış sitelere link verirken Google'a "Ben bu siteye kefil değilim, blogumun SEO puanını ona aktarma" deme yöntemidir.
Profesyonel Link Kullanımı:
<a href="https://ornek-site.com" target="_blank" rel="nofollow noopener">Harici Siteyi Gör</a>2. HTML ile Görsel (Resim) Nasıl Ekleme? (<img> Etiketi)
Blogunuza HTML ile resim eklemek için <img> (Image) etiketi kullanılır. Bu etiketin en büyük farkı kapanış etiketinin olmamasıdır. Kendi kendini kapatan bir yapısı vardır.
Resim eklemek için iki temel niteliğe ihtiyacımız var:
src: Resmin internetteki tam adresi (URL).alt: Resmin alternatif metni (SEO için en kritik alan!).
<img src="resmin_linki.jpg" alt="Resmin açıklaması" />
💡 Alt Metni (Alternative Text) Neden Önemlidir? > Google botları resimleri bizim gibi göremez; sadece kodları okur.
altetiketine yazdığınız metin, Google'a resimde ne olduğunu anlatır ve görsel aramalarında üst sıralara çıkmanızı sağlar. Ayrıca interneti yavaş olan kullanıcılarda resim yüklenmezse ekranda bu yazı görünür.
Resim Boyutlarını HTML ile Sınırlandırmak
Blogger'a yüklediğiniz görsellerin bazen taşmasını önlemek veya belirli bir boyutta kalmasını sağlamak için width (genişlik) ve height (yükseklik) değerleri verebilirsiniz:
<img src="https://example.com/resim.jpg" alt="Blogger Eğitim Seti" width="500" height="500" />
Üçüncü Pratik: Resimli ve Linkli Bir Blok Oluşturalım
Hemen Blogger panelinizde yeni bir taslak yazı açın, HTML Görünümü'ne geçin ve aşağıdaki yapıyı yapıştırarak test edin:
<h2>Önerilen Blogger Temaları</h2>
<p>Blogunuzun hızını artırmak için optimize edilmiş şablonlar kullanmalısınız.</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw.../s1600/logo.png" alt="Blogger Arşivim Logosu" width="300" />
<p>Detaylı tema incelemelerine göz atmak ve ücretsiz şablonları indirmek için
<a href="https://bloggerarsivim.blogspot.com" target="_blank" rel="noopener">Blogger Arşivim sitemizi ziyaret edin</a>.
</p>
Blogger Arşivim Notu: Görsellerde Taşma Sorunu
Blogger'da HTML üzerinden resme sabit bir width="600" (genişlik) değeri verdiğinizde, bu resim masaüstünde çok güzel durabilir ancak telefonla giren kullanıcıların ekranından dışarı taşabilir.
Çözüm: Mobil uyumlu (Responsive) görseller için HTML derslerimizin hemen ardından göreceğimiz CSS kısmında resimlere max-width: 100%; ve height: auto; vermeyi öğreneceğiz. Bu sayede resim, ekran boyutu ne olursa olsun (ister 500px ister 300px) otomatik olarak ekrana sığacaktır. ders,html,link
Hiç yorum yok:
Yorum Gönder