Cara Menggunakan Debugger OpenGraph Facebook untuk Memperbaiki Kesalahan Umum

Facebook Debugger adalah alat yang memungkinkan Anda menganalisis dan memecahkan masalah tag OpenGraph untuk halaman mana pun. Dengan menggunakan Debugger, Anda dapat dengan cepat membidik sumber kesalahan dalam cuplikan kaya media sosial Anda.

Karena media sosial, dan Facebook itu sendiri, adalah komponen kunci dalam strategi pemasaran apa pun, mengetahui cara menggunakan alat ini dapat membuahkan hasil.

Mari kita bicara tentang Debugger Facebook dan OpenGraph!

Apa itu OpenGraph (Dan Cara Menambahkan Tag di WordPress)

OpenGraph mengacu pada kumpulan tag yang dapat Anda gunakan untuk menambahkan data meta ke halaman dan posting Anda. Platform media sosial menggunakan tag OpenGraph tersebut untuk menghasilkan cuplikan kaya yang mereka tampilkan kepada penggunanya:

Jika Anda tidak menggunakan tag OpenGraph, platform media sosial akan secara otomatis menghasilkan cuplikan untuk halaman Anda saat Anda membagikannya. Namun, dengan pendekatan itu, Anda kehilangan kendali atas tampilan cuplikan kaya tersebut.

Ini berarti jika gambar yang menyertainya tidak terlihat bagus, Anda perlu mengubahnya di dalam WordPress. Jika Anda tidak menyukai deskripsi meta yang digunakan Facebook, Anda juga perlu memodifikasi konten Anda. Secara keseluruhan, ini bukan pendekatan yang cerdas jika Anda ingin memanfaatkan sosial sebagai sumber lalu lintas.

Bahkan contoh sederhana ini mengharuskan Anda untuk menambahkan beberapa tag OpenGraph di latar belakang. Untuk cuplikan kaya, Anda perlu menggunakan tag berikut:

<meta property="og:title" content="Article Title"/>
<meta property="og:description" content="Article Description"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://example.com/link/to/article"/>
<meta property="og:site_name" content="Site Name"/>
<meta property="og:image" content="http://example.com/image/src.jpg"/>

Contoh ini dari artikel Tema Elegan sebelumnya tentang tag OpenGraph dan cara menggunakannya (yang harus Anda baca!). Singkatnya, ada dua cara Anda dapat menambahkan tag OpenGraph ke konten Anda:

1. Secara manual. Sama seperti markup Skema, Anda dapat menambahkan tag OpenGraph ke halaman Anda secara manual. Kelemahannya adalah Anda harus melakukan ini untuk setiap halaman di situs web yang ingin Anda bagikan di media sosial.
2. Menggunakan plugin. Ada banyak plugin yang menghasilkan tag OpenGraph untuk konten Anda secara otomatis. Opsi plugin yang paling populer adalah Yoast SEO, meskipun yang lain juga dapat melakukan ini.

Sayangnya, versi gratis Yoast SEO tidak menyertakan fungsionalitas pratinjau cuplikan kaya. Namun, hal itu memungkinkan Anda untuk memodifikasi OpenGraph tag konten Anda menggunakan editor sederhana.

Jika Anda sudah menggunakan Yoast SEO, memanfaatkan fungsionalitas OpenGraph-nya adalah cara termudah untuk memastikan cuplikan media sosial Anda terlihat persis seperti yang Anda inginkan.

Mengapa Anda Harus Menggunakan Debugger Facebook untuk OpenGraph

Facebook Debugger adalah alat yang dapat membantu Anda memastikan cuplikan kaya media sosial Anda bekerja dengan sempurna di seluruh papan. Untuk menggunakannya, cukup kunjungi halaman Berbagi Debugger untuk Pengembang Facebook. Di sini, masukkan URL untuk halaman yang tagnya ingin Anda periksa dan klik tombol Debug :

Anda bahkan tidak memerlukan akun Facebook untuk menggunakan Debugger. Segera setelah Anda menganalisis URL, itu akan menampilkan pratinjau cuplikan kayanya bersama informasi seperti URL kanoniknya:

Jika Anda menggulir ke bawah lebih jauh, Anda dapat menganalisis semua tag OpenGraph halaman:

Ingatlah bahwa Facebook Debugger tidak memungkinkan Anda untuk memperbaiki kesalahan atau memodifikasi tag Anda secara langsung. Namun, itu menunjukkan kepada Anda pratinjau tentang bagaimana konten Anda akan terlihat di Facebook. Lebih penting lagi, ini juga memberi Anda peringatan jika mendeteksi kesalahan dalam tag OpenGraph Anda:

Kesalahan khusus ini adalah salah satu dari tiga yang akan kami tunjukkan cara memecahkan masalah di bagian selanjutnya.

Cara Menggunakan Debugger Facebook untuk Memperbaiki 3 Kesalahan Umum OpenGraph

Untuk bagian ini, kita akan mengandalkan sebagian besar pada Debugger Facebook. Namun, jika Anda menggunakan Yoast SEO, kami juga akan menunjukkan kepada Anda bagaimana plugin dapat membantu Anda memperbaiki beberapa kesalahan OpenGraph. Mari kita lakukan!

1. Gosok URL Lagi untuk Memperbarui Gambar Terkait

Salah satu kesalahan paling umum yang mungkin Anda alami dengan tag OpenGraph adalah bahwa Facebook Debugger akan menampilkan gambar unggulan yang sudah ketinggalan zaman. Hal ini terjadi karena tidak memperbarui di Facebook secara otomatis ketika Anda memperbarui halaman atau gambar terkait posting. Saat Anda menggunakan tag OpenGraph untuk gambar, Facebook menyimpan file-file itu di ujungnya untuk meningkatkan kinerja. Akibatnya, jika Anda memperbarui gambar unggulan di pihak Anda, Anda perlu "memaksa" Facebook untuk melakukan hal yang sama di sisinya.

Cara termudah untuk melakukannya adalah dengan menggunakan fungsi Scrape Again dari Facebook Debugger. Anda dapat menemukan opsi ini tepat di bawah Kapan dan bagaimana kami terakhir menggores URL :

Klik tombol Scrape Again dan lihat apakah gambar unggulan halaman Anda berubah di bagian Pratinjau Tautan . Jika tidak, terkadang mengklik tombol lagi akan berhasil (bukan teknologi yang terlalu tinggi, tetapi berhasil!)

Jika gambar gagal diunggah, Anda mungkin menghadapi masalah caching di situs web Anda. Dalam hal ini, Anda akan ingin menghapus cache situs Anda kemudian menggunakan tombol Scrape Again untuk memaksa Facebook memperbarui informasi gambarnya.

2. Perbaiki Kesalahan "properti belum tersedia"

Tag og:image adalah apa yang digunakan OpenGraph untuk mendeklarasikan file gambar apa yang harus ditampilkan oleh platform media sosial untuk setiap halaman. Dalam beberapa kasus, Anda mungkin mengalami kesalahan "og: properti gambar belum tersedia".

Ini berarti mungkin ada masalah dengan resolusi gambar unggulan Anda. Jika ukuran gambar Anda di bawah 200×200, itu tidak akan berfungsi sama sekali.

Idealnya, gambar yang Anda tetapkan untuk cuplikan kaya media sosial Anda harus memiliki lebar 1080 piksel atau lebih tinggi. Gambar berfitur besar tidak hanya terlihat lebih baik, tetapi juga dapat membantu menarik perhatian ke konten Anda di media sosial:

Jika Anda ingin membaca lebih lanjut tentang gambar dan tag og:image , ada artikel lain di blog Tema Elegan. Singkatnya, jika Facebook Debugger mengembalikan kesalahan yang terkait dengan ukuran gambar Anda, Anda biasanya dapat memperbaikinya menggunakan salah satu dari dua pendekatan ini:

1. Perbarui gambar unggulan halaman dengan versi resolusi lebih tinggi (dan tetap gunakan gambar berkualitas tinggi mulai sekarang!).
2. Gunakan Yoast SEO untuk menunjukkan file gambar yang berbeda di dalam og: tag gambar Anda .

Untuk Yoast SEO, Anda dapat menemukan opsi untuk mengubah "gambar Facebook" Anda di bawah tab Sosial untuk posting atau halaman yang ingin Anda perbarui:

Setelah Anda memperbarui gambar atau tag yang sesuai, gunakan tombol Scrape Again di Facebook Debugger. Peringatan “og:image properties are not yet available” seharusnya hilang dan gambar Anda akan ditampilkan dengan benar.

3. Tambahkan Properti fb:app_id yang Hilang ke Situs Web Anda

Mari kembali ke peringatan yang ditampilkan sebelumnya di artikel:

Peringatan ini berarti tidak ada ID Aplikasi Facebook yang terkait dengan situs web Anda. Anda tidak memerlukan ID aplikasi untuk membagikan konten Anda di media sosial, tetapi itu memungkinkan Anda untuk mendapatkan akses ke Facebook Insights.

Mengingat bahwa Facebook Insights dapat membantu Anda meningkatkan upaya pemasaran dan mengukur kinerja postingan, ada baiknya sedikit waktu penyiapan. Jika Anda tertarik untuk mendapatkan akses ke analitik tersebut, Anda harus membuat ID Aplikasi Facebook untuk situs web Anda.

Setelah Anda memiliki ID aplikasi, Anda dapat menggunakan Yoast SEO untuk menambahkannya ke halaman Anda menggunakan properti fb:app_id . Untuk melakukan ini, buka tab SEO > Sosial > Facebook di situs Anda dan cari bidang ID Aplikasi Facebook :

Tambahkan ID aplikasi Anda, simpan perubahan ke pengaturan plugin dan Anda siap melakukannya. Mulai sekarang, Debugger Facebook seharusnya tidak mengembalikan kesalahan apa pun yang terkait dengan properti fb:app_id yang hilang.

Kesimpulan

Debugger Facebook sangat mudah digunakan. Namun, beberapa kesalahan yang mungkin Anda alami sulit dipahami tanpa pemahaman dasar tentang tag OpenGraph. Secara umum, jika Anda menggunakan plugin seperti Yoast SEO, Anda tidak perlu khawatir mengatur tag secara manual.

Dengan Facebook Debugger, Anda dapat dengan cepat memecahkan masalah kesalahan OpenGraph dengan:

1. Menggores URL lagi untuk memperbarui gambar terkait.
2. Memperbaiki kesalahan "og: properti gambar belum tersedia".
3. Menambahkan properti fb:app_id yang hilang ke situs web Anda.

Apakah Anda memiliki pertanyaan tentang cara menggunakan Facebook Debugger? Mari kita bicara tentang mereka di bagian komentar di bawah!

Gambar thumbnail artikel oleh Sergey Targasov / shutterstock.com.