Buat tag Open Graph dan Twitter Card dengan pratinjau media sosial langsung.
Terakhir diperbarui
Coddy mengajarimu dengan menulis kode sungguhan di browser: pelajaran interaktif, umpan balik instan, dan bantuan AI saat kamu buntu.
Saat kamu membagikan link di aplikasi modern apa pun, entah di postingan, DM, atau channel Slack, platform itu mengambil URL-nya dan menarik sedikit metadata untuk menampilkan *kartu share*: judul, deskripsi, gambar, dan nama situs. Metadata itu tidak diambil dari isi halaman yang terlihat, melainkan dari sekumpulan tag <meta> tertentu di dalam <head>. Protokol Open Graph, yang awalnya dibuat Facebook pada 2010, mendefinisikan sebagian besar tag itu. X (dulu Twitter) menambahkan beberapa tag ekstra dengan prefiks twitter:. LinkedIn, Discord, Slack, iMessage, WhatsApp, dan Pinterest semuanya membaca tag yang sama dengan sedikit variasi.
Mengatur tag ini dengan benar cukup dilakukan sekali per halaman, tapi dampaknya besar. Halaman tanpa gambar Open Graph terlihat rusak saat dibagikan. Judul yang terlalu panjang terpotong di tengah kata. Rasio aspek og:image yang salah akan diberi bingkai hitam oleh setiap platform. Alat ini membantumu menyesuaikan nilai-nilai itu dengan pratinjau langsung, jadi kamu bisa melihat masalah pemotongan teks dan gambar *sebelum* halamannya dirilis.
Semuanya berjalan secara lokal. Isi formulir, pratinjau, dan HTML yang dihasilkan tidak pernah keluar dari browser kamu, jadi kamu bisa menempelkan URL yang belum dirilis dan teks yang belum diumumkan tanpa khawatir bocor.
property (<meta property="og:title">), sedangkan tag SEO standar dan Twitter Card memakai name (<meta name="description">, <meta name="twitter:card">).title, meta description), Open Graph (og:title, og:description), dan Twitter (twitter:title, twitter:description).og:image sebaiknya berukuran 1200×630, disajikan lewat HTTPS, dan ditulis sebagai URL absolut. Path relatif gagal saat server lain mengambil halamannya.twitter:card di X mengatur tata letaknya: summary adalah thumbnail persegi kecil, sedangkan summary_large_image adalah banner selebar kartu yang diinginkan kebanyakan brand.Usahakan 50-60 karakter. Facebook memotong di sekitar 95 karakter dan X di sekitar 70. Mulailah dengan manfaatnya, bukan nama brand: "Cara deploy dengan Cloudflare Workers" lebih baik daripada "Blog Coddy · Panduan Deployment".
Usahakan 120-155 karakter. Sebagian besar platform memotong di sekitar 200. Pakai kalimat lengkap, karena deskripsi muncul di bawah judul di setiap kartu, dan potongan kalimat terlihat belum selesai.
Pakai URL https:// absolut dari halaman itu sendiri, bukan link pelacakan atau redirect. Crawler Open Graph mengikuti og:url saat menggabungkan share yang sama, jadi URL kanonis menjaga jumlah share dan pratinjau tetap konsisten.
1200×630 adalah ukuran ideal untuk kartu summary_large_image di X dan kartu standar di Facebook serta LinkedIn. Pakai PNG atau JPEG, di bawah sekitar 5 MB. Selalu pakai URL absolut, karena path relatif gagal ketika crawler media sosial mengakses URL dari servernya sendiri.
Tempel blok dari panel **Tag <head> yang dihasilkan** ke <head> halamanmu. Setelah deploy, validasi dengan debugger masing-masing platform (Facebook Sharing Debugger, X Card Validator, LinkedIn Post Inspector), dan paksa crawl ulang kalau nanti kamu mengganti gambarnya.
Tag di bawah ini mencakup semua yang dibaca platform media sosial saat ini. Tag bertanda property= termasuk protokol Open Graph; tag bertanda name= adalah varian SEO standar atau Twitter Card. Spesifikasi referensi: Open Graph, X Cards.
| Tag | Dipakai oleh | Rekomendasi | Catatan |
|---|---|---|---|
og:title | FB, LinkedIn, Slack, Discord | 50-60 karakter | Memakai <title> sebagai cadangan kalau tidak ada, tapi tetap isi. |
og:description | FB, LinkedIn, Slack, Discord | 120-155 karakter | Memakai meta description sebagai cadangan kalau tidak ada. |
og:image | Semua platform | 1200×630, < 5 MB, HTTPS, URL absolut | Harus URL absolut, karena path relatif gagal. |
og:image:alt | Aksesibilitas | Jelaskan isi gambar | Dipakai oleh pembaca layar dan beberapa platform. |
og:url | FB, LinkedIn | URL https:// kanonis | Dipakai untuk menggabungkan share dari varian query string yang berbeda. |
og:type | FB, LinkedIn | website atau article | article membuka article:published_time, article:author. |
og:site_name | FB, Discord | Nama brand | Ditampilkan sebagai atribusi kecil di atas atau di bawah kartu. |
twitter:card | X | summary_large_image | summary untuk thumbnail persegi kecil, summary_large_image untuk tata letak banner. |
twitter:title | X | Sama dengan og:title | X memakai og:title sebagai cadangan kalau tidak ada, jadi isi keduanya agar aman. |
twitter:description | X | Sama dengan og:description | Memakai og:description sebagai cadangan kalau tidak ada. |
twitter:image | X | Sama dengan og:image | Memakai og:image sebagai cadangan kalau tidak ada. |
twitter:site | X | @yourbrand | Akun X milik penerbit, dipakai untuk sebagian analitik. |
Atur **og:type** ke article, isi **Penulis** dan **Waktu terbit** di bagian khusus artikel, lalu pakai gambar sampul 1200×630. Pratinjaunya langsung berubah dan menunjukkan tampilan kartu di setiap platform.
og:type=article membuka tag khusus artikel (article:published_time, article:author) yang dipakai beberapa platform (Discord, LinkedIn) untuk menampilkan atribusi. Twitter mengabaikannya, tapi tidak mempermasalahkannya.
Biarkan **og:type** tetap website. Pakai nama produk sebagai judul, satu kalimat nilai jual sebagai deskripsi, dan potongan gambar hero atau screenshot sebagai gambar.
Landing page tidak butuh metadata artikel. Elemen yang paling sering diklik di kartu share landing page biasanya adalah gambarnya, jadi luangkan waktu untuk membuat visual 1200×630 yang rapi.
Judul: "Concept - Section · Docs". Deskripsi: satu kalimat yang menjelaskan konsepnya. Gambar: sampul dokumentasi yang umum atau screenshot UI yang relevan.
Halaman dokumentasi sering dibagikan di channel Slack dan thread X. Gambar sampul dokumentasi yang konsisten membuatnya mudah dikenali di feed yang ramai, bahkan sebelum judulnya terbaca.
og:image relatif seperti /images/cover.png. Crawler media sosial mengakses halamanmu dari server *mereka*, jadi path relatif mengarah ke domain platform itu sendiri dan menghasilkan 404. Selalu pakai URL https:// absolut.twitter:card. Tanpa tag itu, X memakai kartu minimal tanpa gambar. Tambahkan twitter:card=summary_large_image untuk mendapatkan tata letak banner yang sebenarnya diinginkan hampir semua brand.og:image:alt. Tag ini tidak ada ruginya, membantu pengguna pembaca layar, dan beberapa platform menampilkannya sebagai teks alt pada kartu.og:image.<meta>: judul, deskripsi, gambar, tipe, dan seterusnya. Setiap platform media sosial dan chat besar membacanya saat ini, sehingga protokol ini menjadi standar de facto untuk metadata kartu share.og: yang setara sebagai cadangan kalau tag twitter: miliknya tidak ada, jadi secara teknis Open Graph saja sudah cukup. Tapi menambahkan twitter:card, twitter:site, dan twitter:creator memberimu kendali lebih atas tampilan kartu di X.1200×630 piksel (rasio 1,91:1) adalah ukuran paling aman. Facebook, LinkedIn, dan X menampilkan rasio ini dengan baik. Jaga ukuran file di bawah sekitar 5 MB dan sajikan lewat HTTPS dengan URL absolut, karena path relatif gagal saat server lain mengambil halamanmu.
<title> dan meta description kamu. Google sesekali memakai og:image untuk pencarian gambar dan Discover, tapi itu bukan sinyal peringkat.Bisa. Kebanyakan framework mendukung gambar Open Graph dinamis. Next.js punya OG Image Generation API, sedangkan SvelteKit dan Astro punya pola serupa. Render gambarnya saat diminta dan simpan di cache selama mungkin, karena crawler media sosial cepat menyerah.
