HTML Academy · Pelajaran

meta charset viewport author dan description

Tambahkan tag meta penting untuk pemaparan dan kebolehcarian

Pelajaran 2 daripada 413 langkah

meta charset viewport author dan description ialah pelajaran HTML Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran HTML Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.

Elemen meta

Elemen <meta> menyediakan metadata tentang halaman. Elemen ini ialah elemen kosong — tiada 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>

meta charset

Mengisytiharkan pengekodan aksara:

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

Tag meta viewport mengawal pemaparan pada peranti mudah alih:

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

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

meta description

Tag meta description menyediakan ringkasan yang digunakan dalam hasil carian:

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

Tag meta author mengenal pasti pengarang 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 -->

meta keywords (Tidak Digunakan Lagi)

Tag meta keywords pernah penting tetapi kini 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 -->

meta http-equiv

Atribut http-equiv mensimulasikan pengepala 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 mengawal perayapan enjin carian:

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

Pratonton Open Graph Metadata

Bahagian head yang dikonfigurasikan 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>

meta generator

Tag meta generator mengenal pasti alat yang mencipta 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 -->

Semakan Pantas

Tag meta manakah yang penting untuk reka bentuk responsif pada peranti mudah alih?

Jawab dalam pelajaran interaktif

Ulang kaji: tag meta

Tag meta penting:

<meta charset="UTF-8"> — sentiasa pertama dalam head
<meta name="viewport" ...> — diperlukan untuk reka bentuk responsif
<meta name="description"> — petikan SERP sepanjang 150-160 aksara
<meta name="author"> — kepengarangan kandungan
keywords sudah lapuk; robots mengawal perayap

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 40
Pelajaran: 159

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “meta charset viewport author dan description” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran HTML Academy, termasuk “meta charset viewport author dan description”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “meta charset viewport author dan description”?

Tambahkan tag meta penting untuk pemaparan dan kebolehcarian Anda berlatih HTML Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan HTML Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran HTML Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “meta charset viewport author dan description” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

title dan Peranannya dalam SEO
meta charset viewport author dan description
URL Kanonik dan meta robots
Favicon dan Ikon Sentuhan Apple

← Kembali ke HTML Academy