HTML Meta Etiketi
Herkese Merhaba,
Bu yazımda HTML dosyasının en önemli etiketlerinden biri olan meta etiketi nedir, ne için kullanırız ve en çok kullanılan meta özellikleri hangileridir bunları ele alacağım.
Meta Etiketi Nedir, Neden Kullanırız ?
Meta etiketi bize HTML belgesi hakkında meta verileri sağlar. Web sitelerinin bilgi etiketidir diyebiliriz. Meta verileri tarayıcıda gözükmezler. Arama motorları ( SEO ) için çok önemli bir etikettir. Çünkü sayfamızın nasıl görüneceğini, içeriğinin ne olacağını bu etiket ile söyleriz. Meta etiketini HTML <head> etiketi içine yazarız. Ve HTML’de <meta> etiketi için kapanış etiketi kullanılmaz.
Nasıl Kullanılır ?
<meta charset=”UTF-8">
- İlk olarak Charset özelliğimize bakalım. Bu özellik HTML belgesinin karakter kodlamasını belirtir. Bu etiket ile tarayıcıya hangi karakteri kullanacağımızı belirtiriz.
<meta name=”description” content=“Bilişim ve Teknoloji”>
- Şimdi sayfamızın tanımlama kısmına geçebiliriz. Tanımlama yapacağımızı name özelliği ile belirttikten sonra bu tanımlamayı content özelliği içine yazmalıyız. Burada sitemizin içeriği ne ise tanımlama olarak bunu belirtmeliyiz.
<meta name=”keywords” content=“HTML, CSS, Javascript”>
- Daha sonra sayfamızın anahtar kelimelerinin olacağını name özelliği ile belirtelim ve bu anahtar kelimeleri content özelliği içine yazalım. Bu anahtar kelimeler site aramalarında bizi üst sıralara çıkaracaktır. Sitemizin içeriği ne ise anahtar kelimeleri de ona uygun olarak yazmalıyız. Örneğin sitemiz bir bilişim ve teknoloji sitesi ise anahtar kelimelerimiz de buna uygun ‘’ HTML, CSS, Javascript’’ gibi kelimeler olmalıdır..
<meta name=”author” content=“Adınız, E-Posta Adresiniz ya da site isminiz”>
- Şimdi sayfamızın yazarının, yapımcısının olacağını name özelliği ile belirtelim ve yazar ismini content özelliği içine yazalım. Buraya kendi ismimizi, e-posta adresimizi ya da site ismimizi yazabiliriz.
<meta name=”Copyright” content=”telif hakkı cümlesi”>
- Bu özelliği ise sitemizin telif hakları konusunda bilgi vermek istediğimizde kullanırız.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
- Geldik en önemli kısımlardan birisine : Viewport.
Viewport, kullanıcının cihazında web sayfamızın kapladığı alandır. Ancak bu alan her cihazda farklı boyutlarda olabilmektedir. Çünkü tarayıcı penceremizi daraltıp genişlettiğimizde, viewport alanı da değişmektedir. Viewport kavramı, Html5 ile gelen yeniliklerden biridir. Her türlü cihaza uygun web siteleri oluşturma ihtiyacı sonucunda ortaya çıkmıştır. Bu etiketi kullanarak viewport ile ilgili ölçeklendirme ve yönlendirme gibi temel ayarlamaları yapabiliriz. Genellikle yukarıdaki şekilde kullanılır.
width=device-width kısmı ölçeklemenin kullanıcının ekranına göre yapılacağını belirtir.
initial-scale=1 kısmı ise ölçekleme (zoom) miktarını belirler. 1 değeri verilerek sayfamızın ekranı kaplaması gerektiği belirtilmiştir. Ancak mobil uyumlu (responsive) web siteleri elde etmek için viewport etiketini kullanmak yeterli değildir. Bunun için ek CSS özellikleri kullanmamız gerekir ( Media Queries )
<meta name=”Expires” content=”Mon, 12 Aug 2020 18:50:05 GMT”>
- Bu özellik ise sitemizin içeriğinin hangi tarihte zaman aşımına uğradığını arama motorlarına bildirir.
<meta http-equiv=”content-language” content=”tr”>
- Son olarak da bu özellik ile belgenin Türkçe konuşanlara yönelik olduğunu söyleriz. Ancak bu kullanım belgenin Türkçe yazıldığını göstermez. Belgenin hangi dilde yazıldığını belirtmek istiyorsak bunun yerine <html lang=” en“> özelliğini kullanmamız gerekir.
Yorum Yap
Lütfen geçerli bir mail adresi giriniz.