HTML meta verileri

HTML'e Giriş

HTML `<head>` nedir?

Önceki makalede ele aldığımız basit HTML belgesini tekrar gözden geçirelim:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

HTML belgesinde, <head> öğesinin içeriği, <body>‘nin aksine, bir tarayıcıya yüklendiğinde sayfada görüntülenmez. Bunun yerine, head, belgeyle ilgili meta verileri içerir. Yukarıdaki örnekte, head oldukça küçüktür:

<head>
  <meta charset="utf-8">
  <title>My test page</title>
</head>

Ancak daha büyük sayfalarda head oldukça dolabilir. En sevdiğiniz web sitelerinden bazılarına gitmeyi deneyin ve ana içeriklerini kontrol etmek için geliştirici araçlarını kullanın. Buradaki amacımız, head kısmında her şeyi nasıl kullanacağınızı göstermek değil, head‘e dahil etmek isteyeceğiniz ana unsurları nasıl kullanacağınızı öğretmek ve biraz aşinalık kazandırmak. Başlayalım.

Başlık ekleme

<title> öğesi belgeye bir başlık eklemek için kullanılabilir. Ancak bu öğe gövde içeriğinize üst düzey bir başlık eklemek için kullanılan <h1> öğesinden farklıdır. <title> sayfa başlığı ile ilgilenir. Tarayıcınızda göreceğiniz başlık da budur.

<h1>: Tarayıcıya yüklendikten sonra sayfadaki eleman olarak görünür – genellikle sayfa içeriği başlığını işaretlemek için sayfa başına bir kez kullanılmalıdır (öykü başlığı veya haber başlığı veya her türlü kullanıma uygundur.)
<title>: Genel HTML belgesinin başlığını temsil eden meta verisidir.

Aktif öğrenme: Basit bir örneği incelemek

Bu aktif öğrenme kısmında Mozilla GitHub deposuna gitmenizi ve başlık-örnek.html sayfası‘nın bir kopyasını indirmenizi istiyoruz. Bunu yapmak için;
1. ya kodu sayfadan kopyalayıp kod düzenleyicinizdeki yeni bir metin dosyasına yapıştırın, ardından mantıklı bir yere kaydedin.
2. ya da, ham kodun (muhtemelen yeni bir tarayıcı sekmesinde) görünmesine neden olan GitHub sayfasındaki “Ham” düğmesine basın. Ardından, tarayıcınızın Dosya > Sayfayı Farklı Kaydet… menüsünü seçin ve dosyayı kaydetmek için mantıklı bir yer seçin.
Şimdi dosyayı tarayıcınızda açın. Bunun gibi bir şey görmelisiniz:
<title>, aşağıda göreceğiniz gibi içeriklerin arama sonuçlarında da gösterilmesi için kullanılır.
Meta veriler: <meta> öğesi
Meta veriler, verileri tanımlayan verilerdir ve HTML’de bir belgeye meta veri eklemenin “resmi” bir yolu vardır – <meta> öğe. Elbette bu yazıda bahsettiğimiz diğer şeyler de meta veri olarak düşünülebilir. Sayfanızın <head> bölümüne eklenebilecek pek çok farklı türde <meta> öğe bulunur, ancak bu aşamada hepsini açıklamaya çalışmayacağız, çünkü bu çok kafa karıştırıcı olur. Bunun yerine, sadece size bir fikir vermek için yaygın olarak görebileceğiniz birkaç şeyi açıklayacağız.
Belgenizin karakter kodlamasını belirtme
Yukarıda gördüğümüz örnekte şu satır yer alıyordu:
```
<meta charset="utf-8">
```
Bu öğe, belgenin karakter kodlamasını, yani belgenin kullanmasına izin verilen karakter kümesini belirtir. utf-8 herhangi bir insan dilinden hemen hemen her karakteri içeren evrensel bir karakter kümesidir. Bu, web sayfanızın herhangi bir dili görüntülemeyi işleyebileceği anlamına gelir; bu nedenle, oluşturduğunuz her web sayfasında bunu ayarlamak iyi bir fikirdir. Örneğin, sayfanız İngilizce ve Japonca’yı gayet iyi işleyebilir:
Karakter kodlamanızı ISO-8859-1 olarak ayarlarsanız (Latin alfabesi için karakter seti), sayfa oluşturma işleminiz tamamen karışık görünebilir:
Not : Bazı tarayıcılar (Chrome gibi) yanlış kodlamaları otomatik olarak düzeltir, bu nedenle kullandığınız tarayıcıya bağlı olarak bu sorunu görmeyebilirsiniz. Diğer tarayıcılardaki olası sorunları önlemek için yine de sayfanızda bir kodlama ayarlamalısınız.
Aktif öğrenme: Karakter kodlaması ile deney yapın
Bunu denemek için önceki bölümde elde ettiğiniz basit HTML şablonunu tekrar ziyaret edin (başlık-örnek.html sayfası). Meta karakter kümesi değerini ISO-8859-1 olarak değiştirmeyi deneyin ve Japoncayı sayfanıza ekleyin. Kullandığımız kod bu:
```
<p>Japanese example: ご飯が熱い。</p>
```
Yazar ve açıklama ekleme
Birçok <meta> öğe name ve content özelliklerini içerir:
- name meta öğesinin türünü belirtir; ne tür bilgiler içeriyor.
- content meta içeriğini belirtir.
Sayfanıza eklemenizin yararlı olduğu aşağıdaki iki meta öğe, sayfanın yazarını tanımlar ve sayfanın kısa bir açıklamasını sağlar:
```
<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Web Docs Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">
```
Bir yazar belirtmek birçok yönden faydalıdır: İçerikle ilgili herhangi bir sorunuz varsa ve yazarla iletişime geçmek istiyorsanız, sayfayı kimin yazdığını anlayabilmek faydalıdır. Bazı içerik yönetim sistemleri, sayfa yazar bilgilerini otomatik olarak çıkarma ve bu amaçlar için kullanılabilir hale getirme olanaklarına sahiptir.
Sayfanızın içeriğiyle ilgili anahtar kelimeleri içeren bir açıklama belirtmek, arama motorlarında gerçekleştirilen alakalı aramalarda sayfanızın daha üstte görünmesini sağlama potansiyeline sahip olduğundan faydalıdır (bu tür faaliyetler Arama Motoru Optimizasyonu veya SEO olarak adlandırılır ).
Aktif öğrenme: Açıklamanın arama motorlarında kullanımı
Açıklama, arama motoru sonuç sayfalarında da kullanılır. Bunu keşfetmek için bir alıştırma yapalım
1. Mozilla Developer Network’ün ön sayfasına gidin .
2. Sayfanın kaynağını görüntüleyin (sayfaya sağ tıklayın , içerik menüsünden Sayfa Kaynağını Görüntüle’yi seçin.)
3. Açıklama meta etiketini bulun. Bunun gibi görünecektir:
```
<meta name="description" content="The MDN Web Docs site
  provides information about Open Web technologies
  including HTML, CSS, and APIs for both Web sites and
  progressive web apps.">
```
1. Şimdi arama motorunuzda “MDN Web Dokümanları”nı arayın (Biz Google’ı kullandık.) Arama sonucunda kullanılan açıklamayı <meta> ve <title> öğe içeriğini fark edeceksiniz.
Not: Google’da, ana ana sayfa bağlantısının altında listelenen MDN Web Dokümanlarının bazı ilgili alt sayfalarını göreceksiniz – bunlara site bağlantıları denir ve şurada yapılandırılabilir: Google’ın web yöneticisi araçları — sitenizin arama sonuçlarını Google arama motorunda daha iyi hale getirmenin bir yoludur.
Not: Birçok <meta> özellik artık kullanılmamaktadır. Örneğin, farklı arama terimleri için o sayfanın alaka düzeyini belirlemek üzere arama motorlarına anahtar kelimeler sağlaması beklenen anahtar kelime <meta> öğesi ( <meta name="keywords" content=tum, anahtar, kelimelerinizi, buraya, yazın">) arama motorları tarafından göz ardı edilir, çünkü spam websayfaları anahtar kelime listesini yüzlerce anahtar kelimeyle doldurur ve sonuçları saptırır.
Diğer meta veri türleri
Web’de dolaşırken başka meta veri türleri de bulacaksınız. Web sitelerinde göreceğiniz özelliklerin çoğu, belirli sitelere (sosyal ağ siteleri gibi) kullanabilecekleri belirli bilgiler sağlamak üzere tasarlanmış özel yapımlardır.
Örneğin, Open Graph Verileri Facebook’un web siteleri için daha zengin meta veriler sağlamak için icat ettiği bir meta veri protokolüdür. MDN Web Dokümanları kaynak kodunda şunu bulacaksınız:
```
<meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png">
<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">
```
Bunun bir etkisi, Facebook’ta MDN Web Docs’a bağlandığınızda, bağlantının bir resim ve açıklama ile birlikte görünmesidir: kullanıcılar için daha zengin bir deneyim.
Twitter’ın ayrıca kendi benzer tescilli meta verileri vardır: Twitter Kartları, sitenin URL’si twitter.com’da görüntülendiğinde benzer bir etkiye sahiptir. Örneğin:
```
<meta name="twitter:title" content="Mozilla Developer Network">
```
Sitenize özel simgeler ekleme
Site tasarımınızı daha da zenginleştirmek için meta verilerinize özel simge referansları ekleyebilirsiniz ve bunlar belirli bağlamlarda görüntülenir. Bunlardan en yaygın olarak kullanılanı favicon‘dur (tarayıcılardaki “favoriler” veya “yer imleri” listelerinde kullanımına atıfta bulunan “favoriler simgesi”nin kısaltmasıdır).
Favicon uzun yıllardır var ve simge türünün ilk örneği: birden çok yerde kullanılan 16 piksellik kare bir simge. Tarayıcı sekmesinde (tarayıcıya bağlı olarak) açık olan her sayfayı içeren ve yer imleri panelinde yer imi eklenmiş sayfaların yanında görüntülenen favori simgeleri görebilirsiniz.
Sayfanıza bir favicon şu şekilde eklenebilir:
1. Bunu sitenin dizin sayfasıyla aynı dizine.ico biçimde kaydetmek (çoğu tarayıcı .gif veya.png gibi daha yaygın biçimlerdeki favori simgelerini de destekler ancak .ico biçimini kullanmak, Internet Explorer 6’ya kadar geriye doğru çalışmasını sağlar.)
2. Bu simgeye referans vermek için HTML’nizin <head> bloğuna aşağıdaki satırı ekleyelim:
```
<link rel="icon" href="favicon.ico" type="image/x-icon">
```
Yer imleri panelindeki bir site simgesi örneği:
Bu günlerde dikkate alınması gereken birçok başka simge türü de var. Örneğin, bunu MDN Web Dokümanları ana sayfasının kaynak kodunda bulacaksınız:
```

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png">

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png">

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png">

<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png">

<link rel="icon" href="https://developer.mozilla.org/static/img/favicon32.png">
```
Bu öğeler, web sitesi bir iPad’in ana ekranına kaydedildiğinde kullanılacak yüksek çözünürlüklü güzel bir simge sağlamak gibi şeyleri kapsar.
Şu anda tüm bu tür simgeleri uygulama konusunda çok fazla endişelenmeyin – bu oldukça gelişmiş bir özellik ve bu kılavuz boyunca ilerlemek için bu konuda bilgi sahibi olmanız beklemiyoruz. Buradaki asıl amaç, başka sitelerin kaynak kodlarına göz atarken bunlara rastlarsanız bu tür şeylerin ne olduğunu size bildirmek.
CSS ve JavaScript’i HTML’ye Uygulamak
Ziyaret edeceğiniz hemen hemen tüm web siteleri, havalı görünmeleri için CSS’yi ve video oynatıcılar, haritalar, oyunlar ve daha fazlası gibi etkileşimli işlevleri güçlendirmek için JavaScript’i kullanır. Bunlar en yaygın olarak sırasıyla <link> öğe ve <script> öğeleri kullanılarak bir web sayfasına uygulanır.
- <link> öğesi her zaman belgenizin head kısmı içine yazılmalı. rel="stylesheet" özniteliği ile belgenin stil sayfası olduğunu belirtir. href özniteliği ile de stil sayfası dosyasının yolunu gösterir:
```
<link rel="stylesheet" href="my-css-file.css">
```
The <script> element should also go into the head, and should include a src attribute containing the path to the JavaScript you want to load, and defer, which basically instructs the browser to load the JavaScript after the page has finished parsing the HTML. This is useful as it makes sure that the HTML is all loaded before the JavaScript runs, so that you don’t get errors resulting from JavaScript trying to access an HTML element that doesn’t exist on the page yet. There are actually a number of ways to handle loading JavaScript on your page, but this is the most foolproof one to use for modern browsers (for others, read Script loading strategies).
<script> öğesi de head kısmına gitmeli ve yüklemek istediğiniz JavaScript’in yolunu içeren bir src özniteliği içermelidir. Eğer sayfanın yüklenmesinden sonra JavaScript kodunu yüklemek istersek, defer özniteliğini kullanıırız. Bu JavaScript’in tüm HTML sayfası yüklendikten sonra çalışmasını sağladığı için yararlı bir yöntem olabilir. Böylece JavaScriptin bazı HTML elementlerine ulaşamadığı için hata vermesinden kaçınırız. Aslında bu tür hatalardan kaçınmanın birden fazla yolu olsa da, bu strateji en kolayıdır.
```
<script src="my-js-file.js" defer></script>
```
Not : <script> öğesi boş bir öğe gibi görünebilir, ancak öyle değildir ve bu nedenle bir kapanış etiketine ihtiyaç duyar.
Aktif öğrenme: bir sayfaya CSS ve JavaScript uygulama
1. Bu aktif öğrenme için meta-example.html, script.js ve style.css dosyalarını Mozilla’dan indirin ve bilgisayarınızda aynı klasöre kaydedin. İndirdiğiniz dosyaların isimlerinin doğru olduğuna ve dosya uzantılarının gösterildiği şekilde olduğuna dikkat edin.
2. HTML dosyasını tarayıcınızda ve metin editörünüzde açın.
3. Yukarıda verilen bilgiler doğrultusunda <link> ve <script> öğelerini sayfanıza ekleyin. Böylece sayfanıza CSS ve JavaScript uygulamış olacaksınız.
Eğer bir yanlışlık olmadıysa, HTML dosyanızı kaydedip tarayıcınızı yenilerseniz aşağıdakine benzer bir görünüm görmelisiniz.
- JavaScript sayfaya bir boş liste ekledi. Şimdi sayfada liste dışında herhangi bir yere tıkladığınızda bir diyalog kutusu açılacak ve yeni bir liste öğesi için bir şeyler yazmanızı isteyecek. OK butonuna bastığınızda listemize yazdığınız isimle yeni bir öğe eklenecek. Eğer var olan bir liste öğesine tıklarsanız da, yeni bir diyalog açılıp bu öğenin ismini değiştirmenize imkan tanıyacak.
- CSS ise sayfanın arkaplanının yeşile dönmesini sağladı. Ayrıca yazıların biraz daha büyük görünmesini ve JavaScript ile eklediğimiz listenin arkaplanının kırmızı olmasını da gerçekleştirdi.
Not: Eğer bu örnekte takılırsanız ve CSS/JS ikilisini sayfaya uygulamakta sorun yaşarsanız css-and-js.html sayfasına bakabilirsiniz.
Sayfanın dilini ayarlama
Son olarak, sayfanın dilini ayarlamaya bakalım – bunu yapmanız önerilir. Bu sayfadaki html etiketine lang özelliği eklenerek yapılır.
```
<html lang="en-US">
```
Bu özellik bir çok açıdan yararlı olabilir. Örneğin, HTML dökümanlarınızın arama motorları tarafından daha etkili bir şekilde indekslenmesini sağlayabilirsiniz. Ya da, görme sorunu yaşayan kullanıcılarınıza hangi dilde sunum yaptığınızı söylemiş olursunuz (örneğin on kelimesi hem İngilizcede hem Türkçede bulunur)
Ayrıca belgenizdeki bölümlerin de farklı dillerde olduğunu belirtebilirsiniz. Örneğin aşağıdaki örnekte Japonca yazdığımız yeri belirtebiliriz:
```
<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>
```
Özet
HTML head yazımızın sonuna geldik — burada daha öğrenilecek çok şey var ama başlangıç için bu bilgiler yeterli. Burada sadece genelde karşılaşacağınız örnekleri verdik. Bir sonraki yazıda HTML metin temelleri ile ilgileneceğiz.