Neden?
Tarayıcı ve arama motorları sayfa hakkında bilgiyi büyük ölçüde head bölümünden alır.

Ne öğreneceğiz?
Bu derste title, charset, viewport ve description etiketlerini öğreneceğiz.

Nasıl ilerleyeceğiz?
Önce kavramın amacını düşünün. Ardından aşağıda verilen örneği kendiniz yazın. Kodu kaydedin, tarayıcıda açın ve küçük bir değişiklik yaparak sonucu gözlemleyin.

 Öğrenme kuralı:  Kodu yalnızca kopyalama. Her satır için “Bu satır neden burada?” ve “Bu satırı silersem ne değişir?” sorularını sor.

Derse başlamadan önce kendini yokla

• Bu konuyu gerçek bir web sayfasında hangi ihtiyacı çözmek için kullanırım?
  
• Örnekteki hangi HTML elementi içeriğin anlamını taşıyor?
  
• Uygulamayı kendi fikrimle nasıl değiştirebilirim?

Ders sonunda kontrol

• Kodu kendim, bakmadan tekrar yazabildim mi?
  
• Tarayıcıda sonucu test ettim mi?
  
• Karşılaştığım bir hatayı neden oluştuğunu açıklayarak düzelttim mi?

Ders hedefi

<head> bölümü kullanıcıya doğrudan görünmez. Ancak bu bölüm tarayıcı, arama motoru ve sosyal paylaşım araçları için önemlidir. Temel yapı:


charset="UTF-8" Türkçe karakterlerin doğru görüntülenmesine yardımcı olur. viewport mobil ekranlarda sayfanın uygun genişlikte görüntülenmesini sağlar. description, arama sonuçlarında kullanılabilecek kısa açıklamadır. <title> tarayıcı sekmesinde ve arama sonuçlarında görülen sayfa başlığıdır.

Her sayfanın başlığı içeriği doğru açıklamalıdır. Aynı başlığı tüm sayfalarda kullanmak yerine sayfaya özgü başlıklar yazmanız sitenizi ziyaret edenler, arama motorları ve sosyal mecralarda paylaşım yapılacağı taktirde sayfanın ne anlattığını anlayacaklardır.

Sosyal paylaşım için Open Graph etiketleri eklenebilir:


SEO yalnızca meta etiketlerinden oluşmaz. SEO için anlamlı başlık hiyerarşisi, açıklayıcı bağlantı metinleri, erişilebilir görseller ve kaliteli içerik de önemlidir.