Open Graph (pratinjau saat dibagikan)

Apa saja isi tag Open Graph?

Tag Open Graph adalah lembar keterangan singkat yang ditulis di bagian kepala halaman, dengan empat isi dasar: judul · jenis · foto utama · alamat. Dokumentasi resmi Open Graph Protocol (ogp.me) menetapkan keempatnya sebagai properti wajib untuk setiap halaman.

Jika ditambah deskripsi · nama situs · bahasa · keterangan foto, pratinjau jadi lebih rapi. Yang terlihat oleh pelanggan terutama judul · deskripsi · foto, tetapi nilai lainnya juga dipakai layanan untuk memahami tautan dengan tepat.

Tag-tag ini ditulis di tempat yang tidak terlihat oleh pelanggan. Karena itu, sulit tahu ada yang terlewat sebelum benar-benar mencoba mengirim tautan, jadi sebaiknya dimasukkan ke daftar periksa sebelum rilis.

Berapa ukuran dan seperti apa susunan foto pratinjau saat dibagikan?

Paling sering dibuat persegi panjang mendatar dengan rasio sekitar 1.91:1 (contoh: 1200×630). Dokumentasi pengembang Meta (Facebook) menyarankan foto dengan lebar 1080 piksel atau lebih agar terlihat baik di layar beresolusi tinggi, dan menyarankan lebar · tinggi foto ikut ditulis dalam tag.

Rasio pemotongan foto sedikit berbeda di tiap layanan. Karena itu, lebih aman mengumpulkan nama usaha atau tulisan inti di tengah, menjauhi tepi.

Jika memasukkan tulisan ke dalam foto, satu frasa singkat sekitar sepuluh karakter sudah cukup. Di grup chat, pratinjau terlihat lebih kecil dari telapak tangan, jadi cek langsung di layar ponsel.

Ukuran file foto juga jangan terlalu besar. Jika layanan berbagi butuh waktu lama untuk mengambil foto, pratinjau bisa tampil tanpa foto.

Apakah pratinjau harus dibedakan untuk tiap halaman?

Ya, untuk halaman yang sering dikirim ke pelanggan, sebaiknya dibedakan per halaman. Jika semua tautan tampil dengan foto logo yang sama, penerima tidak tahu isinya sebelum mengklik.

Setidaknya tetapkan tersendiri untuk halaman pertama, halaman menu · harga, halaman reservasi, dan halaman acara. Untuk judul, pilih isi yang didapat pelanggan dari halaman itu; untuk foto, pilih adegan yang paling menggambarkan isi itu.

Untuk usaha yang sering mengunggah tulisan atau produk baru, sulit menentukannya satu per satu. Lebih praktis jika diatur agar foto pertama tulisan atau foto utama produk otomatis menjadi foto pratinjau.

• Kafe: tautan info menu baru memakai foto menu baru dan judul ‘Rilis latte kastanye edisi musim gugur’.
• Salon: tautan acara memakai judul ‘Info perawatan klinik untuk pengunjung pertama’ dan foto salon.
• Studio kerajinan: tautan pendaftaran kelas memakai foto karya jadi dan judul ‘Pendaftaran kelas akhir pekan November (11)’.
• Penjualan online: tautan produk menampilkan foto dan nama produk itu apa adanya.

Bagaimana menulis judul dan deskripsi pratinjau saat dibagikan?

Tulis judul pratinjau agar penerima tahu apa yang akan didapat sebelum membuka tautan. Boleh sama dengan judul halaman di hasil pencarian, tetapi karena dibaca di ruang chat, boleh juga dibuat sedikit lebih seperti menyapa.

Deskripsi cukup satu-dua kalimat, sesuai dokumentasi resmi Open Graph. Taruh di depan informasi yang ingin diketahui penerima, seperti jam buka · lokasi · cara reservasi. Kalimat panjang mudah terpotong di pratinjau.

Jika foto utama sudah ditentukan, tulis juga keterangan fotonya (og:image:alt). Dokumentasi Open Graph juga menyarankannya, dan isi foto ikut tersampaikan kepada orang yang memakai pembaca layar.

Judul yang menunjukkan apa yang bisa dilakukan penerima tautan memberi alasan klik yang lebih jelas daripada judul yang hanya mengulang nama usaha. Misalnya ‘Studio ○○ · Jadwal kelas November (11)’, bukan sekadar ‘Studio ○○’.

• Contoh judul: ‘Kafe ○○ · Hand drip Yeonnam-dong, setiap hari pukul 10–22’
• Contoh deskripsi: ‘Kafe hand drip dengan banyak kursi dekat jendela. Biji kopinya juga bisa dibeli di toko.’
• Contoh yang kurang: judul ‘Home’, deskripsi ‘Selamat datang’ — teks yang tidak menjelaskan usaha

Bagaimana urutan pengecekan jika pratinjau tidak berubah atau tampil aneh?

Kebanyakan karena tag terlewat, ada masalah pada alamat foto, atau layanan masih mengingat pratinjau lama. Jika dicek mengikuti urutan di bawah, penyebabnya mudah ditemukan.

Meta (Facebook) menyebutkan bahwa dengan meminta Sharing Debugger membaca ulang, Anda tidak perlu menunggu siklus pembaruan bawaan (sekitar 24 jam). KakaoTalk juga bisa melakukan hal yang sama di Sharing Debugger pada situs Kakao Developers.

Jika tautan yang sama akan dikirim ke beberapa layanan, cek sekali di tiap layanan. Meski membaca tag yang sama, cara memotong foto dan jumlah karakter yang tampil bisa terlihat berbeda di tiap layanan.

1. 01Cek apakah tag og:title · og:image benar-benar ada di halaman itu.
2. 02Cek apakah alamat foto berupa alamat lengkap yang diawali ‘https://’.
3. 03Masukkan alamat foto langsung ke browser dan cek apakah terbuka tanpa login.
4. 04Cek apakah ukuran file foto tidak terlalu besar.
5. 05Masukkan alamat ke Meta Sharing Debugger atau Kakao Sharing Debugger untuk membaca ulang pratinjau.
6. 06Kirim ulang lewat fitur ‘kirim ke diri sendiri’ KakaoTalk dan cek hasilnya.

Apa kesalahan umum pada Open Graph?

Kesalahan paling umum adalah memasang judul dan foto logo yang sama di semua halaman. Pengaturannya memang ada, tetapi tidak ada perbedaan antartautan, sehingga tidak memberi alasan untuk mengklik saat dibagikan.

Jika foto diganti tetapi nama filenya tetap, layanan kadang terus menampilkan foto lama. Jika membuat foto baru, mengganti nama file juga lebih pasti.

Pratinjau saat dibagikan dipakai sama persis bukan hanya untuk tautan yang Anda kirim, tetapi juga tautan yang dikirim pelanggan ke temannya. Itulah saat pelanggan mempromosikan usaha Anda, jadi setidaknya halaman pertama dan halaman reservasi wajib diurus.

Apa yang perlu ditanyakan ke pembuat situs soal Open Graph?

Pratinjau saat dibagikan merepotkan jika diperbaiki setelah rilis, jadi tanyakan empat hal di bawah ini di tahap draf desain.

• Apakah judul · deskripsi · foto bisa ditetapkan terpisah untuk tiap halaman?
• Apakah foto pratinjau otomatis ditentukan saat mengunggah tulisan atau produk baru?
• Apakah pratinjau saat dibagikan dicek langsung di KakaoTalk?
• Apakah nanti saya bisa mengganti pratinjau sendiri lewat panel admin?