Pratinjau Open Graph
EXAMPLE WEBSITE
Contoh Judul Halaman
Ini adalah contoh deskripsi konten halaman yang akan muncul ketika dibagikan di media sosial.
https://example.com/page
Contoh Judul Halaman
Ini adalah contoh deskripsi konten halaman yang akan muncul ketika dibagikan di media sosial.
example.com
websiteCara menggunakan Open Graph Previewer
- 1
Masukkan URL halaman
Tempel URL lengkap halaman yang ingin Anda periksa ke dalam kolom URL situs web.
- 2
Ambil data OG
Klik "Fetch OG Data" untuk menarik judul, deskripsi, gambar, dan nama situs Open Graph yang sudah ada pada halaman.
- 3
Edit manual jika perlu
Beralih ke Edit Manually untuk menyesuaikan judul, deskripsi, URL gambar, tipe, dan kolom lainnya serta melihat pratinjau diperbarui.
- 4
Pratinjau dan salin tag
Tinjau pratinjau kartu Facebook dan Twitter, lalu salin meta tag yang dihasilkan untuk menambahkannya ke halaman Anda.
Panduan Definitif untuk Open Graph dan Pratinjau Tautan
Apa itu protokol Open Graph
Protokol Open Graph adalah sekumpulan kecil meta tag, yang awalnya diperkenalkan oleh Facebook, yang memungkinkan halaman web mana pun mendeskripsikan dirinya sebagai objek yang kaya ketika dibagikan. Alih-alih sekadar tautan biru polos, sebuah halaman dengan tag Open Graph berubah menjadi kartu berisi judul, ringkasan, dan gambar besar. Tag-tag ini berada di dalam head halaman dan menggunakan atribut property dengan awalan og, misalnya og:title dan og:image, yang dipasangkan dengan atribut content yang memuat nilainya. Karena standar ini diadopsi secara luas, tag og yang sama kini menggerakkan pratinjau di jauh lebih banyak platform daripada sekadar Facebook.
Open Graph murni soal penyajian dalam konteks sosial dan perpesanan. Ia tidak memiliki efek langsung pada peringkat pencarian, tetapi berpengaruh besar pada rasio klik dan pembagian, karena kartu yang memikat akan diklik dan dibagikan ulang sedangkan kartu yang polos atau rusak akan dilewati begitu saja.
Tag Open Graph inti
Lima properti melakukan sebagian besar pekerjaannya. og:title adalah judul kartu dan boleh berbeda dari tag title HTML Anda, sehingga memungkinkan Anda menulis frasa yang dioptimalkan untuk pembagian. og:description adalah baris pendukung di bawahnya. og:image adalah thumbnail, dan ia membawa bobot visual paling besar sejauh ini. og:url adalah URL kanonis yang seharusnya dituju kartu, yang menjaga pembagian tetap terkonsolidasi pada satu alamat bahkan ketika konten yang sama dapat dijangkau melalui beberapa URL. og:type mendeskripsikan objeknya, umumnya website untuk halaman generik atau article untuk postingan blog atau berita.
Properti tambahan menyempurnakan hasilnya: og:site_name melabeli sumbernya, og:locale mendeklarasikan bahasanya, dan untuk gambar, og:image:width serta og:image:height membantu platform menata kartu sebelum gambar selesai diunduh. Mengisi properti-properti ini menghasilkan pratinjau yang lebih andal dan lebih cepat dirender.
Twitter Card dan bagaimana X membaca tag Anda
X menggunakan tag twitter card-nya sendiri, tetapi ia toleran: jika tag khusus Twitter tidak ada, ia kembali ke tag Open Graph Anda. Tag kuncinya adalah twitter:card, di mana summary_large_image menghasilkan tata letak gambar besar yang diinginkan sebagian besar merek, sedangkan summary menghasilkan thumbnail yang lebih kecil di samping teks. Anda juga dapat menyetel twitter:title, twitter:description, twitter:image, dan twitter:site untuk menimpa nilai Open Graph secara khusus untuk X ketika Anda menginginkan teks yang berbeda di sana.
Dalam praktiknya, strategi yang baik adalah menyetel tag Open Graph yang lengkap untuk cakupan luas dan menambahkan hanya twitter:card untuk memilih tata letak gambar besar, membiarkan X mewarisi sisanya dari Open Graph. Ini menghindari pemeliharaan dua set tag yang nyaris identik sembari tetap memperoleh kartu yang lebih kaya di X.
Persyaratan gambar yang menentukan nasib kartu
og:image adalah tempat di mana sebagian besar pratinjau berhasil atau gagal. Ukuran yang banyak disarankan adalah 1200 kali 630 piksel, rasio kira-kira 1.91 banding 1, yang mengisi kartu gambar besar dengan rapi di Facebook, LinkedIn, dan X tanpa pemotongan. Gunakan URL absolut yang dapat dijangkau publik yang diawali dengan https; jalur relatif seperti /images/card.png adalah alasan nomor satu mengapa sebuah thumbnail sama sekali tidak muncul, karena penyisir tidak memiliki URL dasar untuk menyelesaikannya. Jaga ukuran berkas di bawah beberapa ratus kilobita dan hindari menaruh teks penting di dekat tepi, karena platform yang berbeda memotong sedikit berbeda.
Setiap platform juga menegakkan batas minimum dan maksimumnya sendiri. Gambar yang terlalu kecil akan kembali menjadi thumbnail mungil atau tanpa gambar sama sekali, dan berkas yang sangat besar mungkin dilewati. Berpegang pada satu JPEG atau PNG berukuran 1200 kali 630 yang disajikan melalui HTTPS adalah pilihan paling aman untuk perenderan yang konsisten di mana-mana.
Bagaimana Facebook, LinkedIn, Discord, dan Slack merender pratinjau
Ketika sebuah tautan ditempelkan ke platform mana pun ini, platform tersebut mengirimkan bot penyisirnya sendiri untuk mengambil halaman dan membaca head sebelum merender sebuah kartu. Facebook menggunakan facebookexternalhit, Slack dan Discord memiliki bot-nya sendiri, dan masing-masing mem-parsing tag og untuk membangun pratinjau. Ini berarti pratinjau mencerminkan apa yang dilihat penyisir di sisi server, yang dapat berbeda dari apa yang dilihat pengguna yang sudah masuk, terutama pada halaman yang memerlukan login atau yang merender meta tag-nya dengan JavaScript setelah pemuatan.
Karena perenderan terjadi di sisi bot, dua hal menjadi penting. Pertama, tag og Anda harus hadir di dalam HTML awal yang dikembalikan server, bukan disuntikkan kemudian oleh skrip sisi-klien yang mungkin tidak dieksekusi oleh penyisir. Kedua, halaman harus dapat dijangkau oleh bot tanpa autentikasi, atau penyisir akan mendapat dinding login alih-alih konten Anda dan pratinjau pun kembali kosong.
Caching, debugger, dan memaksa penyisiran ulang
Platform sosial secara agresif menyimpan pratinjau yang mereka sisir dalam cache, kadang selama berhari-hari. Inilah sumber keluhan klasik bahwa tag Open Graph yang diperbarui tidak muncul: platform masih menyajikan versi cache dari sebelum perubahan Anda. Solusinya adalah menggunakan alat debug milik platform tersebut untuk memaksa penyisiran yang segar. Sharing Debugger milik Facebook, Post Inspector milik LinkedIn, dan card validator milik X semuanya mengambil ulang halaman dan menunjukkan kepada Anda persis tag mana yang mereka parse, yang sekaligus menjadi cara untuk mendiagnosis mengapa sebuah kartu tampak salah.
Jadikan penyisiran ulang sebagai bagian dari rutinitas penerbitan Anda setiap kali Anda mengubah judul, deskripsi, atau gambar pada URL yang sudah dibagikan. Tanpa itu, pembagian-pembagian awal bisa mengunci kartu yang basi atau rusak yang bertahan lama setelah halamannya sendiri sudah benar. Pratinjau ini memungkinkan Anda memeriksa tag sebelum menerbitkan sehingga lebih sedikit koreksi yang diperlukan kemudian.
Kesalahan Open Graph yang paling umum
Kegagalan yang berulang dapat diprediksi: og:image yang hilang sehingga kartu tidak memiliki thumbnail, URL gambar relatif yang tidak dapat diselesaikan oleh penyisir, og:image yang disajikan melalui HTTP pada halaman yang selebihnya HTTPS (yang ditolak oleh sebagian platform), dan tag yang disuntikkan oleh JavaScript yang tidak pernah dijalankan penyisir. Yang sering lainnya adalah membiarkan og:url menunjuk ke URL non-kanonis atau staging, yang memecah jumlah pembagian dan dapat mengirim pengguna ke tempat yang salah.
Kesalahan yang lebih halus adalah lupa bahwa Open Graph dan cuplikan pencarian Anda adalah dua hal yang terpisah. og:title dan og:description mengontrol kartu sosial, sedangkan tag title HTML dan meta description mengontrol hasil Google, dan keduanya tidak harus identik. Optimalkan masing-masing untuk konteksnya: lugas dan membangkitkan rasa ingin tahu untuk kartu sosial, jelas dan sadar-kata-kunci untuk cuplikan pencarian.
Pertanyaan yang sering diajukan
Apa itu tag Open Graph dan mengapa penting?
Bagaimana cara kerja pratinjau Facebook dan Twitter?
Bisakah saya membuat tag tanpa halaman yang sudah ada?
Mengapa pengambilan URL bisa gagal atau tidak mengembalikan data?
Apakah alat ini gratis, dan apa yang terjadi pada URL yang saya masukkan?
Alat terkait
Lanjutkan dengan alat praktis ini