Judul dan Deskripsi

Elemen title, meta description, dan kartu sosial Open Graph.

Daftar isi

Judul dan deskripsi adalah dua metadata yang paling sering dibaca mesin pencari dan aplikasi pembagian tautan ketika sebuah halaman dirujuk. Topik ini membahas elemen title, meta description, dan kartu sosial Open Graph beserta atribut-atributnya, termasuk varian kartu Twitter yang disinggung sekilas. Setelah mengikuti topik ini, sebuah halaman dapat diberi judul, deskripsi, dan kartu sosial yang utuh serta siap dibaca aplikasi lain.

Elemen title dan keunikan per halaman#

Elemen title menetapkan judul dokumen dan termasuk metadata yang wajib ada di dalam head menurut spesifikasi HTML. Isinya tidak dirender di dalam halaman, tetapi muncul pada tab browser, daftar bookmark, riwayat penelusuran, dan sebagai teks tautan utama pada hasil pencarian. Judul yang baik menyebut isi halamannya secara spesifik, sehingga halaman kalkulator menggunakan judul seperti Kalkulator Konversi Satuan dan bukan sekadar Alat Daring.

Setiap halaman pada sebuah situs memerlukan judul yang berbeda dari halaman lainnya. Judul yang identik pada banyak halaman menyulitkan mesin pencari membedakan halaman mana yang sesuai dengan kueri pengguna, dan menyulitkan pengguna memilih hasil yang benar. Judul sepanjang sekitar 50 sampai 60 karakter umumnya masih tampil utuh, meskipun batas pastinya dihitung mesin pencari dari lebar piksel dan bukan dari jumlah karakter.

Perbedaan antara title dan h1 perlu dipisahkan dengan tegas. title adalah metadata untuk browser dan mesin, sedangkan h1 adalah judul konten yang dirender di dalam halaman. Keduanya boleh berbunyi sama, tetapi keduanya tidak saling menggantikan karena dibaca oleh pihak yang berbeda.

meta description dan rasio klik#

Elemen meta dengan nama description menyimpan ringkasan isi halaman dalam satu atau dua kalimat. Nilainya tidak dirender di halaman, tetapi menjadi kandidat utama cuplikan (snippet) yang ditampilkan mesin pencari di bawah tautan hasil. Banyak mesin pencari menempatkan meta description sebagai kandidat cuplikan tersebut, meskipun cuplikan akhir dapat diambil dari isi halaman apabila bagian itu lebih sesuai dengan kueri yang diketik pengguna.

Meta description bukan faktor peringkat langsung, tetapi cuplikan yang menjelaskan isi halaman dengan tepat memengaruhi keputusan pengguna untuk mengklik tautan tersebut. Rasio klik yang naik pada kueri yang sama adalah manfaat yang timbul dari deskripsi yang ditulis dengan serius. Panjangnya dijaga di sekitar 155 sampai 160 karakter agar cuplikan tidak terpotong, dan setiap halaman memerlukan deskripsi yang berbeda dari halaman lainnya.

Panjang kedua teks itu dapat diperiksa sebelum halaman dipublikasikan. Skrip berikut membandingkan panjang judul dan deskripsi contoh terhadap dua batas lazim tersebut, dan dijalankan dengan Node.js karena tidak menyentuh API browser sama sekali.

js Memeriksa panjang judul dan deskripsi

const judul = "Kalkulator Konversi Satuan";
const deskripsi = "Kalkulator daring untuk mengonversi satuan panjang, massa, waktu, dan suhu beserta contoh perhitungannya.";

const batasJudul = 60;
const batasDeskripsi = 160;

console.log(`judul: ${judul.length} karakter (batas lazim ${batasJudul})`);
console.log(`deskripsi: ${deskripsi.length} karakter (batas lazim ${batasDeskripsi})`);
console.log(`judul berisiko terpotong: ${judul.length > batasJudul ? "ya" : "tidak"}`);
console.log(`deskripsi berisiko terpotong: ${deskripsi.length > batasDeskripsi ? "ya" : "tidak"}`);

text Keluaran

judul: 26 karakter (batas lazim 60)
deskripsi: 105 karakter (batas lazim 160)
judul berisiko terpotong: tidak
deskripsi berisiko terpotong: tidak

Kedua nilai contoh berada di bawah batasnya, sehingga tautan dan cuplikan pada hasil pencarian berpeluang tampil utuh. Pemeriksaan semacam ini murah dilakukan dan mencegah suntingan ulang, karena deskripsi yang terpotong di tengah kalimat sering baru terlihat setelah halaman muncul di hasil pencarian.

Kartu sosial Open Graph#

Kartu sosial adalah tampilan ringkas sebuah tautan pada aplikasi pembagian tautan, lengkap dengan judul, deskripsi, dan gambarnya. Tampilan itu dibangun dari metadata Open Graph. Open Graph sendiri adalah protokol yang menempatkan metadata pada elemen meta dengan atribut property, dan bukan atribut name seperti pada meta description. Ketika sebuah tautan dibagikan, aplikasi pengirim mengambil halaman lewat perayap (crawler) miliknya sendiri, lalu membaca meta property tersebut untuk menyusun kartunya.

Protokolnya menetapkan empat properti yang wajib ada pada setiap halaman, yaitu og:title, og:type, og:image, dan og:url. Properti og:title dan og:description boleh berbunyi berbeda dari title dan meta description karena sasarannya adalah pembaca kartu. og:image memuat alamat gambar absolut, sedangkan og:type menyatakan jenis objeknya, misalnya website untuk halaman biasa atau article untuk tulisan. Properti tambahan seperti og:site_name dan og:locale melengkapi kartu apabila diperlukan.

Ukuran dan aksesibilitas gambar kartu juga ditangani protokol tersebut. Properti og:image:width dan og:image:height menyatakan dimensi gambarnya, sedangkan og:image:alt memuat teks alternatifnya bagi pembaca layar. Nilai 1200 kali 630 piksel lazim digunakan untuk og:image karena tampil utuh pada kartu berukuran besar di banyak aplikasi.

Lapisan pendamping bernama Twitter Card menggunakan atribut name dengan awalan twitter:, misalnya twitter:card yang diisi summary untuk kartu kecil atau summary_large_image untuk kartu besar. Apabila tag Twitter Card tidak ditemukan, banyak aplikasi kembali membaca tag Open Graph, sehingga kartu Open Graph yang lengkap sudah menutup sebagian besar kebutuhan.

Berkas utuh dengan kartu sosial#

Berkas utuh berikut menyusun seluruh metadata yang dibahas pada topik ini dalam satu halaman kalkulator. Judul dan deskripsinya ditulis terlebih dahulu, kemudian kartu Open Graph lengkap dengan dimensi dan teks alternatif gambarnya, lalu ditutup twitter:card.

html meta.html

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kalkulator Konversi Satuan</title>
  <meta name="description" content="Kalkulator daring untuk mengonversi satuan panjang, massa, waktu, dan suhu beserta contoh perhitungannya.">
  <meta property="og:title" content="Kalkulator Konversi Satuan">
  <meta property="og:description" content="Konversi satuan panjang, massa, waktu, dan suhu dengan langkah perhitungan yang ditampilkan.">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.example.com/kalkulator/">
  <meta property="og:image" content="https://www.example.com/gambar/kartu-kalkulator.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Kartu kalkulator konversi satuan dengan papan tombol angka">
  <meta name="twitter:card" content="summary_large_image">
</head>
<body>
  <h1>Kalkulator Konversi Satuan</h1>
  <p>Halaman ini mengonversi satuan panjang, massa, waktu, dan suhu.</p>
</body>
</html>

Blok kartu sosial mengulang judul dan deskripsi halaman dengan bunyi yang boleh sedikit berbeda karena ditujukan bagi pembaca kartu. Alamat og:url dan og:image ditulis absolut dengan domain www.example.com yang memang disediakan untuk contoh dokumentasi, karena kedua properti tersebut menuntut alamat lengkap. Pada proyek nyata, kedua nilai itu mengarah ke domain situs sendiri, dan gambar kartunya disediakan sebagai berkas PNG berukuran 1200 kali 630 piksel.

Kesalahan umum#

Judul sama untuk semua halaman. Mesin pencari sulit membedakan halaman yang judulnya identik, dan pengguna memilih hasil tanpa pegangan. Beri judul yang menyebut isi halamannya secara spesifik, lalu periksa keunikannya pada seluruh halaman situs.

Properti og:* ditulis dengan atribut name. Aplikasi pembagian tautan membaca atribut property, sehingga kartu yang ditulis dengan name umumnya tidak terbaca. Gunakan property untuk seluruh properti berawalan og:.

og:image diisi alamat relatif. Perayap aplikasi sosial membutuhkan alamat absolut untuk mengunduh gambar kartunya. Tulis alamat lengkap termasuk protokol dan domainnya, lalu sediakan berkas gambarnya pada alamat itu.

Ringkasan#

title adalah metadata wajib yang tampil pada tab, bookmark, dan hasil pencarian, dengan judul unik untuk setiap halaman.
meta description menjadi kandidat cuplikan hasil pencarian dan memengaruhi rasio klik, meskipun bukan faktor peringkat langsung.
Kartu sosial Open Graph menggunakan atribut property dengan empat properti wajib, yaitu og:title, og:type, og:image, dan og:url.
twitter:card menyediakan varian kartu beratribut name, dan banyak aplikasi kembali membaca tag Open Graph apabila tag tersebut tidak ditemukan.

Referensi#

Elemen title — MDN Web Docs — Kaidah elemen title dan tempat judul dokumen ditampilkan.
Elemen meta: name — MDN Web Docs — Daftar nilai name pada elemen meta, termasuk description.
The Open Graph protocol — ogp.me — Spesifikasi resmi Open Graph beserta properti wajib dan opsionalnya.
Elemen title — WHATWG — Definisi resmi elemen title pada HTML Living Standard.