HTML Academy · Ders

meta charset viewport author ve description

Görüntüleme ve keşfedilebilirlik için gerekli meta etiketlerini ekleyin

2. ders / 413 adım

meta charset viewport author ve description, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

Meta Öğesi

<meta> öğesi sayfa hakkında üstveri sağlar. Bu, kapanış etiketi olmayan boş bir öğedir:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Learn HTML5 from scratch.">
  <meta name="author" content="Jane Smith">
</head>

Meta Karakter Kodlaması

Karakter kodlamasını bildirir:

<meta charset="UTF-8">
<!-- Must be:
  - Inside <head>
  - Within the first 1024 bytes of the file
  - Best: the first tag inside <head>
  - Always use UTF-8 for web pages
-->

Meta Görüntü Alanı

Görüntü alanı meta etiketi, mobil cihazlarda görüntü oluşturmayı denetler:

<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Without this, mobile browsers render at desktop width (900-980px)
     then scale down — everything looks tiny -->
<!-- width=device-width: viewport width = device width -->
<!-- initial-scale=1: start at 1:1 zoom -->
<!-- This is REQUIRED for responsive design to work -->

Görüntü Alanı İçerik Değerleri

Karşılaşabileceğiniz diğer görüntü alanı değerleri:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
<!-- maximum-scale: max zoom level users can reach -->
<!-- minimum-scale: min zoom level -->

<!-- AVOID: user-scalable=no
  It prevents users from zooming, which is a WCAG 1.4.4 violation -->
<!-- <meta name="viewport" content="user-scalable=no"> BAD -->

Meta Açıklaması

Açıklama meta etiketi, arama sonuçlarında kullanılan bir özet sağlar:

<meta name="description" content="
  Learn HTML5 semantic elements, forms, accessibility,
  and modern web APIs. Practical lessons for real-world developers.
">
<!-- Recommended: 150-160 characters -->
<!-- Google may show this in the SERP snippet -->
<!-- Not a direct ranking factor, but affects click-through rate -->
<!-- Make every page's description unique and compelling -->

Meta Yazarı

Yazar meta etiketi, sayfanın yazarını belirtir:

<meta name="author" content="Jane Smith">
<!-- Rarely used by search engines today -->
<!-- Schema.org Person is more semantic for author attribution -->
<!-- Still good practice for internal content management -->

Meta Anahtar Sözcükleri (Kullanımdan Kaldırıldı)

Anahtar sözcükler meta etiketi bir zamanlar önemliydi, ancak artık yok sayılır:

<!-- Old and ignored by Google since 2009: -->
<meta name="keywords" content="html5, web development, tutorial">
<!-- Don't waste time on this -->
<!-- Focus on quality content and real on-page keywords instead -->

Meta http-equiv

http-equiv özniteliği, HTTP yanıt üstbilgilerini taklit eder:

<!-- Redirect after 5 seconds: -->
<meta http-equiv="refresh" content="5; url=/new-page">

<!-- Set Content Security Policy: -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

<!-- Cache control (mostly superseded by real HTTP headers): -->
<meta http-equiv="cache-control" content="no-cache">

Meta Arama Robotları

Arama robotları meta etiketi, arama motorlarının tarama davranışını denetler:

<meta name="robots" content="index, follow">
<!-- index: allow indexing (default) -->
<!-- follow: follow links (default) -->
<!-- noindex: don't add to search index -->
<!-- nofollow: don't follow links -->
<!-- noarchive: don't show cached version -->

<!-- Page you don't want indexed: -->
<meta name="robots" content="noindex">

Üstverilerin Open Graph Önizlemesi

İyi yapılandırılmış bir head bölümü:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Forms Guide — CoddyKit</title>
  <meta name="description" content="Master HTML5 forms: inputs, validation, and accessibility.">
  <meta name="author" content="CoddyKit Team">
  <link rel="canonical" href="https://coddykit.com/html/forms">
</head>

Meta Oluşturucu

Oluşturucu meta etiketi, sayfayı oluşturan aracı belirtir:

<!-- WordPress adds: -->
<meta name="generator" content="WordPress 6.4">
<!-- Jekyll adds: -->
<meta name="generator" content="Jekyll v4.3.2">
<!-- You can add your own: -->
<meta name="generator" content="MySSG v1.0">
<!-- Security note: this reveals your CMS version to attackers
     Some recommend removing it -->

Hızlı Kontrol

Mobil cihazlarda duyarlı tasarım için hangi meta etiketi gereklidir?

İnteraktif derste cevapla

Özet: meta etiketleri

Temel meta etiketleri:

<meta charset="UTF-8"> — head içinde her zaman ilk sırada
<meta name="viewport" ...> — duyarlı tasarım için gerekli
<meta name="description"> — 150-160 karakterlik SERP snippet'i
<meta name="author"> — içeriğin yazarlığı
Anahtar sözcükler kullanımdan kalkmıştır; robots tarayıcıları denetler

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 40
Dersler: 159

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“meta charset viewport author ve description” dersi ücretsiz mi?

Evet — “meta charset viewport author ve description” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“meta charset viewport author ve description” dersinde ne öğreneceğim?

Görüntüleme ve keşfedilebilirlik için gerekli meta etiketlerini ekleyin HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“meta charset viewport author ve description” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

title ve SEO'daki Rolü
meta charset viewport author ve description
Kanonik URL'ler ve robots Metası
Favicon ve Apple Touch Icon

← HTML Academy Sayfasına Dön