HTML Dilinde Sayfa Başlığı (Page Title) Kullanımı
Web belgelerinin temel bileşenlerinden biri olan HTML sayfa başlığı, kullanıcı deneyimi ve arama motoru optimizasyonu (SEO) açısından kritik bir öneme sahiptir. Bir web sayfasının başlığını tanımlayan bu bileşen, tarayıcı sekmelerinde, arama motoru sonuç sayfalarında (SERP'ler) ve yer imlerinde görünen metindir. Bu makale,
Detaylı Açıklama
</code> Etiketi:</strong> Bu, HTML belgesinin başlığını tanımlayan ana etikettir. Bir açılış <code><title></code> etiketi ve bir kapanış <code> Başlık Metni:
</code> etiketleri arasına yerleştirilen metin, sayfanın içeriğini doğru ve özlü bir şekilde özetlemelidir. Bu metin, tarayıcıların sekme başlıklarında, sık kullanılanlar listelerinde ve arama motoru sonuçlarında görüntülenir. Başlık metni, sayfanın ana konusu hakkında net bir fikir vermelidir.</p><br></li> <li><p><strong>Yerleşim:</strong> <code><title></code> etiketi, HTML belgesinin <code><head></code> etiketi içinde yer almalıdır. <code><head></code> bölümü, sayfa hakkında meta veri (görünmeyen bilgiler) sağlayan diğer etiketleri (örneğin, <code><meta></code>, <code><link></code>, <code><style></code>) barındırır. <code><body></code> etiketi içinde yer alan <code><title></code> etiketi, HTML spesifikasyonlarına aykırıdır ve doğru şekilde işlenmeyebilir.</p><br></li> </ul> <h3>Pratik Kullanım Örnekleri</h3><br> <p>Aşağıdaki örnekler, <code><title></code> etiketinin farklı senaryolarda nasıl kullanılabileceğini göstermektedir.</p><br> <p><strong>Örnek 1: Temel Bir Web Sayfası İçin Başlık Tanımlama</strong></p><br> <p>Bu örnek, genel bir web sayfası için açıklayıcı bir başlık belirlemeyi göstermektedir.</p><br> <div class="code-block"><pre><code><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hakkımızda - Şirketinizin Adı
Yukarıdaki örnekte, sayfanın "Hakkımızda" bölümü olduğu ve "Şirketinizin Adı" adlı bir kuruluşa ait olduğu net bir şekilde belirtilmiştir. Bu, kullanıcıların ve arama motorlarının sayfanın içeriğini kolayca anlamasına yardımcı olur.
Örnek 2: Blog Yazısı İçin Dinamik Başlık Yapısı
Bir blog veya dinamik içerik platformu için başlıklar genellikle içeriğin kendisinden türetilir. Aşağıdaki yapı, bir blog yazısının başlığını ve genel blog adını birleştirerek nasıl bir
Burada, makale başlığı (`HTML5'te Yeni Özellikler: Detaylı İnceleme`) ve blog adı (`Teknik Blog`) birleştirilerek hem bilgilendirici hem de marka bilinirliği sağlayan bir başlık oluşturulmuştur. Bu yaklaşım, dinamik olarak oluşturulan sayfalarda yaygın olarak kullanılır.
Önemli Notlar
Tekillik: Her web sayfası için
</code> etiketi benzersiz olmalıdır. Yinelenen başlıklar, arama motorlarının sitenizi doğru bir şekilde dizine eklemesini zorlaştırabilir ve kullanıcı deneyimini olumsuz etkileyebilir.</p><br></li> <li><p><strong>Uzunluk:</strong> Çoğu arama motoru, başlıkları yaklaşık 50-60 karakter civarında keser. Bu nedenle, en önemli anahtar kelimelerin ve bilgilerin başlığın başına yerleştirilmesi önerilir.</p><br></li> <li><p><strong>Anahtar Kelime Kullanımı:</strong> Sayfanın ana konusunu en iyi özetleyen ve hedef kitlenizin arama yaparken kullanabileceği anahtar kelimeleri <code><title></code> etiketi içinde doğal bir şekilde kullanmak, SEO performansını artırır.</p><br></li> <li><p><strong>Marka Adı:</strong> Genellikle marka adı veya site adı, başlığın sonunda, bir ayırıcı (örneğin, tire (-) veya dikey çubuk (|)) ile birlikte yer alır. Örnek: "Ürün Adı - Marka Adı".</p><br></li> <li><p><strong>Anlamlı ve Çekici Olma:</strong> Başlık sadece anahtar kelimelerden oluşmamalıdır. Kullanıcıları tıklamaya teşvik edecek, sayfanın içeriği hakkında doğru ve çekici bir açıklama sunmalıdır.</p><br></li> <li><p><strong>Konum:</strong> <code><title></code> etiketi her zaman <code><head></code> etiketi içinde yer almalıdır. Yanlış yerleşim, sayfanızın arama motorları tarafından doğru şekilde tanınmamasına neden olabilir.</p><br></li> </ul> <div class="post-hakkinda"> <div style="text-align:center;" class="yayin-tarihi"> Yayınlanma Tarihi: 2025-10-17 04:00:23 </div> </div> </div> </div> </div> </div> <!-- YENİ TASARIM: ÖNCEKİ/SONRAKİ HABER ALANI --> <div class="yonlendirme-container"> <a href="posts/php-dilinde-oznitelikler-attributes-kullanimi-derinlemesine-bir-kilavuz-420" class="yonlendirme-karti prev-karti"> <img src="https://softmush.com/api/images/post_banner/php-dilinde-oznitelikler-attributes-kullanimi-derinlemesine-bir-kilavuz-68f1871d4ad98.webp" alt="PHP Dilinde Öznitelikler (Attributes) Kullanımı: Derinlemesine Bir Kılavuz"> <div class="yonlendirme-karti-icerik"> <span><i class='bx bx-left-arrow-alt'></i> Önceki Haber</span> <h3>PHP Dilinde Öznitelikler (Attributes) Kullanımı: Derinlemesine Bir Kılavuz</h3> <div class="kategori-etiketi">PHP Makaleleri</div> </div> </a> <a href="posts/css-dilinde-ikon-kullanimi-temel-yaklasimlar-ve-uygulamalar-422" class="yonlendirme-karti next-karti"> <div class="yonlendirme-karti-icerik"> <span>Sonraki Haber <i class='bx bx-right-arrow-alt'></i></span> <h3>CSS Dilinde İkon Kullanımı: Temel Yaklaşımlar ve Uygulamalar</h3> <div class="kategori-etiketi">CSS Makaleleri</div> </div> <img src="https://softmush.com/api/images/post_banner/css-dilinde-ikon-kullanimi-temel-yaklasimlar-ve-uygulamalar-68f1a3481dec1.webp" alt="CSS Dilinde İkon Kullanımı: Temel Yaklaşımlar ve Uygulamalar"> </a> </div> <div class="comments" id="yorumlar"> <!-- YORUM YAPMA ALANI --> <div class="yorum-yap"> <p class="yorum-baslik">Yorum yap</p> <div style="z-index:10;" class="alert alert-not">Yorum yapabilmek için <a style="text-decoration:none; color:#00997b;" href="login">giriş</a> yapmalısınız.</div> </div> <!-- YORUMLAR --> <div class="yorumlar"> <p class="yorum-baslik">Yorumlar</p> <div style="z-index:10; display:;" class='alert alert-not'>Bu yazı hakkında henüz yorum yapılmamıştır.</div> </div> </div> <footer class="footer"> <div class="footer__addr"> <h1 class="footer__logo"><img class="site-logo" src="../images/avatar_banner/68ecc3cd01872.png" alt="logo"></h1> </div> <ul class="footer__nav"> <li class="nav__item"> <h2 class="nav__title">Kategoriler</h2> <ul class="nav__ul"> <li> <a href="kategori/bilim">Bilim Makaleleri</a> </li> <li> <a href="kategori/para-kazanma">Kazanç Makaleleri</a> </li> <li> <a href="kategori/html">HTML Makaleleri</a> </li> <li> <a href="kategori/css">CSS Makaleleri</a> </li> </ul> </li> <li class="nav__item"> <h2 class="nav__title">Sayfalar</h2> <ul class="nav__ul"> <li> <a href="hakkimizda">Hakkımızda</a> </li> <li> <a href="reklam">Reklam</a> </li> <li> <a href="#">Site Haritası</a> </li> </ul> </li> <li class="nav__item"> <h2 class="nav__title">Hukuk & Yasa</h2> <ul class="nav__ul"> <li> <a href="gizlilik-politikasi">Gizlilik Politikası</a> </li> <li> <a href="cerezler">Çerez Politikası</a> </li> <li> <a href="kullanici-sozlesmesi">Kullanıcı Sözleşmesi</a> </li> </ul> </li> <li class="nav__item"> <h2 class="nav__title">İletişim</h2> <ul class="nav__ul"> <li> <a href="iletisim">İletişim Formu</a> </li> <li> <a href="mailto:yonetici@gmail.com">Mail Gönder</a> </li> </ul> </li> </ul> </footer> <div class="legal"> <p>2025 © Tüm Hakları Saklıdır.</p> </div> <div id="ilginiCekebilirKutusu" class="ilgini-cekebilir-kutusu"> <span id="kapatDugmesi" class="kapat-dugmesi" title="Kapat">×</span> <a href="https://softmush.com/posts/html-dilinde-html-dosya-yollarinin-kullanimi-473" title="HTML Dilinde HTML Dosya Yollarının Kullanımı"> <img src="https://softmush.com/api/images/post_banner/html-dilinde-html-dosya-yollarinin-kullanimi-68fe8bec2582d.webp" alt="HTML Dilinde HTML Dosya Yollarının Kullanımı"> <div class="ilgini-cekebilir-baslik"> <span>Bu ilginizi çekebilir</span> <h4>HTML Dilinde HTML Dosya Yollarının Kullanımı</h4> <p>Web belgeleri içerisinde harici kaynaklara, örneğin görsellere, stil sayfalarına veya...</p> </div> </a> </div> </body> <script src="settings/js/java.js"></script> <script> // const yorums = document.querySelectorAll(".yorumlar"); // yorums.forEach(el => { // el.querySelector(".gosters").addEventListener("click", (event) => { // event.preventDefault(); // el.querySelector(".cevapla").classList.toggle("goster"); // }) // }); document.addEventListener("DOMContentLoaded", function () { var gostersButtons = document.getElementsByClassName("gosters"); for (var i = 0; i < gostersButtons.length; i++) { gostersButtons[i].addEventListener("click", toggleReplyForm); } function toggleReplyForm() { var cevaplaDiv = this.nextElementSibling; if (cevaplaDiv.style.display === "none") { cevaplaDiv.style.display = "block"; } else { cevaplaDiv.style.display = "none"; } } }); </script> <script> document.addEventListener('DOMContentLoaded', function() { const kutu = document.getElementById('ilginiCekebilirKutusu'); const yaziAlani = document.querySelector('.post-yazilari'); // Yazı içeriğinin olduğu div if (!kutu || !yaziAlani) { return; // Gerekli elemanlar yoksa scripti çalıştırma } const kapatDugmesi = document.getElementById('kapatDugmesi'); let kutuGosterildi = false; function scrollKontrol() { // Yazı alanının alt kenarının viewport'a olan mesafesini al const yaziAlaniRect = yaziAlani.getBoundingClientRect(); const tetiklemeNoktasi = yaziAlaniRect.bottom; // Yazının altı, ekranın görünür alanına girdiğinde kutuyu göster if (tetiklemeNoktasi <= window.innerHeight && !kutuGosterildi) { kutu.classList.add('goster'); kutuGosterildi = true; // Tekrar tetiklenmesini engelle window.removeEventListener('scroll', scrollKontrol); // Performans için listener'ı kaldır } } kapatDugmesi.addEventListener('click', function(event) { event.preventDefault(); // a etiketinin linke gitmesini engelle kutu.style.display = 'none'; // Kapat düğmesine basınca tamamen gizle }); window.addEventListener('scroll', scrollKontrol); }); </script> <script> document.getElementById('likeButton').addEventListener('click', function () { var postId = this.getAttribute('data-post-id'); var xhr = new XMLHttpRequest(); xhr.open('POST', 'class/like.php', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = function () { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { var response = xhr.responseText; console.log(response); // İstenilen işlemleri gerçekleştirin } else { // Hata durumunda işlemler yapın } } }; xhr.send('post_id=' + postId); }); </script> <script> function updateComments() { window.location.reload(); var pageLink = window.location.href; var newPageLink = pageLink + '#yorumlar'; window.location.href = newPageLink; } document.getElementById('yorumForm').addEventListener('submit', function (event) { event.preventDefault(); // Formun varsayılan gönderme davranışını engelle var form = document.getElementById('yorumForm'); var formData = new FormData(form); var xhr = new XMLHttpRequest(); xhr.open('POST', 'class/class.php', true); xhr.onreadystatechange = function () { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { var response = xhr.responseText; console.log(response); updateComments(); // Yeni yorumları güncellemek için işlevi çağır } else { // Hata durumunda işlemler yapın } } }; xhr.send(formData); }); </script> </html>