Isi <head> Lengkap: Meta, Favicon, & Open Graph
Pengaturan penting di dalam head: viewport untuk ponsel, description, favicon, tema warna, dan Open Graph agar tautan tampil cantik saat dibagikan.
Head: pusat pengaturan halaman
Bagian <head> berisi informasi tentang halaman yang tidak terlihat di area isi tetapi sangat penting bagi browser, mesin pencari, dan media sosial. Ini template head yang bagus untuk hampir semua halaman:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar HTML Gratis | KelasIT</title>
<meta name="description" content="Belajar HTML dari nol dengan bahasa mudah dan latihan interaktif.">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
</head>Meta viewport: wajib untuk ponsel
Tanpa baris viewport, browser ponsel menganggap halamanmu selebar layar desktop lalu mengecilkannya, sehingga tulisan kecil sekali. Baris ini memberi tahu browser agar mengikuti lebar layar perangkat. Kamu akan membutuhkannya saat belajar desain responsif di CSS.
Kumpulan elemen head
| Elemen | Fungsi |
|---|---|
<title> | Judul di tab dan hasil pencarian |
<meta name="description"> | Ringkasan halaman untuk mesin pencari |
<meta name="viewport"> | Lebar layar di perangkat bergerak |
<meta name="theme-color"> | Warna bilah browser di ponsel |
<meta name="author"> | Nama penulis |
<link rel="icon"> | Ikon kecil di tab (favicon) |
<link rel="stylesheet"> | Menghubungkan berkas CSS |
<link rel="canonical"> | Alamat utama halaman (menghindari duplikat di SEO) |
Open Graph: tampilan saat dibagikan
Saat tautanmu dibagikan di WhatsApp, Facebook, atau LinkedIn, platform membaca tag Open Graph untuk membuat kartu pratinjau:
<meta property="og:title" content="Belajar HTML Gratis">
<meta property="og:description" content="Belajar HTML dari nol dengan latihan interaktif.">
<meta property="og:image" content="https://kelasit.com/gambar/html.png">
<meta property="og:type" content="website">Penting: hanya elemen tertentu yang boleh berada di head: title, meta, link, style, script, base. Elemen tampilan seperti p atau h1 harus di body.