Tag Title HTML: Judul Halaman, Panjang dan SEO

Letak tag title

Setiap halaman butuh satu elemen <title> di dalam <head>. Teksnya adalah nama halaman yang ditampilkan browser di tab dan bookmark, dan yang biasanya ditampilkan mesin pencari sebagai judul hasil:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Chocolate Chip Cookies Recipe | Bake Club</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Chocolate chip cookies</h1>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = 'document.title is: ' + document.title;
  </script>
</body>
</html>

Title itu sendiri tidak pernah muncul di dalam halaman. Preview ini juga berjalan di dalam halaman dokumentasi Coddy, jadi tab browsermu tetap menampilkan judul dokumentasinya; script kecil itu mencetak apa yang akan ditampilkan tab kalau kamu membuka contohnya sebagai file sendiri. Edit teks di <title> dan barisnya ikut berubah.

Menulis title yang bagus

Title sering menjadi hal pertama yang dibaca orang tentang halamanmu, di hasil pencarian atau di deretan tab. Beberapa aturan berikut berlaku untuk kebanyakan halaman:

• Spesifik dan unik. Setiap halaman di sebuah situs sebaiknya punya title sendiri yang menjelaskan halaman itu: "Chocolate Chip Cookies Recipe", bukan "Home" atau "Page 1".
• Letakkan kata-kata penting di depan. Tab itu sempit dan hasil pencarian memotong title yang panjang. Letakkan frasa kuncinya di sekitar 50 sampai 60 karakter pertama.
• Tambahkan nama situs di akhir, dipisahkan dengan | atau :, supaya topik halaman tetap ada di depan.
• Tulis untuk manusia. Title yang dijejali kata kunci berulang terlihat seperti spam, dan mesin pencari bisa menulis ulang title itu.

Tab tiruan ini memotong title kira-kira selebar tab sungguhan. Coba title yang lebih pendek atau lebih panjang:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>How to Bake Soft Chocolate Chip Cookies at Home | Bake Club</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .bar { background: #e5e7eb; padding: 8px 8px 0; border-radius: 8px 8px 0 0; }
    .tab {
      width: 200px; background: #fff; border-radius: 8px 8px 0 0;
      padding: 8px 12px; font-size: 13px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
  </style>
</head>
<body>
  <div class="bar"><div class="tab" id="tab"></div></div>
  <p>Full title: <code id="full"></code> (<span id="len"></span> characters)</p>
  <script>
    document.getElementById('tab').textContent = document.title;
    document.getElementById('full').textContent = document.title;
    document.getElementById('len').textContent = document.title.length;
  </script>
</body>
</html>

Dengan nama situs di akhir, tab yang terpotong tetap menunjukkan topik halamannya. Tukar urutannya ("Bake Club | How to...") dan setiap tab dari situsmu akan diawali dua kata yang sama.

Tag title vs h1 vs atribut title

Title dan <h1> biasanya bermakna sama, tapi title bisa disusun untuk pencarian dan memuat nama situs, sedangkan heading bisa lebih pendek. Atribut title tidak berhubungan dengan keduanya, meskipun namanya sama. Arahkan kursor ke kata yang bergaris bawah:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title vs title attribute</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Welcome to Bake Club</h1>
  <p>We test every recipe in a
    <span title="An oven with a fan that moves hot air" style="text-decoration: underline dotted;">convection oven</span>.
  </p>
</body>
</html>

Tooltip dari atribut title tidak muncul di layar sentuh dan tidak selalu dibacakan oleh screen reader, jadi jangan meletakkan informasi penting hanya di sana.

Title hanya berisi teks

Browser membaca semua yang ada di antara <title> dan </title> sebagai teks biasa. Tag tidak diproses, tapi character reference seperti & diterjemahkan, dan deretan whitespace digabung menjadi satu spasi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Salt &amp; Pepper   <b>Bold?</b></title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>document.title:</p>
  <pre id="out" style="background: #f3f4f6; padding: 8px;"></pre>
  <script>
    document.getElementById('out').textContent = document.title;
  </script>
</body>
</html>

Hasilnya Salt & Pepper <b>Bold?</b>: entity-nya menjadi &, tiga spasi menjadi satu, dan tag <b> tetap menjadi karakter apa adanya. Penekanan tidak mungkin dibuat di title.

Mengubah title dengan JavaScript

document.title bisa dibaca dan ditulis. Aplikasi web memakainya untuk menampilkan jumlah pesan yang belum dibaca atau status saat ini di tab:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inbox</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .tab { display: inline-block; background: #e5e7eb; border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 13px; }
    button { font: inherit; margin-top: 10px; padding: 6px 12px; }
  </style>
</head>
<body>
  <div class="tab" id="tab">Inbox</div><br>
  <button id="add">New message</button>
  <button id="read">Mark all read</button>
  <script>
    let unread = 0;
    const show = () => {
      document.title = unread ? '(' + unread + ') Inbox' : 'Inbox';
      document.getElementById('tab').textContent = document.title;
    };
    document.getElementById('add').onclick = () => { unread++; show(); };
    document.getElementById('read').onclick = () => { unread = 0; show(); };
  </script>
</body>
</html>

Di halaman sungguhan, tab browser berubah pada saat yang sama dengan tab tiruan di sini. Mesin pencari yang menjalankan JavaScript bisa melihat title yang diatur lewat script, tapi title yang ditulis di HTML adalah pilihan yang bisa diandalkan untuk apa pun yang perlu diindeks.

Kesalahan umum

• Tidak ada title sama sekali. Browser memakai URL atau nama file sebagai gantinya, dan halamannya menjadi HTML yang tidak valid. Tambahkan title ke setiap halaman, di samping tag meta viewport di template-mu.
• Title yang sama di setiap halaman. Tab, bookmark dan hasil pencarian jadi tidak bisa dibedakan.
• Meletakkan <title> di <body>. Browser tetap memakainya, tapi tempatnya di <head>, dan beberapa alat akan melewatkannya.
• Dua elemen <title>. Hanya yang pertama yang dihitung. Hapus yang lain.
• Mengawali setiap title dengan nama situs. Dahulukan topik halamannya; nama situs ditulis di akhir.