Favicon adalah ikon kecil di tab browser, di sebelah judul halaman. Open Graph adalah sekumpulan meta tag yang dibaca aplikasi chat dan media sosial buat bikin kartu preview waktu link kamu dibagikan. Dua-duanya ditulis di <head>, dan dua-duanya bikin situs kamu gampang dikenali.
🧪 Tebakan cepat: ikon di tab browser dipasang pakai tag
<img>atau tag lain? Tebak dulu, jawabannya ada di bagian "Ikon tab pakai<link rel="icon">".
Ikon tab pakai <link rel="icon">
<head>
<title>Beranda | BelajarWeb.dev</title>
<link rel="icon" href="/favicon.ico">
</head>
<link>adalah tag buat menghubungkan halaman dengan file lain. Ditulis di<head>dan gak punya tag penutup.rel="icon"menyebut hubungannya: file ini ikon halaman.relsingkatan dari relationship (hubungan).href="/favicon.ico"adalah alamat file ikonnya. Harus diisi. Denganhref=""kosong, browser gak nemu ikon apa pun.
Hasilnya, ikon kecil muncul di tab, di sebelah tulisan "Beranda | BelajarWeb.dev". Jadi bukan <img>: <img> menaruh gambar di dalam halaman, sedangkan ikon tab cuma lewat <link rel="icon">.
File ikonnya boleh .ico, .png atau .svg. Buat iPhone, tambah <link rel="apple-touch-icon" href="/apple-touch-icon.png">, ikon yang dipakai waktu situs kamu disimpan ke layar utama.
Kartu preview pakai Open Graph
<meta property="og:title" content="Belajar coding praktis">
<meta property="og:description" content="Tutorial web development interaktif">
<meta property="og:image" content="https://belajarweb.dev/og-default.png">
- Tiap meta Open Graph ditulis
<meta property="og:..." content="...">. Namanya selalu diawaliog:, dan isinya dicontent. og:titleadalah judul kartu. Kalau gak ada, aplikasi chat biasanya memakai<title>halaman.og:descriptionadalah kalimat keterangan di bawah judul.og:imageadalah gambar kartu, ukuran yang umum 1200 x 630 piksel. Alamatnya harus lengkap darihttps://, karena aplikasi chat mengambilnya dari server mereka sendiri, bukan dari halaman kamu.contentharus berisi teks.content=""kosong sama aja dengan gak ngasih apa-apa.
Biasanya ditambah juga og:url (alamat halaman) dan og:type (jenis halaman, misalnya website).
💡 X (Twitter) punya tag tambahan. X juga membaca Open Graph, tapi ukuran kartunya diatur sendiri lewat
<meta name="twitter:card" content="summary_large_image">, yang bikin preview-nya pakai gambar besar.
⚠️ Jebakan yang sering ketemu
hrefataucontentkosong. Tag-nya ada, tapi gak ngasih apa-apa ke browser atau aplikasi chat.og:imagepakai alamat pendek./gambar.pnggak kebaca dari luar situs kamu. Tulishttps://situskamu.com/gambar.png.namebuat Open Graph. Standarnyaproperty:<meta property="og:title" ...>.- Preview gak berubah sesudah diganti. Aplikasi chat menyimpan preview lama untuk sementara. Tunggu, atau pakai alat debug dari platformnya, misalnya Sharing Debugger milik Facebook.
TL;DR: Favicon dipasang di <head> lewat <link rel="icon" href="/favicon.ico">, dengan href yang terisi. Kartu preview dibuat dengan meta Open Graph: <meta property="og:title" content="...">, lalu og:description dan og:image. Semua content harus berisi teks, dan og:image pakai alamat lengkap dari https://.
