Head dan Meta Tag HTML: Bagian Tak Terlihat dari Halamanmu

Setiap halaman HTML terbagi jadi dua bagian besar: <head> dan <body>. Bagian body itu yang kamu lihat — teks, gambar, tombol, semuanya. Sementara head justru bagian yang tidak kamu lihat. Tidak ada satu pun isinya yang digambar di layar. Lalu kenapa dia penting? Karena head adalah tempat kamu memberi tahu browser, mesin pencari, dan media sosial soal cara memperlakukan halamanmu: pakai pengkodean karakter apa, judul apa yang muncul di tab, bagaimana skalanya di HP, ringkasan apa yang ditampilkan di Google, dan gambar apa yang muncul saat tautanmu dibagikan orang.

Singkatnya, head itu kecil tapi tugasnya berat. Halaman dengan head yang asal-asalan bisa tampil dengan karakter berantakan, jelek di HP, atau memunculkan pratinjau yang buruk saat dibagikan — padahal body-nya sudah sempurna. Yuk, kita bahas satu per satu apa saja yang seharusnya ada di sana.

Di mana letak head

Bentuk umum sebuah dokumen sudah pernah kamu temui di artikel struktur dokumen. Sebagai pengingat singkat, head berada di bagian atas, tepat setelah tag pembuka <html> dan sebelum <body>:

<!DOCTYPE html>
<html lang="id">
  <head>
    <!-- semua yang di sini tidak terlihat -->
  </head>
  <body>
    <!-- semua yang di sini terlihat -->
  </body>
</html>

Browser membaca head lebih dulu, sebelum mulai menggambar halaman. Urutan ini penting: hal seperti pengkodean karakter dan viewport perlu diketahui sebelum konten apa pun muncul, makanya keduanya diletakkan di bagian atas head.

Title

Satu-satunya tag di head yang sebenarnya dilihat pengguna — walau setengah-setengah — adalah <title>:

<head>
  <title>Harga — ACY Partner Indonesia</title>
</head>

Title memang tidak muncul di badan halaman, tapi dia tampil di tab browser, di bookmark, di riwayat browser, dan — ini yang penting — sebagai judul besar yang bisa diklik di hasil pencarian Google. Jadi memang layak ditulis dengan benar. Title yang bagus itu deskriptif dan spesifik: “Harga — ACY Partner Indonesia” langsung memberi tahu halaman ini soal apa, sedangkan “Untitled Document” atau “Beranda” tidak menjelaskan apa-apa.

Taruh topik halaman di depan

Mesin pencari dan tab browser memotong title yang kepanjangan, jadi mulailah dari bagian yang paling spesifik. “Harga — ACY Partner Indonesia” lebih enak dibaca di tab sempit ketimbang “ACY Partner Indonesia — Harga”, karena bagian yang membedakan halaman ini dari halaman lain di situs muncul lebih dulu. Usahakan title sekitar di bawah 60 karakter supaya tidak terpotong di hasil pencarian.

Setiap halaman sebaiknya punya tepat satu <title>, dan title tiap halaman idealnya unik. Memakai title yang sama di semua halaman adalah salah satu kesalahan SEO yang paling sering terjadi.

Meta tag

Sebagian besar isi head adalah <meta> tag. Meta tag itu elemen yang menutup sendiri dan membawa sepotong metadata — yaitu data tentang halamanmu, bukan konten untuk halaman itu. Mereka tidak menampilkan apa pun; tugasnya cuma menyodorkan satu fakta ke browser atau perkakas lain. Ada beberapa yang nyaris selalu kamu pakai di setiap halaman.

Pengkodean karakter

Inilah meta tag yang paling penting, dan dia harus jadi hal paling pertama di dalam head-mu:

<head>
  <meta charset="UTF-8" />
  <title>Halaman Saya</title>
</head>

charset memberi tahu browser pengkodean karakter mana yang dipakai berkas ini. UTF-8 adalah jawaban universal — dia mencakup setiap karakter di setiap bahasa, plus emoji, huruf beraksen, simbol mata uang, dan banyak lagi. Tanpa dia (atau dengan nilai yang salah), huruf beraksen dan karakter khusus bisa berubah jadi simbol kacau seperti Ã© alih-alih é.

charset duluan — dan ini ada alasannya

Letakkan <meta charset="UTF-8" /> sebagai baris pertama di dalam <head>, sebelum title atau apa pun. Browser perlu tahu pengkodeannya sebelum membaca teks apa pun, termasuk title. Spesifikasinya bahkan mewajibkan deklarasi charset muncul dalam 1024 byte pertama dokumen. Kalau kamu menaruhnya setelah title panjang yang penuh karakter khusus, bisa muncul kedipan teks rusak sesaat. Baris pertama di head — jadikan kebiasaan.

Viewport

Kalau kamu membuat halaman tanpa tag yang satu ini, tampilannya bakal oke di desktop tapi tampak kecil dan ke-zoom-out di HP, seolah-olah halaman desktop diciutkan biar muat. Satu baris ini yang membereskannya:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Begini maksudnya. width=device-width menyuruh browser membuat lebar halaman sama dengan lebar layar perangkat aslinya, bukannya pura-pura jadi desktop lebar lalu diperkecil. initial-scale=1.0 mengatur tingkat zoom awal ke 100%, jadi halaman tidak ke-zoom masuk atau keluar saat dimuat. Gabungan keduanya inilah yang membuat halaman siap untuk responsif — teksmu terbaca dan tata letakmu pas dengan layar di perangkat apa pun.

Tanpa tag viewport = situs mobile yang terlihat rusak

Yang ini bukan opsional di pengembangan web modern. Hilangkan tag viewport, dan situsmu bakal nyaris tidak bisa dipakai di HP — teks kecil, geser ke samping, semua kekacauan itu — sebagus apa pun CSS-mu. Salin baris persis ini ke head di setiap halaman. Inilah fondasi tempat desain responsif berdiri.

Tag ini berpasangan langsung dengan teknik CSS responsif yang akan kamu pelajari nanti. Tag viewport menyiapkan halamannya; CSS kemudian yang menyesuaikan tata letak agar pas.

Deskripsi

Deskripsi adalah ringkasan yang sering ditampilkan mesin pencari di bawah judul halamanmu pada hasil pencarian:

<meta name="description" content="Bandingkan paket harga ACY Partner Indonesia. Tarif bulanan transparan, tanpa biaya tersembunyi, dan ada paket untuk setiap ukuran tim." />

Deskripsi tidak muncul di halaman, dan dia bukan faktor peringkat langsung, tapi sangat memengaruhi apakah orang mengklik hasilmu. Deskripsi yang jelas dan mengundang serta cocok dengan keinginan si pencari adalah pembeda antara diklik atau dilewati begitu saja. Targetkan sekitar 150–160 karakter, tulis untuk dibaca manusia ketimbang menjejalkan kata kunci, dan beri tiap halaman deskripsinya sendiri.

Meta tag lain yang akan kamu temui

Ada beberapa lagi yang sering muncul:

<meta name="author" content="ACY Partner Indonesia" />
<meta name="robots" content="index, follow" />
<meta http-equiv="refresh" content="5; url=https://acy-partner.com" />

author menyebutkan siapa pembuat halaman. Sifatnya informatif; bobot SEO-nya tidak besar.
robots memberi tahu mesin pencari apakah halaman ini boleh diindeks (index) dan tautannya boleh ditelusuri (follow). Defaultnya memang melakukan keduanya, jadi kamu baru benar-benar butuh ini saat ingin kebalikannya — misalnya noindex agar sebuah halaman tidak masuk hasil pencarian.
http-equiv="refresh" otomatis mengalihkan atau memuat ulang setelah sekian detik. Bisa jalan, tapi pengalihan asli di sisi server lebih bagus untuk SEO — anggap yang ini pilihan terakhir.

Perhatikan, meta tag name memakai pola name="..." content="...", sementara beberapa yang khusus seperti refresh memakai http-equiv="...". Yang charset punya bentuk singkatnya sendiri. Kamu tidak perlu menghafal kategorinya — cukup kenali bentuk-bentuknya saja.

Pratinjau media sosial (Open Graph)

Pernah memperhatikan, saat kamu menempel tautan ke WhatsApp, Facebook, atau LinkedIn, muncul kartu rapi berisi judul, deskripsi, dan gambar? Itu tidak terjadi dengan sendirinya — semua berasal dari keluarga meta tag khusus bernama Open Graph, yang ditulis dengan atribut property berawalan og::

<meta property="og:title" content="Harga — ACY Partner Indonesia" />
<meta property="og:description" content="Paket bulanan transparan untuk setiap ukuran tim." />
<meta property="og:image" content="https://acy-partner.com/preview.jpg" />
<meta property="og:url" content="https://acy-partner.com/harga" />
<meta property="og:type" content="website" />

Saat seseorang membagikan tautanmu, platform sosial membaca tag-tag ini lalu menyusun kartu pratinjaunya dari sana. og:image adalah yang paling diperhatikan orang — itu gambar di dalam kartunya, dan kalau hilang atau jelek, tautan yang dibagikan jadi terkesan tidak meyakinkan. Twitter/X punya set serupa miliknya sendiri (twitter:card, twitter:image), tapi akan jatuh balik ke Open Graph kalau yang itu tidak ada.

Tag og: pakai property, bukan name

Tag Open Graph melanggar pola biasa: mereka memakai property="og:title", bukan name="...". Itu karena Open Graph adalah standar terpisah (awalnya dari Facebook), bukan bagian dari meta HTML inti. Kalau kamu salah menulis name="og:title", pratinjaunya tidak akan terbaca. Cocokkan ejaan property= persis seperti itu.

Kamu tidak butuh Open Graph di halaman latihan pribadi, tapi untuk apa pun yang publik — situs bisnis, blog, halaman produk — tag inilah yang membuat tautanmu terlihat profesional saat dibagikan. Lima baris ini benar-benar sepadan.

Hal-hal lain yang tinggal di head

Ada dua tag lagi yang masuk ke head, walaupun bukan termasuk <meta>:

<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <link rel="stylesheet" href="styles.css" />
  <title>Halaman Saya</title>
</head>

<link rel="stylesheet"> adalah cara kamu menautkan berkas CSS eksternal — inilah cara standar memberi halaman tampilannya, dan dia ditaruh di head agar style termuat sebelum body digambar.
<link rel="icon"> mengatur favicon, ikon mungil yang muncul di tab browser di sebelah title.

Kamu juga bisa menaruh blok <style> dan tag <script> di head, walaupun script sering kali ditempatkan di akhir body agar tidak menghalangi halaman tampil. Intinya begini: head adalah area persiapan tempat pengaturan, style, dan identitas halaman dideklarasikan sebelum konten yang terlihat muncul.

Head yang lengkap dan rapi

Kalau semuanya disatukan, ini head yang layak kamu pakai di halaman sungguhan — urutannya disengaja, dengan charset di paling depan:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Harga — ACY Partner Indonesia</title>
  <meta name="description" content="Paket bulanan transparan untuk setiap ukuran tim, tanpa biaya tersembunyi." />
  <meta property="og:title" content="Harga — ACY Partner Indonesia" />
  <meta property="og:description" content="Paket bulanan transparan untuk setiap ukuran tim." />
  <meta property="og:image" content="https://acy-partner.com/preview.jpg" />
  <link rel="icon" href="/favicon.ico" />
  <link rel="stylesheet" href="styles.css" />
</head>

Itu sudah mencakup yang esensial: pengkodean yang benar, viewport siap mobile, title dan deskripsi yang berguna, pratinjau sosial yang rapi, sebuah ikon, dan style-mu. Salin ini sebagai templat awal, lalu sesuaikan teksnya per halaman.

Penutup

Head memang tak terlihat, tapi di situlah banyak kualitas sebuah halaman ditentukan. Ini yang perlu kamu bawa:

<head> menampung pengaturan dan metadata; tidak ada isinya yang digambar di halaman, tapi dia mengatur cara halaman diperlakukan.
<title> adalah nama tab sekaligus judul di hasil pencarian — buat unik dan deskriptif.
<meta charset="UTF-8" /> ada di paling depan dan mencegah karakter berantakan.
<meta name="viewport" ...> wajib agar halaman tampil benar di HP — jangan pernah dilewati.
<meta name="description"> adalah “rayuanmu” di hasil pencarian; tulis untuk dibaca manusia.
Tag Open Graph (og:) mengatur kartu pratinjau saat tautanmu dibagikan.
Tag <link> di head menautkan stylesheet dan favicon-mu.

Setel head dengan benar sekali saja, dan sebagian besar isinya bisa kamu pakai ulang di setiap halaman, cukup mengubah title, deskripsi, dan tag sosialnya. Ini hanya sepetak kode kecil yang diam-diam membedakan halaman yang jalan di mana-mana dengan yang rusak secara mengejutkan. Berikutnya, dengan fondasi struktur dan meta sudah beres, kamu bisa menyelam lebih dalam ke konten yang terlihat — misalnya bekerja dengan gambar secara lanjutan.