HTML'de Üst Bilgiler (Meta Etiketleri)

İlk HTML dersimizde <head> etiketini öğrenmiştik ve temel etiketlerden birisi olduğunu söylemiştik. Ayrıca <body> etiketine yazılanların son kullanıcıya gösterileceğini, arka planda çalışacak diğer tüm kodların <head> içerisinde yazılması gerektiğinden de bahsetmiştik. Hatta aynı örnekte <head> etiketi içerisinde yine varsayılan bir etiket olan <title> etiketini kullanarak web sayfasının başlığını belirlemiştik. Şimdi bu etiketin kullanım alanlarına daha detaylı bakalım.

<head> etiketi içerisinde tanımlanan her etiket üst bilgi göndermek için tanımlanır. Bunların içerisinde şu etiketler vardır;

  • <title> - Sayfa başlığını belirler
  • <style> - HTML içerisinde CSS kullanımını sağlar
  • <meta> - Her türlü üst bilgiyi tanımlamak için kullanılır.
  • <link> - Bir CSS dosyasını sayfada dahil etmeye yarar
  • <script> - HTML'de javascript kullanımını sağlar. Ayrıca javascript dosyalarını çağırmaya da yarar.
  • <base> - Daha geçen derste öğrendiğimiz bu etiket varsayılan yolu belirler.

<style> Etiketi

Bu etiket HTML sayfa içerisinde CSS kodu yazmamızı sağlar. Örnek vermek gerekirse;

<style>
body {
    background-color: #1a1a1a;
}
h1 {
    font-size: 24px;
}
</style>

Genelde <head> etiketi içerisine yazılsa da zaman zaman body içerisine de yazılabiliyor. Fakat şöyle bir sorun var, kodlar yukarıdan aşağı doğru yorumlandığı için CSS kodları her zaman en üstte olmalı, aksi taktirde stiller sayfa yüklendikten sonra gelecektir buda çirkin bir görüntü oluşturur.

<link> Etiketi

Bu etiket mevcut sayfa ile çağrılacak olan sayfa arasındaki ilişkiyi tanımlar. Örneğin CSS dosyası çağırabiliriz, oda şöyle;

<link rel="stylesheet" type="text/css" href="style.css">

<meta> Etiketi

<meta> etiketi web sayfalarında üst bilgi tanımlamak için kullanılır. Örneğin sayfanın karakter kodlamasını, açıklamasını, anahtar kelimesini, yazarını vb. üst bilgilerini tanımlamak için kullanılır.

Tarayıcılar, üst bilgileri sayfayı nasıl göstereceğini belirlemek için kullanırlar. Arama motorları da genelde bu üst bilgilere göre yorumlarlar, bu açıdan bu üst bilgileri doğru şekilde belirlemek SEO için çok önemli. Hayda.. Birde SEO diye bir ifade çıktı der gibisiniz? SEO yani uzun adıyla Search Engine Optimization yani türkçesiyle Arama Motoru Optimizasyonu, web sayfalarının arama motorlarında daha üst sıralarda çıkmasını sağlar. Bu konuya daha sonra uzun uzun geliriz. Şimdi gelin, <meta> etiketinin kullanım alanlarına bakalım.

Sayfanın karakter kodlamasını belirlemek için;

<meta charset="UTF-8">

Sayfanın başlığını belirlemek için;

<title>Emin Yılmaz | Yazılım ve Grafik Tasarım</title>

Sayfanın açıklamasını belirlemek için;

<meta name="description" content="Bu blog sitesinde yazılım ve grafik tasarım konularında bilgilendirici ve öğretici yazılar yazıyoruz.">

Bu şekilde kullanıldığında arama motorlarında şu şekilde gözükecek;

Sayfanın anahtar kelimelerini belirlemek için;

<meta name="keywords" content="HTML uygulamaları, CSS uygulamaları, PHP uygulamaları">

Sayfanın yazarını belirlemek için;

<meta name="author" content="Emin Yılmaz">

Sayfayı belirlenen bir süre içerisinde yenilemek için; (Bu örnekte 5sn olarak belirledik)

<script> Etiketi

HTML sayfa içerisinde Javascript kodlarını çalıştırmak için bu etiket kullanılır. Örnek vermek gerekirse;

<script>
  document.body.innerHTML = 'Body etiketinin içeriğini değiştirdik.';
</script>

Bu örneği anlamadıysanız sorun etmeyin, çünkü Javascript'e henüz hiç giriş yapmadık.

<base> Etiketi

Bu etiketi kullanarak sayfa içerisinde bağlantı verdiğimiz tüm adreslerin varsayılan başlangıç değerlerini belirlemek için kullanılır. Örnek vermek gerekirse;

<base href="https://eminylmz.dev/iletisim" target="_blank">
Bunu <head> etiketi içerisine yazdığınızda artık bağlantı verdiğiniz tüm adresler https://eminylmz.dev/iletisim altında aranacaktır. Ayrıca target="_blank" dedik, buda her bağlantının yeni sekmede açılmasını sağlar. Yani genel bir tanım yapmak için kullanılır genelde. 

Viewport (Görünüm) Ayarlama

Hazırladığınız HTML sayfalara hiç mobilde bakmayı denediniz mi? Eğer viewport değerini belirlemediyseniz yani görünüm ayarını, o zaman mobile duyarlı web sayfaları yapmıyorsunuz demektir. Normal şartlarda mobilde görünümünü ayarlamak CSS ile yapılacak bir şey ancak HTML tarafında viewport'u yani görünümü ayarlamak için bir etiket bulunuyor. Hemen inceleyelim;

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Bu örnekte önemli olan content içerisindeki değerler. Bunları tek tek açıklamak gerekirse;

  • width=device-width - Görünüm ayarlarında genişliği girilen cihazın genişliği ne ise o olarak belirle. Bu mantıkta mobilden girilirse mobil genişlik, normal bilgisayardan girilirse tarayıcının çözünürlüğü belirlenir.
  • initial-scale=1.0 - Sayfanın yakınlık seviyesidir. 1.0 = 100% - Daha büyük yapmak isterseniz örneğin 1.7 olarak belirleyip test edebilirsiniz.
  • user-scalable=no - Kullanıcıların sayfayı yakınlaştırmasını engellemek için kullanılır.
  • minimum-scale=1.0 - Sayfanın minimum yakınlık değeri. (1.0 = 100%)
  • maximum-scale=1.0 - Sayfanın maksimum yakınlık değeri. (1.0 = 100%)

Yani kısaca bu kodu eklediğimizde yakınlık 100% olarak gözükecek yakınlaşmayacak ve genişlik girilen cihazın genişliği olacak. width=device-width yerine width=1300 yazarsanız genişliği 1300px olarak belirlemiş olursunuz ama bu tarz kullanımları yoktur, bu kullanım en standart kullanımdır.

Sorular (0)