Yeni bir yazıdan merhabalar. Uzun süredir JavaScript mülakat soruları serisiyle ilgili yazılar paylaşıyordum. Bu yüzden biraz da temele dönüp HTML ile ilgili bir yazı paylaşmak istedim. Bu yazıda HTML meta etiketleri konusunu işleyeceğiz. Meta etiketleri, web sayfalarımızın arama motorlarına ve kullanıcılara kendini tanıtmasını sağlayan kodlardır. Bu kodlar web sayfamızın başlığı, açıklaması, anahtar kelimeleri, yazarı, karakter kodlaması, görüntülenme şekli gibi bilgileri içerir. Bu bilgiler web sayfamızın SEO performansını, kullanıcı deneyimini, güvenilirliğini, otoritesini, uyumluluğunu ve güncelliğini etkiler. Bu yazıda meta etiketlerinin ne olduğunu, ne için kullanıldığını ve nasıl kullanıldığını öğreneceğiz. Hazırsanız başlayalım.
Giriş
Meta etiketleri, web sayfamızın adeta kimliğini oluşturan ve kullanıcılara görülmeyen kodlardır. Bu kodlar, web sayfamızın tarayıcı sekmesinde görünen başlığı, arama motorlarına web sitemizin dili, konusu, içeriği hakkında bilgiler veren kodlardır. Bu kodlar, web sayfamızın HTML belgesinin <head> </head> etiketleri arasına yazılır. Meta etiketleri, web sayfamızın arama motorlarında daha iyi sıralanmasına, kullanıcıların ilgisini çekmesine ve web sayfamızın farklı cihazlarda uyumlu görüntülenmesine yardımcı olur. Şimdi temel bir HTML belgesinin head kısmında yer alan meta etiketlerinin ne anlama geldiğini inceleyelim.
HTML Meta Etiketleri
Temel bir HTML belgesinin head kısmında genel olarak şu meta etiketleri yer alır:
<head>
<title>Web sayfamızın başlığı</title>
<meta charset="UTF-8">
<meta name="description" content="Web sayfamızın kısa açıklaması">
<meta name="keywords" content="Web sayfamızla ilgili anahtar kelimeler">
<meta name="author" content="Web sayfamızın yazarı">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Bu meta etiketlerinin ne anlama geldiğini tek tek inceleyelim.
<title>etiketi: Web sayfamızın tarayıcı sekmesinde görünen başlığını belirler. Bu etiket hem kullanıcılar hem de arama motorları için önemlidir. Web sayfamızın konusunu ve içeriğini yansıtan özgün bir başlık seçmemiz SEO performansımıza katkı sağlar.<meta charset="UTF-8">etiketi: Web sayfamızın karakter kodlamasını belirler. Bu etiket sayesinde web sayfamızda Türkçe karakterler gibi farklı dillerdeki karakterleri doğru şekilde gösterebiliriz. UTF-8, en yaygın kullanılan ve önerilen karakter kodlamasıdır.<meta name="description" content="Web sayfamızın kısa açıklaması">etiketi: Web sayfamızın kısa bir açıklamasını belirler. Bu etiket arama motorları tarafından web sayfamızın özetini göstermek için kullanılır. Bu nedenle web sayfamızın içeriğini ve amacını net bir şekilde ifade eden, 150-160 karakter arası bir açıklama yazmaya çalışmalıyız. Bu da web sitemizin SEO performansı açısından önemlidir.<meta name="keywords" content="Web sayfamızla ilgili anahtar kelimeler">etiketi: Web sayfamızla ilgili anahtar kelimeleri belirler. Bu etiket arama motorlarının web sayfamızı doğru kategorilere yerleştirmesine ve kullanıcıların aradıkları konularla ilgili web sayfamızı bulmasına yardımcı olur. Bu nedenle web sayfamızın konusuyla alakalı, rekabeti düşük ve aranma hacmi yüksek anahtar kelimeler seçmeye özen göstermeliyiz. Bir başka SEO açısından önemli husus.<meta name="author" content="Web sayfamızın yazarı">etiketi: Web sayfamızın yazarını belirler. Bu etiket web sayfamızın sahibi veya yazarı olarak kimliğimizi göstermemize olanak sağlar. Bu sayede web sayfamızın güvenilirliğini ve otoritesini artırabiliriz.<meta name="viewport" content="width=device-width, initial-scale=1.0">etiketi: Web sayfamızın görüntülenme şeklini belirler. Bu etiket sayesinde web sayfamızın farklı cihazlarda ve ekran boyutlarında uyumlu bir şekilde görüntülenmesini sağlayabiliriz. (Responsive/duyarlı tasarım için önemli.) Bu etiketin içindekiwidth=device-widthözelliği web sayfamızın genişliğinin cihazın genişliğine eşit olmasını sağlar.initial-scale=1.0özelliği ise web sayfamızın başlangıçta %100 oranında yakınlaştırılmasını sağlar.
Sonuç
Bu yazıda HTML meta etiketleri konusunu işledik. Meta etiketleri, web sayfalarımızın arama motorlarına ve kullanıcılara kendini tanıtmasını sağlayan kodlardır. Bu kodlar web sayfamızın başlığı, açıklaması, anahtar kelimeleri, yazarı, karakter kodlaması, görüntülenme şekli gibi bilgileri içerir. Bu bilgiler web sayfamızın SEO performansını, kullanıcı deneyimini, güvenilirliğini, otoritesini, uyumluluğunu ve güncelliğini etkiler. Umarım faydalı olmştur. Yeni rehberlerde görüşmek üzere.
