Utilia
Kategori ▾
Bahasa: id ▾

Generator Open Graph dan Kartu Media Sosial

Buat meta tag Open Graph dan kartu X (Twitter) dengan pratinjau langsung tampilan tautan Anda saat dibagikan di Facebook, LinkedIn, dan X.

Gambar pratinjau

Pratinjau

Facebook, LinkedIn, dan kartu X besar
Tanpa gambar pratinjau
Kartu X kecil
Tanpa gambar pratinjau

Pratinjau perkiraan: setiap platform memotong gambar dan teks dengan cara yang sedikit berbeda.

Pemeriksaan

Cara memakai generator Open Graph

  1. Masukkan Judul dan Deskripsi yang ingin dilihat orang saat tautan Anda dibagikan. Keduanya boleh berbeda dari judul SEO Anda: tulis untuk linimasa media sosial.
  2. Tambahkan URL halaman (alamat kanonis) dan URL gambar. Keduanya harus absolut, diawali https://.
  3. Jelaskan gambar di Deskripsi gambar (teks alt) agar pengguna pembaca layar tahu isinya.
  4. Pilih atau jatuhkan gambar yang sama di Gambar pratinjau. Gambar tetap berada di perangkat Anda: alat ini hanya memakainya untuk menggambar pratinjau dan mengisi Lebar gambar (px) dan Tinggi gambar (px).
  5. Atur Nama situs, Jenis konten, dan Lokal, lalu pilih gaya Kartu X (Twitter) dan, jika ada, akun X situs dan penulis.
  6. Periksa pratinjau dan daftar Pemeriksaan, lalu Salin atau Unduh tag dan tempel di dalam <head> halaman.

Fungsi tag Open Graph

Ketika tautan ditempel di Facebook, LinkedIn, X, Slack, Discord, WhatsApp, iMessage, dan banyak aplikasi lain, sebuah crawler mengambil halaman dan membaca meta tag Open Graph (og:) untuk membuat kartu: gambar, judul, deskripsi singkat, dan domain. Tanpa tag ini, aplikasi menebak, sering kali memilih logo, banner cookie, atau kalimat pertama menu.

Empat properti dasarnya adalah og:title, og:type, og:image, dan og:url. Alat ini juga menambahkan og:description, og:site_name, og:locale, dan detail gambar (og:image:width, og:image:height, og:image:alt). Menyatakan ukuran gambar memungkinkan sebagian platform menampilkan kartu pada pembagian pertama tanpa menunggu gambar selesai diunduh.

X membaca tag twitter: miliknya sendiri tetapi beralih ke judul, deskripsi, dan gambar Open Graph jika versi X tidak ada, jadi alat ini hanya menambahkan yang benar-benar dibutuhkan X: twitter:card, akun opsional, dan deskripsi gambar. Dengan begitu setiap nilai tidak digandakan.

Ukuran gambar yang berfungsi di mana saja

Penggunaan Ukuran yang disarankan Catatan
Kartu besar (Facebook, LinkedIn, gambar besar X) 1200 × 630 px Rasio sekitar 1,91:1; taruh teks di tengah
Kartu X kecil (summary) minimal 144 × 144 px Ditampilkan persegi, dipotong dari tengah
Minimum di Facebook 200 × 200 px Gambar yang lebih kecil mungkin diabaikan

Gunakan JPEG atau PNG, jaga ukuran file tetap wajar (jauh di bawah 5 MB), dan hindari menaruh teks penting di dekat tepi, karena setiap platform memotong sedikit berbeda. Pratinjau di alat ini adalah perkiraan tata letak tersebut, bukan tangkapan layar.

Setelah dipublikasikan

Platform sosial menyimpan pratinjau tautan di cache, kadang selama berhari-hari. Setelah Anda mengubah tag, minta mereka memindai ulang halaman dengan Facebook Sharing Debugger atau LinkedIn Post Inspector. Halaman harus dapat diakses publik: crawler tidak dapat melihat halaman di balik login atau di localhost.

Pertanyaan yang sering diajukan

Apakah tag Open Graph meningkatkan SEO?

Tidak secara langsung. Mesin pencari tidak memakainya sebagai faktor peringkat. Tag ini memperbaiki tampilan tautan Anda saat dibagikan, yang dapat mendatangkan lebih banyak klik dan kunjungan dari jejaring sosial dan aplikasi pesan.

Mengapa gambar lama saya masih muncul saat tautan dibagikan?

Platform menyimpan versi sebelumnya di cache. Pindai ulang URL dengan alat debug platform, atau tambahkan query string ke URL gambar (misalnya ?v=2) agar dianggap sebagai file baru.

Sebaiknya pakai summary atau summary_large_image?

Gunakan “Gambar besar (summary_large_image)” untuk artikel, produk, dan landing page dengan visual yang kuat. Gunakan “Gambar persegi kecil (summary)” bila gambar Anda berupa logo atau avatar yang akan tampak janggal jika direntangkan di kartu lebar.

Bisakah saya memakai URL gambar relatif seperti /images/share.jpg?

Tidak. Crawler membaca tag di luar konteks, sehingga og:image dan og:url harus berupa URL absolut lengkap dengan protokol dan domain. Alat ini menandai alamat relatif.

Apakah gambar saya diunggah?

Tidak. Gambar yang Anda pilih untuk pratinjau hanya dibaca oleh browser Anda dan tidak pernah dikirim ke mana pun. Tag itu sendiri hanya memuat URL gambar yang Anda ketik.

Alat terkait