0Pricing
HTML Academy · Pelajaran

meta charset viewport author dan description

Tambahkan tag meta penting untuk perenderan dan kemudahan ditemukan.

meta charset viewport author dan description adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Elemen Meta

Elemen <meta> menyediakan metadata tentang halaman. Elemen ini adalah elemen kosong—tanpa tag penutup:

<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>

Pengodean Karakter Meta

Mendeklarasikan pengodean karakter:

<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 Area Tampilan

Tag meta area tampilan mengontrol perenderan pada perangkat seluler:

<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 -->

Nilai Konten Area Tampilan

Nilai area tampilan lain yang mungkin Anda lihat:

<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 -->

Deskripsi Meta

Tag meta deskripsi menyediakan ringkasan yang digunakan dalam hasil pencarian:

<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 -->

Penulis Meta

Tag meta penulis mengidentifikasi penulis halaman:

<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 -->

Kata Kunci Meta (Usang)

Tag meta kata kunci dahulu penting, tetapi sekarang diabaikan:

<!-- 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 -->

http-equiv pada Meta

Atribut http-equiv menyimulasikan header respons HTTP:

<!-- 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 robots

Tag meta robots mengontrol perayapan mesin pencari:

<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">

Pratinjau Metadata Open Graph

Bagian head yang dikonfigurasi dengan baik:

<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>

Generator Meta

Tag meta generator mengidentifikasi alat yang membuat halaman:

<!-- 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 -->

Pemeriksaan Singkat

Tag meta apa yang penting untuk desain responsif pada perangkat seluler?

Rekap: Tag Meta

Tag meta penting:

  • <meta charset="UTF-8"> — selalu pertama di head
  • <meta name="viewport" ...> — diperlukan untuk desain responsif
  • <meta name="description"> — cuplikan SERP sepanjang 150–160 karakter
  • <meta name="author"> — kepengarangan konten
  • keywords sudah usang; robots mengontrol perayap

Pertanyaan yang Sering Diajukan

Apakah pelajaran “meta charset viewport author dan description” gratis?

Ya — teks lengkap “meta charset viewport author dan description” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “meta charset viewport author dan description”?

Tambahkan tag meta penting untuk perenderan dan kemudahan ditemukan. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “meta charset viewport author dan description” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. title dan Perannya dalam SEO
  2. meta charset viewport author dan description
  3. URL Kanonis dan meta robots
  4. Favicon dan Ikon Apple Touch
← Kembali ke HTML Academy