Title dan Description

Ketika sebuah halaman muncul pada hasil pencarian, yang dijumpai orang lebih dulu bukan isi halaman, melainkan title dan meta description. title menjadi judul tautan yang diklik, sedangkan meta description melengkapi di bawahnya dengan ringkasan singkat. Keduanya juga bekerja setiap hari di tempat lain: teks pada tab browser dan label awal sebuah bookmark. Pada Chapter ini kita menulis keduanya dengan panjang yang tepat, gaya bahasa yang menarik tanpa menyesatkan, dan nilai yang unik untuk setiap halaman.

Tiga Tempat title Muncul #

Elemen title hanya boleh berisi teks: markup apa pun di dalamnya diperlakukan sebagai karakter biasa. Browser menampilkan isinya pada tab dan title bar, sedangkan layanan bookmark memakainya sebagai label bawaan saat halaman disimpan. Di sisi mesin pencari, title menjadi judul utama hasil pencarian, dan MDN mencatat bahwa isinya termasuk komponen yang diperhitungkan algoritma untuk mengurutkan halaman. Tiga peran ini berjalan sekaligus, sehingga title yang baik melayani pengunjung dan mesin sekaligus.

Panjang yang Aman bagi Hasil Pencarian #

MDN mencatat bahwa mesin pencari lazimnya menampilkan sekitar 55-60 karakter pertama title; teks setelahnya berpotensi terpotong. Angka ini pedoman, bukan aturan keras: title yang sedikit melewatinya tetap terbaca penuh pada tab browser. Pedoman serupa berlaku pada meta description, yang lazimnya ditampung sekitar 150-160 karakter sebelum cuplikannya dipangkas pada layar sempit. Lebih penting daripada mengejar angka pasti: taruh kata terpenting di awal, karena bagian yang terpotong paling sering berisi pelengkap di akhir.

Menulis description yang Menjual tanpa Clickbait #

meta description tidak berperan langsung pada urutan hasil pencarian, tetapi MDN mencatat bahwa mesin pencari memakainya untuk mengatur tampilan halaman pada hasil itu. Kalimat yang efektif menyebut apa yang didapat pengunjung, pembedanya dari halaman lain, dan bila cocok ditutup ajakan sederhana. Clickbait bekerja sebaliknya: janji besar tanpa isi memancing klik, lalu mengecewakan pembaca yang datang. Mesin pencari pun kadang menyusun cuplikannya sendiri dari isi halaman bila description dinilai tidak menjawab pencarian.

Contoh Baik dan Buruk #

Satu title Unik per Halaman #

Setiap halaman sebaiknya membawa title yang berbeda, sebab title duplikat memaksa mesin pencari menebak halaman mana yang layak tampil untuk suatu kata kunci. Pola “nama halaman — nama situs” yang konsisten membuat keunikan mudah dijaga pada situs yang head-nya dirakit templat. Budi yang mengelola dua puluh halaman produk cukup menuliskan nama produk dan varian di bagian depan title setiap halamannya. Prinsip yang sama berlaku pada description: satu kalimat khusus per halaman jauh lebih berguna daripada kalimat identik yang dipakai berulang.

Contoh Dokumen Lengkap #

File berikut memuat title dan description untuk halaman katalog Toko Budi:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Katalog Kopi dan Alat Seduh Lengkap — Toko Budi</title>
  <meta name="description" content="Katalog biji kopi dan alat seduh dari Toko Budi Surabaya. Pilih biji Gayo, Robusta Lampung, atau alat V60 untuk pemula. Pengiriman ke seluruh Indonesia.">
</head>
<body>
  <h1>Katalog Kopi dan Alat Seduh</h1>
  <p>Daftar biji kopi beserta harga per kemasan 200 gram.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Teks "Katalog Kopi dan Alat Seduh Lengkap — Toko Budi" pada tab browser
  - Pada hasil pencarian: title menjadi judul tautan, description menjadi cuplikan di bawahnya

Mari kita telaah peran setiap baris penting di atas:

1. Baris 6 (<title>): 47 karakter dengan kata kunci “Katalog Kopi” di awal dan nama situs di akhir; masuk rentang yang aman.
2. Baris 7 (<meta name="description">): satu kalimat isi, satu kalimat pembeda; panjangnya 152 karakter, di dalam rentang lazim 150-160.
3. Baris 10 (<h1>): judul di dalam halaman; mirip dengan title tetapi perannya beda — h1 untuk pembaca yang telah membuka halaman, title untuk tempat halaman disebut dari luar.

Head yang sehat dimulai dari fondasi teknis sebelum menyentuh aspek promosi. Chapter berikutnya, Charset dan Viewport, kembali ke dua baris yang wajib berdiri paling awal: deklarasi pengodean karakter dan deklarasi viewport untuk layar kecil.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen title
• MDN Web Docs — meta name (description)
• MDN Web Docs — Webpage metadata

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Katalog Kopi dan Alat Seduh Lengkap — Toko Budi</title>
  <meta name="description" content="Katalog biji kopi dan alat seduh dari Toko Budi Surabaya. Pilih biji Gayo, Robusta Lampung, atau alat V60 untuk pemula. Pengiriman ke seluruh Indonesia.">
</head>
<body>
  <h1>Katalog Kopi dan Alat Seduh</h1>
  <p>Daftar biji kopi beserta harga per kemasan 200 gram.</p>
</body>
</html>