Cara Menambahkan Open Graph WordPress – Saat ini, media sosial menjadi salah satu platform penting dalam berbagi konten. Ketika Anda membagikan tautan dari situs web Anda di media sosial, tampilan konten tersebut akan memainkan peran besar dalam menarik minat pengguna.
Salah satu cara untuk mengontrol tampilan tersebut adalah dengan menggunakan open graph. Dalam artikel ini, kami akan membahas cara menambahkan open graph di WordPress untuk memastikan konten Anda terlihat menarik dan profesional saat dibagikan di platform media sosial.
Pelajari cara menambahkan open graph di WordPress untuk memaksimalkan tampilan saat berbagi konten di media sosial. Dengan open graph, Anda dapat mengontrol gambar, judul, dan deskripsi yang ditampilkan, meningkatkan visibilitas dan menarik pengunjung baru.
Apa itu Open Graph?
Open Graph adalah protokol yang dikembangkan oleh Facebook untuk memungkinkan konten web dapat dibagikan dengan lebih baik di platform media sosial.
Baca juga: Apa itu URL Canonical? Pengertian, Cara Kerja dan Cara Menggunakannya
Dengan menggunakan Open Graph, pengguna dapat membagikan tautan ke suatu situs web, dan informasi yang terkait dengan tautan tersebut akan ditampilkan secara menarik dan informatif ketika dibagikan di media sosial.
Sejarah Open Graph
Open Graph pertama kali diperkenalkan oleh Facebook pada tahun 2010. Pada awalnya, protokol ini dirancang untuk memperkaya pengalaman berbagi tautan di Facebook.
Namun, seiring berjalannya waktu, Open Graph juga diterima oleh platform media sosial lainnya seperti Twitter, LinkedIn, dan Pinterest.
Bagaimana Open Graph Bekerja?
Ingin tahu bagaimana open graph bekerja pada sebuah website? Berikut penjelasan bagaimana open graph bekerja:
Metadata
Metadata Open Graph berperan penting dalam menentukan bagaimana tautan yang dibagikan akan ditampilkan di media sosial. Hal ini dapat mencakup judul, deskripsi, URL, gambar, dan informasi lainnya yang relevan dengan konten halaman web tersebut. Platform media sosial menggunakan metadata Open Graph ini untuk menampilkan preview tautan yang lebih menarik.
Untuk mengimplementasikan Open Graph di sebuah situs web, pengembang harus menambahkan tag HTML yang sesuai pada halaman web tersebut.
Tag HTML ini berfungsi untuk memberikan informasi metadata Open Graph kepada platform media sosial ketika tautan tersebut dibagikan. Dengan begitu, tautan yang dibagikan akan memiliki tampilan yang lebih menarik dan informatif.
Ketika pengguna membagikan tautan yang mengandung metadata Open Graph, platform media sosial akan mengambil informasi dari metadata tersebut dan menampilkannya sebagai preview tautan.
Dengan menggunakan Open Graph secara optimal, pemilik situs web dapat mengoptimalkan tampilan tautan mereka di media sosial, sehingga meningkatkan peluang untuk mendapatkan klik dan interaksi lebih banyak.
Cara Menambahkan Open Graph WordPress
Bagaimana cara menambahkan open graph di wordpress? Jika Anda menggunakan plugin optimasi SEO seperti Yoast atau RankMath maka open graph sudah otomatis aktif jika Anda mengaktifkan pengaturan media sosial.
Lalu bagaimana jika ingin menambahkan open graph otomatis mengambil dari data suatu halaman atau post yang sudah ada? Berikut ini cara mudahnya:
Tambahkan kode berikut ini:
function tampilkan_open_graph() {
global $post;
// Mengambil URL gambar unggulan (featured image)
$featured_image = get_the_post_thumbnail_url($post->ID);
// Mendapatkan judul halaman
$page_title = get_the_title();
// Mendapatkan deskripsi halaman
$page_description = get_the_excerpt();
// Mendapatkan URL halaman
$page_url = get_permalink();
// Menampilkan open graph meta tags
echo '<meta property="og:title" content="' . $page_title . '"/>';
echo '<meta property="og:description" content="' . $page_description . '"/>';
echo '<meta property="og:url" content="' . $page_url . '"/>';
echo '<meta property="og:image" content="' . $featured_image . '"/>';
// Menampilkan Twitter card meta tags (opsional)
echo '<meta name="twitter:card" content="summary_large_image"/>';
echo '<meta name="twitter:title" content="' . $page_title . '"/>';
echo '<meta name="twitter:description" content="' . $page_description . '"/>';
echo '<meta name="twitter:image" content="' . $featured_image . '"/>';
}
// Menambahkan open graph function ke dalam <head> tag
add_action('wp_head', 'tampilkan_open_graph');
Selanjutnya, Anda dapat menambahkan kode tersebut ke dalam file functions.php tema WordPress Anda atau dalam plugin terpisah untuk mengaktifkan fungsi tersebut. Function ini akan menampilkan meta tags open graph di dalam tag <head> setiap kali halaman WordPress ditampilkan, menggunakan informasi dari featured image, judul, deskripsi, dan URL halaman yang sedang aktif.
Pastikan juga bahwa tema WordPress Anda sudah mendukung fitur featured image. Selain itu, pastikan Anda telah mengatur featured image untuk setiap halaman atau postingan yang ingin ditampilkan di open graph.
