OpenGraph og:title og:description og:image
Kendalikan tampilan halaman Anda saat dibagikan di jejaring sosial.
OpenGraph og:title og:description og:image adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Apa Itu OpenGraph?
OpenGraph adalah protokol metadata yang diperkenalkan oleh Facebook agar setiap halaman dapat menjelaskan tampilannya saat dibagikan di platform sosial. Tag berada di <head> sebagai pasangan <meta property="og:..." content="..."> dan dibaca oleh setiap jejaring sosial utama.
Tag Inti
Empat tag yang pada praktiknya wajib ada adalah og:title, og:description, og:image, dan og:url. Jika salah satunya tidak ada, kartu berbagi menjadi tidak menarik atau, yang lebih buruk, sama sekali tidak memiliki pratinjau sehingga cenderung dilewati pengguna.
<meta property="og:title" content="Learn HTML">
<meta property="og:description" content="From DOCTYPE to Web Components.">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:url" content="https://example.com/learn">og:title
Judul utama pada kartu berbagi. Pertahankan panjangnya di bawah sekitar 60 karakter agar muat dalam satu baris dan tidak terpotong oleh jejaring sosial. Samakan dengan <title> halaman, tetapi Anda boleh mengoptimalkannya untuk meningkatkan rasio klik.
og:description
Ringkasan satu atau dua kalimat yang ditampilkan di bawah judul. Targetkan 120–160 karakter — cukup panjang untuk menarik minat, tetapi cukup singkat agar tampil utuh di setiap platform. Hindari umpan klik; deskripsi yang jujur menghasilkan interaksi jangka panjang yang lebih baik.
og:image
Gambar utama. Gunakan JPG atau PNG berukuran 1200x630 piksel (di bawah sekitar 5 MB). Selalu gunakan URL absolut — URL relatif tidak berfungsi karena pemindai tidak memiliki konsep tentang "halaman ini". Sediakan og:image:width dan og:image:height agar tidak perlu ada permintaan tambahan saat membuat pratinjau.
og:url
URL kanonis halaman. Tetapkan meskipun halaman sudah memiliki <link rel="canonical"> — beberapa pemindai lebih memilih tag OG. Hapus parameter pelacakan agar URL yang dibagikan tidak berkembang menjadi banyak halaman "berbeda" dalam basis data platform sosial.
og:type
Memberi tahu platform jenis konten ini: "website", "article", "product", "video.movie", "book", dan sebagainya. Article adalah pilihan yang paling umum untuk kiriman blog dan membuka tag tambahan seperti article:published_time dan article:author.
og:locale
Lokalisasi BCP-47 konten (misalnya "en_US", "tr_TR"). Jika digabungkan dengan og:locale:alternate, tag ini memberi tahu jejaring sosial bahasa lain yang tersedia untuk halaman tersebut, yang digunakan Facebook untuk menentukan apakah pratinjauan perlu diterjemahkan.
og:site_name
Nama tampilan situs penerbit. Beberapa jejaring sosial menampilkannya sebagai subjudul pada kartu. Buatlah singkat dan konsisten di setiap halaman agar merek terlihat sama, terlepas dari artikel mana yang dibagikan.
Menguji Kartu
Gunakan Sharing Debugger milik Facebook dan Post Inspector milik LinkedIn untuk mengambil halaman seperti yang dilihat pemindai, melihat tag yang diuraikan, serta memperbarui pratinjau yang tersimpan dalam cache. Setelah menerapkan og:image baru, pemindaian ulang diperlukan; jika tidak, pengguna akan melihat gambar lama selama berhari-hari.
Kesalahan Umum
Tag yang dirender oleh server wajib ada — sebagian besar pemindai tidak menjalankan JavaScript, sehingga tag OG yang disisipkan React di sisi klien tidak terlihat oleh mereka. Render tag tersebut dalam HTML awal, idealnya dengan SSR atau SSG; jika tidak, kartu berbagi akan terus tampil generik.
Pemeriksaan Pengetahuan
Mengapa og:image harus menggunakan URL absolut, bukan jalur relatif?
Ringkasan
Tag OpenGraph (og:title, og:description, og:image dengan URL absolut, og:url, og:type, og:locale, og:site_name) mengendalikan tampilan setiap halaman saat dibagikan. Render tag tersebut di sisi server, pertahankan judul di bawah 60 karakter dan deskripsi sekitar 150 karakter, gunakan gambar 1200x630, serta uji dengan Facebook Sharing Debugger sebelum peluncuran.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Pertanyaan yang Sering Diajukan
Apakah pelajaran “OpenGraph og:title og:description og:image” gratis?
Ya — teks lengkap “OpenGraph og:title og:description og:image” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “OpenGraph og:title og:description og:image”?
Kendalikan tampilan halaman Anda saat dibagikan di jejaring sosial. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “OpenGraph og:title og:description og:image” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- OpenGraph og:title og:description og:image
- Tag Meta Twitter Card
- Dasar-Dasar Data Terstruktur JSON-LD
- Hreflang untuk Halaman Internasional