title ve SEO'daki Rolü
Arama motorlarında iyi sıralanacak etkili sayfa başlıkları yazın
title ve SEO'daki Rolü, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
Başlık Öğesi
<title> öğesi belge başlığını belirler; bu, HTML'nin en önemli bölümlerinden biridir:
- Tarayıcı sekmesinde görüntülenir
- Arama motoru sonuçlarında (SERP) gösterilir
- Varsayılan yer imi adı olarak kullanılır
- Sayfa yüklendiğinde ekran okuyucular tarafından sesli okunur
Başlığın Yeri
Başlık öğesi <head> içinde yer alır:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learn HTML5 — CoddyKit</title>
</head>
<body>...</body>
</html>Başlık için Arama Motoru Optimizasyonu En İyi Uygulamaları
Arama motorları için etkili başlıklar yazma:
- 60 karakterin altında tutun (Google daha uzun başlıkları kısaltır)
- Birincil anahtar sözcüğü başlangıca yakın bir yerde kullanın
- Site adını ekleyin (genellikle sona)
- Sitedeki her sayfa için benzersiz bir başlık oluşturun
- Açıklayıcı ve ilgi çekici olmasını sağlayın — arama yapanların okuduğu ilk şey budur
Başlık Deseni: Sayfa — Site
Yaygın başlık desenleri:
<!-- Page name first, site name last -->
<title>HTML Forms — CoddyKit</title>
<title>Contact Us — My Company</title>
<title>Search Results for "html" — CoddyKit</title>
<!-- For the homepage: site name first -->
<title>CoddyKit — Learn to Code</title>
<!-- Avoid: -->
<title>Untitled Document</title> <!-- terrible -->
<title>Page 1</title> <!-- not descriptive -->Tek Sayfalı Uygulamalarda Dinamik Başlıklar
Tek sayfalı uygulamalar, gezinme sırasında başlığı güncellemelidir:
// React / Next.js:
// <title> is set in document.head or via framework
// Vanilla JavaScript:
function navigateTo(page) {
const titles = {
home: 'Home — MyApp',
about: 'About Us — MyApp',
blog: 'Blog — MyApp',
};
document.title = titles[page] || 'MyApp';
history.pushState({}, '', '/' + page);
}Başlık ve Open Graph
Başlık öğesi, sosyal paylaşım için Open Graph bilgileriyle tamamlanır:
<head>
<title>HTML5 Semantic Elements Guide — CoddyKit</title>
<!-- Override title for social sharing: -->
<meta property="og:title" content="Master HTML5 Semantic Elements">
</head>
<!-- If og:title is absent, social networks may fall back to <title> -->Başlık Uzunluğunu Sınama
DevTools'ta başlık uzunluğunu denetleme:
- Chrome DevTools'u açın → Elements paneli
<head>→<title>öğesini bulun- Boşluklar dâhil karakterleri sayın
- Veya: Lighthouse denetimi → SEO → Belgenin bir başlığı var
Schema.org Adı ve Başlık
Sayfa başlığı ile Schema.org adı arasındaki fark:
<!-- HTML title: shown in tabs and search results -->
<title>Widget Pro Review — Best Widgets 2025</title>
<!-- Schema.org: machine-readable name for structured data -->
<script type="application/ld+json">
{
"@type": "Product",
"name": "Widget Pro"
}
</script>Başlığın Erişilebilirliği
Başlık, ekran okuyucu kullananların yeni bir sayfada duyduğu ilk şeydir:
- Her zaman anlamlı bir başlık kullanın
- Kalıcı iletişim kutusu iletişim kutusu sayfalarında veya tek sayfalı uygulamalarda: başlığı mevcut durumu açıklayacak şekilde güncelleyin
- Ekran okuyucular, sayfa yüklendiğinde ve her rota değişikliğinde başlığı okur
- Sayfa bağlamı olmadan okunduğunda da anlamlı olan başlıklar oluşturun
Yerelleştirilmiş Başlıklar
Çok dilli sitelerde başlıkları sayfanın dilinde ayarlayın:
<!-- French page: -->
<html lang="fr">
<head>
<title>Apprendre HTML5 — CoddyKit</title>
</head>
<!-- Hreflang tells Google about language variants: -->
<link rel="alternate" hreflang="en" href="https://example.com/en">
<link rel="alternate" hreflang="fr" href="https://example.com/fr">Iframe'lerde Başlık
Bir sayfa iframe içinde yüklendiğinde iframe'in başlığı önem taşır:
<!-- The iframe should have a descriptive title attribute: -->
<iframe src="/map" title="Interactive store locator map"></iframe>
<!-- The page inside the iframe also has its own <title> element -->
<!-- Screen readers read the iframe's title attribute, not the inner title -->Başlığın Arama Motoru Optimizasyonu Etkisini Ölçme
Başlık optimizasyonunu denetleme araçları:
- Lighthouse → arama motoru optimizasyonu denetimi
- Google Search Console → Performance (gerçek arama başlıklarını görün)
- SEMrush / Ahrefs → SERP snippet önizlemesini denetleyin
- Chrome uzantısı: MozBar, SEO Meta in 1 Click
Hızlı Kontrol
Bir HTML sayfası başlığı için önerilen en yüksek karakter sayısı nedir?
Özet: başlık ve arama motoru optimizasyonu
Başlığın temel özellikleri:
<head>içinde; her sayfada benzersiz; zorunlu- 60 karakterin altında; anahtar sözcük başlangıca yakın; site adı sonda
- Tek sayfalı uygulamalarda her gezinmede güncelleyin
- Sosyal paylaşım için og:title ile tamamlanır
- Ekran okuyucular, sayfa yüklendiğinde başlığı duyurur
Sıkça Sorulan Sorular
“title ve SEO'daki Rolü” dersi ücretsiz mi?
Evet — “title ve SEO'daki Rolü” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“title ve SEO'daki Rolü” dersinde ne öğreneceğim?
Arama motorlarında iyi sıralanacak etkili sayfa başlıkları yazın HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“title ve SEO'daki Rolü” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- title ve SEO'daki Rolü
- meta charset viewport author ve description
- Kanonik URL'ler ve robots Metası
- Favicon ve Apple Touch Icon