Memperbarui Cache Open Graph & Twitter Card

Open Graph dan Twitter Card merupakan meta tag yang bisa dioptimasi untuk menampilkan preview halaman web yang menarik, terutama untuk judul dan gambar.

Namun, ketika sebuah halaman web diperbarui (terutama bagian judul dan featured image), ternyata Open Graph dan Twitter Card tidak selalu menampilkan pembaruan tersebut secara langsung.

Hal ini karena data yang tersimpan di server mereka (Facebook dan Twitter) masih menggunakan data yang lama (cache dari fetch pertama kali).

Jadi, untuk menampilkan data Open Graph dan Twitter Card yang baru, Anda harus menunggu sampai cache tersebut diperbarui.

Atau…

Anda bisa paksa mereka untuk merayapi ulang URL Anda.

Contoh Kasus

Sebagai contoh, saya menggunakan artikel lama yang saya update featured imagenya pada url ini: https://einzford.net/http-status-code/

Jika artikel tersebut dishare ke facebook, preview card yang tampil harusnya seperti ini:

preview open graph yang benar

Namun, karena data Open Graphnya masih ter-cache, preview cardnya malah tampil seperti ini:

preview cache open graph

Gambar yang ditampilkan masih featured image lama sebelum artikel diupdate.

Tidak ada kode html yang error, tidak ada masalah juga di sisi server. Hal ini murni dikarenakan cache Open Graph pada Facebook.

Cara Memperbarui Cache Open Graph Facebook

Untuk mengatasi masalah tersebut, yang perlu Anda lakukan hanyalah melakukan scrape ulang pada url yang diinginkan agar facebook mendapatkan meta data Open Graph terbaru pada artikel yang diupdate.

Langkah-langkahnya adalah sebagai berikut:

  1. Kunjungi alamat facebook developer berikut ini: https://developers.facebook.com/tools/debug/sharing/

  2. Masukkan URL yang ingin Anda scrape ulang pada kolom URL

    halaman sharing debugger facebook

  3. Klik Debug

  4. Selanjutnya, Anda bisa melihat meta data URL yang telah Anda inputkan di bagian bawah.

    Di sini Anda bisa melihat preview card saat URL di-scrape.

    Dalam contoh kasus ini, preview card dari URL saya adalah seperti berikut:

    preview open graph lama pada facebook sharing debugger

    Selain itu, Anda juga bisa melihat beberapa informasi lain seperti waktu atau data Open Graph pada halaman yang di-scrape.

    Salah satu alasan kenapa featured image yang ditampilkan belum diupdate adalah karena memang data Open Graph yang tersimpan masih data lama (bisa dilihat pada bagian Time Scraped).

    time scrapped pada facebook sharing debugger

  5. Untuk melakukan scrape ulang, Anda hanya perlu menekan tombol Scrape Again di sebelah informasi Time Scrapped.

  6. Setelah selesai, maka facebook akan menampilkan data waktu terbaru ketika halaman di-scrape.

    time scrapped berhasil diperbarui

  7. Anda juga bisa langsung melihat preview card terbaru di bagian Link Preview.

    preview open graph setelah diperbarui

Cara Memperbarui Cache Twitter Card

Sama halnya dengan Open Graph, Twitter Card terkadang juga menampilkan preview yang salah dikarenakan masalah cache.

Untuk melakukan scrape ulang pada Twitter Card, Anda bisa lakukan langkah-langkah berikut ini:

  1. Kunjungi halaman Twitter Card Validator berikut ini: https://cards-dev.twitter.com/validator

  2. Masukkan URL yang diinginkan pada kolom Card URL

    halaman twitter card validator

  3. Tekan tombol Preview Card

  4. Anda bisa lihat hasilnya di bagian Card Preview

  5. Jika preview yang ditampilkan masih belum update, Anda bisa reload dan ulangi menekan tombol Preview Card sampai hasilnya sesuai.

Setelah mengikuti langkah-langkah di atas, seharusnya preview Open Graph dan Twitter Card Anda sudah sesuai dengan halaman aslinya.

Jika masih belum sesuai, mungkin Anda harus memeriksa kembali apakah penulisan meta tag nya sudah benar atau belum.