Kod Atölyesi
Yapay Zeka
HTML Dersleri
CSS Dersleri
JavaScript Dersleriİçindekiler
HTML’de <head> etiketi, bir web sayfasının arka plandaki beyni gibidir. Burada tarayıcıya sayfa hakkında önemli bilgiler verilir, SEO ayarları yapılır ve harici dosyalar (CSS, JS gibi) bağlanır. Eğer bir web sitesinin nasıl çalıştığını anlamak istiyorsan, <head> etiketinin içindeki elemanları iyi bilmek gerekir. Şimdi gel, bu etiketi detaylıca inceleyelim!
<head> Etiketi Nedir ve Neden Önemlidir?
Bir HTML belgesi üç ana bölümden oluşur:
<html>ana kapsayıcıdır.<head>sayfa hakkında bilgi veren meta verileri içerir.<body>sayfanın görünen içeriğini barındırır.
<head> etiketi, doğrudan kullanıcıya görünmeyen ama tarayıcı ve arama motorları için hayati bilgiler taşıyan bir bölümdür. Örneğin, sayfa başlığını belirler, harici stil dosyalarını çağırır, sayfanın dilini belirtir ve SEO açısından kritik olan meta etiketlerini barındırır. Ayrıca, favicon belirlemek, özel yazı tiplerini yüklemek ve sosyal medya için Open Graph etiketlerini eklemek gibi birçok önemli işlevi de yerine getirir.
<head> İçinde Kullanılan Etiketler
1. <title> – Sayfa Başlığı
Bu etiket, sayfanın tarayıcı sekmesinde görünen başlığını belirler. Arama motorları için de önemlidir, çünkü kullanıcılar Google’da sayfanızı aradığında genellikle bu başlığı görürler.
<head>
<title>HTML Head Etiketi Nedir?</title>
</head>
SEO açısından, <title> etiketinin dikkatlice seçilmesi gerekir. Kısa, açıklayıcı ve anahtar kelimeler içeren bir başlık kullanmak, sayfanın arama motorlarında daha iyi sıralanmasını sağlayabilir.
2. <meta> – Meta Bilgileri
Bu etiket, sayfanın karakter seti, açıklaması, anahtar kelimeleri ve diğer önemli bilgileri içerir.
Önemli <meta> Etiketleri:
- Karakter Seti:
<meta charset="UTF-8">Sayfanın karakter kodlamasını belirler. Türkçe karakterlerin doğru görüntülenmesi içinUTF-8kullanılır. - Sayfa Açıklaması:
<meta name="description" content="HTML'de head etiketi ve içindekiler hakkında detaylı bir rehber.">Arama motorları bu açıklamayı sayfanızın önizlemesi olarak gösterebilir. Sayfanın içeriğini doğru şekilde anlatan bir açıklama kullanmak, tıklama oranınızı artırabilir. - Anahtar Kelimeler:
<meta name="keywords" content="HTML, head etiketi, meta etiketleri">Günümüzde Google anahtar kelimeleri pek dikkate almıyor ama bazı arama motorları hâlâ kullanıyor. - Mobil Uyumluluk (Responsive Design):
<meta name="viewport" content="width=device-width, initial-scale=1.0">Sayfanın mobil cihazlarda düzgün görünmesini sağlar. - Yazar Bilgisi:
<meta name="author" content="Tayyip Bölük">Sayfanın yazarı hakkında bilgi verir.
3. <link> – Harici Dosyalar Bağlama
Web sayfanızın tasarımını CSS dosyaları ile yönetmek için <link> etiketini kullanabilirsiniz.
<link rel="stylesheet" href="styles.css">
Bu, “styles.css” adlı dosyayı sayfaya bağlar ve sayfanın stilini belirler.
Ayrıca, <link> etiketi favicon eklemek için de kullanılır:
<link rel="icon" type="image/png" href="favicon.png">
Bu, tarayıcı sekmesinde görünecek küçük simgeyi belirler.
4. <style> – Sayfa İçinde CSS Tanımlama
Harici bir dosya yerine, doğrudan <head> içinde CSS yazmak istiyorsanız <style> etiketini kullanabilirsiniz.
<style>
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
</style>
Bu sayede, arka plan rengi gri olur ve sayfanın yazı tipi Arial olarak belirlenir.
5. <script> – JavaScript Dosyalarını Ekleme
Sayfanıza JavaScript eklemek için <script> etiketi kullanılır.
Dahili JavaScript:
<script>
console.log('Sayfa yüklendi!');
</script>
Bu kod, tarayıcının geliştirici konsolunda “Sayfa yüklendi!” mesajını gösterir.
Harici JavaScript:
<script src="script.js"></script>
Bu kod, “script.js” adlı harici JavaScript dosyasını sayfaya ekler.
6. <meta property="og:..."> – Sosyal Medya Paylaşımı için Open Graph Etiketleri
Open Graph etiketleri, bir web sayfasının Facebook ve Twitter gibi sosyal medya platformlarında nasıl görüneceğini belirler.
Facebook Open Graph Etiketleri
Facebook, sayfanızın paylaşımında özel bir başlık, açıklama, görsel ve URL göstermek için Open Graph etiketlerini kullanır.
<meta property="og:title" content="HTML Head Etiketi Nedir?">
<meta property="og:description" content="HTML'deki head etiketi hakkında detaylı rehber.">
<meta property="og:image" content="https://www.orneksite.com/gorsel.jpg">
<meta property="og:url" content="https://www.orneksite.com/html-head-etiketi">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Örnek Site">og:title→ Facebook’ta görünen başlık.og:description→ Paylaşımın açıklaması.og:image→ Paylaşımla birlikte gösterilecek görsel.og:url→ Sayfanın bağlantısı.og:type→ İçerik türü (örneğin, makale, video, vb.).og:site_name→ Web sitenizin adı.
Twitter için Open Graph Etiketleri (Twitter Cards)
Twitter da benzer şekilde özel paylaşım bilgileri belirlemek için “Twitter Cards” kullanır.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTML Head Etiketi Nedir?">
<meta name="twitter:description" content="HTML'deki head etiketi hakkında detaylı rehber.">
<meta name="twitter:image" content="https://www.orneksite.com/gorsel.jpg">
<meta name="twitter:site" content="@ornekhesap">
<meta name="twitter:creator" content="@tayyipboluk">twitter:card→ Paylaşım türü (summaryveyasummary_large_imagegibi).twitter:title→ Twitter’da görünen başlık.twitter:description→ Twitter’da paylaşımın açıklaması.twitter:image→ Paylaşımla birlikte gösterilecek görsel.twitter:site→ Web sitesinin Twitter hesabı.twitter:creator→ İçeriği oluşturan kişinin Twitter kullanıcı adı.
Bu etiketleri kullanarak, web sitenizin sosyal medyada profesyonel ve dikkat çekici görünmesini sağlayabilirsiniz.
<head> etiketi, web sayfalarının olmazsa olmazıdır. Tarayıcıya sayfa hakkında bilgi vermek, SEO açısından sayfanızı optimize etmek ve harici dosyaları bağlamak için bu etiketi doğru kullanmalısınız. Ayrıca sosyal medya paylaşımlarını optimize etmek ve kullanıcı deneyimini iyileştirmek için <head> içindeki etiketlerden en iyi şekilde yararlanmalısınız.
Eğer HTML ile yeni tanışıyorsanız, <head> içindeki etiketleri öğrenmek sizi bir adım öne taşıyacaktır! Bir web sayfası oluştururken, <head> etiketinin içeriğini dikkatlice yapılandırmak, hem kullanıcı deneyimini iyileştirir hem de arama motorlarında daha iyi sıralama elde etmeni sağlar. Eğer aklına takılan bir şey olursa, yorumlarda paylaşabilirsin! 😊
<head>etiketi zorunlu mudur?Evet, her HTML belgesinde
<head>etiketi bulunmalıdır. Tarayıcıya sayfanın başlığı, karakter seti ve stil dosyaları gibi önemli bilgileri sağlar.<head>etiketi içinde JavaScript kullanabilir miyim?Evet,
<script>etiketiyle<head>içinde JavaScript kullanabilirsin. Ancak, genellikle performans açısından<body>etiketinin sonunda kullanılması önerilir.SEO için
<head>etiketi nasıl optimize edilir?SEO için aşağıdaki etiketleri doğru şekilde kullanmalısın:
<title>etiketi, anahtar kelimeleri içermelidir.<meta name="description">etiketi, sayfanın içeriğini özetlemelidir.
Open Graph (OG) ve Twitter Card etiketleri eklenmelidir.Open Graph etiketleri ne işe yarar?
Open Graph etiketleri, sayfanın Facebook ve diğer sosyal medya platformlarında paylaşıldığında nasıl görüneceğini belirler. Örneğin, özel başlık, açıklama ve görsel eklemeyi sağlar.
<head>içinde favicon nasıl eklenir?Favicon eklemek için aşağıdaki kodu
<head>etiketinin içine ekleyebilirsin:<link rel="icon" type="image/png" href="favicon.png"><head>içinde CSS mi yoksa harici CSS dosyası mı kullanmalıyım?Mümkünse harici bir CSS dosyası kullanmalısın (
<link rel="stylesheet" href="style.css">). Sayfa performansını artırır ve kod yönetimini kolaylaştırır.
Henüz yorum yapılmamış. İlk yorumu siz yapabilirsiniz!